目录
1、window.id 方法
2、getElementById() 方法
3、getElementsByTagName() 方法
4、getElementsByClassName() 方法
5、querySelector() 和 querySelectorAll() 方法
6、其它几种元素选择器
1、window.id 方法
使用 window.id 或 id ,可以直接获取页面中为指定 id 的元素:
let node = window.box;
let node2 = box;
注意:这种方式不规范,在工作中最好使用下几种方式,自己写 demo 的使用可以使用这种方式,因为它很方便。
2、getElementById() 方法
使用 getElementById() 方法可以准确获取文档中 指定 id 元素:
var box = document.getElementById("box"); //获取指定盒子的引用
var info = "nodeName:" + box.nodeName; //获取该节点的名称
info += "、nodeType:" + box.nodeType; //获取该节点的类型
info += "、parentNode:" + box.parentNode.nodeName;//获取该节点的父节点名称
info += "、childNodes:" + box.childNodes[0].nodeName;//获取该节点的子节点名称
alert(info); //显示提示信息:nodeName:DIV、nodeType:1、parentNode:BODY、childNodes:#text
3、getElementsByTagName() 方法
使用 getElementsByTagName() 方法可以获取 指定标签名 的所有元素(集合)。使用 length 属性可以获取集合中包含元素的个数,利用下标可以访问其中某个元素对象。
var p = document.getElementsByTagName ("p"); //获取p元素的所有引用
for(var i=0;i
p[i].setAttribute("class","red"); //为每个p元素定义red类样式
}
4、getElementsByClassName() 方法
使用 getElementsByClassName() 可以获取指定类名的元素(集合),该方法接收一个字符串参数,包含一个或多个类名,类名通过空格分隔,不分先后顺序,方法返回带有指定类的所有元素的 NodeList。
(1)使用 document.getElementsByClassName("red")方法选择文档中所有包含 red 类的元素。