实际前端开发工作中,我们经常会遇到要获取某些元素,以达到更新该元素的样式、内容等目的。而文档对象模型 (DOM) 是HTML和XML文档的编程接口,它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合,它会将web页面和脚本或程序语言连接起来。也因此,JavaScript可以通过DOM API获取元素节点,方法有如下几种:其中querySelector()和querySelectorAll()为ES5的元素选择方法
1、getElementById():
接收一个参数:要取得的元素的ID(区分大小写,必须严格匹配),返回一个Element对象(也可看作是动态NodeList集合,只是集合中只包含一个匹配的元素,但也会实时反映DOM节点的变化),若当前文档中拥有特定ID的元素不存在则返回nul。 语法:
示例:删除
//(2)处打印值
示例:
ara1">Some text here
getElementById()方法不会搜索不在文档中的元素。当创建一个元素且分配ID后,必须要使用insertBefore()或其他类似的方法把元素插入到文档中之后才能使用 getElementById() 获取到:
2、getElementsByClassName():
接收一个参数,即包含一个或多个类名的字符串(类名通过空格分隔),返回一个HTMLCollection动态集合(也可以说返回一个NodeList类数组对象),集合中包含以当前元素为根节点,所有指定 class 名的子元素。 语法:
getElementsByClassName 可以在任意的元素上调用,不仅仅是document。 调用这个方法的元素将作为本次查找的根元素。
示例:
获取所有 class 为 'test' 的元素:
获取所有 class 同时包括 'red' 和 'test' 的元素:
在id 为'main'的元素的子节点中,获取所有class为'test'的元素:
示例:删除
,
,为什么没有其他两个p元素一会儿解释。
//(4)处打印值
[p.myP,p.myP] //一个动态的HTMLCollection集合,长度为2,innerHTML分别为"hello dolby","hello bean"。
以上用删除节点的方法验证了getElementsByClassName方法返回的是一个HTMLCollection动态集合。
⬆️以上代码中,首先div取得了页面中类名为"myDiv"的元素组成的动态集合,p取得了页面中类名为"myP"的元素组成的动态集合,接着用一个for循环来删除"myDiv"集合中第一项(即上例中唯一的div元素)中的"myP"集合中的每一项,结果只有第一项和第三项被删除了,这是为什么呢?
原因是动态集合中DOM结构的变化能够自动反映到所保存的对象中,最开始p.legth=4,当i=0时删除了页面中第一个p元素,此后p.length=3;i=1时删除了剩余的三个p中的项目索引为1的项,此后p.length=2;i=2时已不满足i
那么怎样才能遍历类数组对象HTMLCollection集合中的每一项并且删除所有项呢?
还是一个for循环搞定⬇️,每次删除对象集合中的最后一项就可以啦~
//(6)处打印值
[] //空的HTMLCollection集合,长度为0
3、getElementsByTagName():
接收一个参数:要取得的元素的标签名(不区分大小写),返回一个HTMLCollection动态集合(也可以说返回一个NodeList类数组对象),集合中包含以当前元素为根节点(不包括当前元素自身),所有指定标签名的子元素,子元素的顺序是在当前元素的子树中出现的顺序,如果没有搜索到元素则集合为空。 语法:
示例:
示例:删除
与getElementByClassName相同,返回动态集合,所以循环删除结果也相同