好资源导航 » 文章资讯 » 浅谈JS获取元素的N种方法及其动静态讨论

浅谈JS获取元素的N种方法及其动静态讨论

2023-09-25 20:14:05 87

实际前端开发工作中，我们经常会遇到要获取某些元素，以达到更新该元素的样式、内容等目的。而文档对象模型(DOM)是HTML和XML文档的编程接口，它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合，它会将web页面和脚本或程序语言连接起来。也因此，JavaScript可以通过DOMAPI获取元素节点，方法有如下几种：其中querySelector()和querySelectorAll()为ES5的元素选择方法

1、getElementById()：

接收一个参数：要取得的元素的ID(区分大小写，必须严格匹配)，返回一个Element对象（也可看作是动态NodeList集合，只是集合中只包含一个匹配的元素，但也会实时反映DOM节点的变化），若当前文档中拥有特定ID的元素不存在则返回nul。
语法：

element=document.getElementById(id);

示例：删除



helloworld
hellodolby
hellodot
hellobean

//(1)处打印值

helloworld
hellodolby
hellodot
hellobean

//(2)处打印值

示例：




getElementByIdexample



Sometexthere
blue
red

getElementById()方法不会搜索不在文档中的元素。当创建一个元素且分配ID后，必须要使用insertBefore()或其他类似的方法把元素插入到文档中之后才能使用getElementById()获取到:

varelement=document.createElement("div");
element.id='testqq';
varel=document.getElementById('testqq');//elwillbenull!

2、getElementsByClassName()：

接收一个参数，即包含一个或多个类名的字符串（类名通过空格分隔），返回一个HTMLCollection动态集合（也可以说返回一个NodeList类数组对象），集合中包含以当前元素为根节点，所有指定class名的子元素。
语法：

varelements=document.getElementsByClassName(names);
varelements=rootElement.getElementsByClassName(names);

getElementsByClassName可以在任意的元素上调用，不仅仅是document。调用这个方法的元素将作为本次查找的根元素。

示例：

获取所有class为'test'的元素:

document.getElementsByClassName('test');

获取所有class同时包括'red'和'test'的元素:

document.getElementsByClassName('redtest');

在id为'main'的元素的子节点中，获取所有class为'test'的元素:

document.getElementById('main').getElementsByClassName('test');

示例：删除

//html代码

helloworld
hellodolby
hellodot
hellobean

//js代码一

//(3)处打印值
[div.myDiv]//一个动态的HTMLCollection集合，长度为1，innerHTML为hellodolby
，hellobean，为什么没有其他两个p元素一会儿解释。

//(4)处打印值
[p.myP,p.myP]//一个动态的HTMLCollection集合，长度为2，innerHTML分别为"hellodolby"，"hellobean"。

以上用删除节点的方法验证了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循环搞定⬇️，每次删除对象集合中的最后一项就可以啦～

//js代码二

//(5)处打印值

//(6)处打印值 []//空的HTMLCollection集合，长度为0

3、getElementsByTagName()：

接收一个参数：要取得的元素的标签名（不区分大小写），返回一个HTMLCollection动态集合（也可以说返回一个NodeList类数组对象）,集合中包含以当前元素为根节点（不包括当前元素自身），所有指定标签名的子元素，子元素的顺序是在当前元素的子树中出现的顺序，如果没有搜索到元素则集合为空。
语法：

elements=element.getElementsByTagName(tagName)

示例：

//checkthealignmentonanumberofcellsinatable.
vartable=document.getElementById("forecast-table");
varcells=table.getElementsByTagName("td");
for(vari=0;i
示例：删除


helloworld
hellodolby
hellodot
hellobean

与getElementByClassName相同，返回动态集合，所以循环删除结果也相同

//(7)处打印值


//(8)处打印值
[]//空的HTMLCollection集合，长度为0

4、getElementsByName()：

接收一个参数：带有给定name属性值的元素，返回一个动态NodeList类数组对象，对象中包含以当前元素为根节点，所有指定name属性值的子元素。最常用的场景是取得单选按钮。

示例：

...

示例：删除



red
green
blue

getElementByName返回的是一个NodeList动态集合

//(9)处打印值

"red"
"green"
"blue"


//(10)处打印值
[]//空的NodeList集合，长度为0

5、querySelector()：

接收一个参数：一个包含一个或多个CSS选择器的字符串（多个选择器以逗号分隔），返回匹配指定CSS选择器的第一个元素节点（无法选中CSS伪元素），没有发现匹配的节点则返回null。

语法：

element=document.querySelector(selectors);

示例：一个强大的选择方式


//这个标签将被返回

示例：如果要匹配的ID或选择器不符合CSS语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。由于JavaScript中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为JavaScript字符串转义，另一次是为querySelector转义）：

示例：删除


helloworld
hellodolby
hellodot
hellobean

//(11)处打印值

hellodolby
hellodot
hellobean


//(12)处打印值
helloworld//如你所见，querySelector也是静态的快照

6、querySelectorAll()：

接收一个参数：一个包含一个或多个CSS选择器的字符串（多个选择器以逗号分隔），返回静态NodeList对象集合，该集合中包含匹配指定CSS选择器的所有节点，元素节点的变化无法实时反映在结果中；如果参数中包含CSS伪元素则返回一个空的对象集合。

语法：

elementList=document.querySelectorAll(selectors);

示例：

varmatches=document.querySelectorAll("div.note,div.alert");

示例：删除


helloworld
hellodolby
hellodot
hellobean

//(13)处打印值

//(13)处打印值
[p.myP,p.myP,p.myP,p.myP]//返回的是静态NodeList集合，元素节点的变化无法实时反映在结果中

7、elementFromPoint()：

接收两个参数：分别是相对于当前窗口左上角的横纵坐标，单位为CSS像素，不需要加单位；返回位于页面指定位置的元素，如果该元素不可返回（如滚动条）则返回它的父元素，如果坐标值无意义（如负值）则返回null。

语法

varelement=document.elementFromPoint(x,y);

示例：




elementFromPointexample





Sometexthere
blue
red

这一个获取元素的方法用得不多所以不多做介绍。

是不是觉得看了上面这些头好大啊，什么是动态什么是静态，有没有好记一点的方法呢？
有哒！

你可以简单地理解为，getElementBy系列返回的都是动态的HTMLCollection集合，动态集合中的DOM结构变化能实时地反映到所保存的对象中，而querySelector系列返回的都是静态的NodeList对象，是一个快照，对DOM的任何操作都不会对其产生影响。

那么Nodelist和HTMLCollection有什么异同呢？

相同点：

二者都是类数组对象
二者都具有length属性
二者都具有item()方法
二者都是动态的元素集合，每次访问都需要重新对文档进行查询。

你一定会好奇，诶？前面不是说querySelector系列返回的都是静态的NodeList对象咩？怎么又变成动态的呢？原因在此：

规范中对querySelectorAll有明确要求，规定其必须返回一个静态的NodeList对象。

在Chrome中情况如下：

document.querySelectorAll('a').toString();//return"[objectNodeList]"
document.getElementsByTagName('a').toString();//return"[objectHTMLCollection]"

不同点：

NodeList对象会包含文档中的所有节点，如Element、Text和Comment等；HTMLCollection对象只会包含文档中的Element节点。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

浅谈JS获取元素的N种方法及其动静态讨论

热门推荐

随机推荐