<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>$永远保存学习的心态$</title></head><body> ???<div>我是通过标签获取(紫色)</div> ???<div id="box">我是通过id获取(橙色)</div> ???<div class="box1">我是通过class获取(黄色)</div> ???<form action="" name="box2"> ???????我是通过name获取(绿色) ???</form> ???<div class="box3"> ???????我是通过querySelector获取(青色) ???</div> ???<div class="box4">我通过querySelectorAll获取(蓝色)</div> ???<script src="common.js"></script> ???<script> ???????var div = document.getElementsByTagName("div")[0]; ???????//根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 ???????//document.getElementsByTagName("标签名字"); ???????var box = document.getElementById("box"); ???????//根据id属性的值获取元素,返回来的是一个元素对象 ???????//document.getElementById("id属性的值"); ???????var box1 = document.getElementsByClassName("box1")[0]; ???????//根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持) ???????//document.getElementsByName("name属性的值") ???????var box2 = document.getElementsByName("box2")[0]; ???????//根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持) ???????//document.getElementsByClassName("类样式的名字") ???????var box3 = document.querySelector(‘.box3‘); ???????//根据选择器获取元素,返回来的是一个元素对象 (有的浏览器不支持)IE8以上支持 ???????//document.querySelector("选择器的名字");
???????var box4 = document.querySelectorAll(‘.box4‘)[0]; ???????//根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持)IE8以上支持 ???????//document.querySelectorAll("选择器的名字") ???????div.style.color = ‘#8B00FF‘; ???????box.style.color = ‘#ff7f00‘; ???????box1.style.color = ‘#ff0‘; ???????box2.style.color = ‘#00ff00‘; ???????box3.style.color = ‘#0ff‘; ???????box4.style.color = ‘#00f‘; ???</script></html></script></body></html>js 的常用选择器
原文地址：https://www.cnblogs.com/wanguofeng/p/10531767.html