Dom获取标签对象方法

iGotten
94 阅读2分钟

document.querySelector() ：CSS选择器，仅仅返回文档中匹配指定的CSS选择器的第一元素。 document.querySelectorAll() ：CSS选择器，HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表。

document.getElementsByClassName() ：返回文档中所有指定类名的元素集合，作为 NodeList 对象。  document.getElementById() ：返回对拥有指定 id 的第一个对象的引用。  document.getElementsByName() ：返回带有指定名称的对象集合。  document.getElementsByTagName() ：返回带有指定标签名的对象集合。

document.querySelectorAll()和document.getElementsByClassName()区别：

querySelectorAll()getElementsByClassName()
返回类型静态NodeList动态HTMLCollection
兼容性IE8+, FF3.5+, Safari 3.1+, Chrome, Opera 10+IE9+, FF3+, Safari 3.1+, Chrome, Opera 9+
选择器语法CSS选择器类名（单个或多个，空格分隔）
返回元素集合可以包含多种元素类型，根据CSS选择器匹配仅限于具有指定类名的元素
动态更新返回的是静态集合，不会随着DOM的变化而更新返回的是动态集合，会随着DOM的变化而更新
迭代方式支持forEach()方法不支持forEach()方法，需使用传统for循环

静态NodeList是指那些一旦创建就不再随DOM树的变化而更新的节点集合，通常是由document.querySelectorAll方法返回。特点是它们包含了在创建时匹配的所有元素节点，即使后来这些元素被移除或添加到DOM树中，静态NodeList中的内容也不会改变。这使得静态NodeList在处理DOM时更加稳定，因为它们提供了一个固定的节点集，不需要担心DOM操作带来的意外变化。

动态NodeList会随着DOM树的变化而动态更新，例如document.getElementsByTagName、document.getElementsByClassName或document.getElementsByName方法返回的就是动态NodeList。特点是如果在获取这些节点集合后对DOM进行了修改，如添加、删除或修改节点，这些变化会立即反映在相应的动态NodeList中。因此，如果您在遍历动态NodeList时修改DOM，可能会遇到意外的行为，例如无限循环或跳过某些元素。

<!-- JS中动态NodeList和静态NodeList区别代码示例 -->
<body> 
<div id="myDiv"> 
    <p>First paragraph.</p> 
    <p>Second paragraph.</p> 
</div> 
<button onclick="addParagraph()">Add Paragraph</button> 
<button onclick="logNodeList()">Log NodeList</button> 
<script> 
    // 动态NodeList 
    const dynamicNodeList = document.querySelectorAll('p'); 
    // 静态NodeList 
    const staticNodeList = document.getElementsByTagName('p'); 
    function addParagraph() { 
        const newParagraph = document.createElement('p'); 
        newParagraph.textContent = 'New paragraph.'; 
        document.getElementById('myDiv').appendChild(newParagraph); } 
    function logNodeList() { 
        console.log('Dynamic NodeList:', dynamicNodeList); 
        console.log('Static NodeList:', staticNodeList); 
    } 
</script> 
</body>

getElementsByClassName()返回对象为什么不支持forEach方法： getElementsByClassName() 方法返回的是一个 HTMLCollection 对象，而不是一个数组。HTMLCollection 对象是一个包含了匹配指定类名的所有元素的集合，但它并没有继承 JavaScript 的数组原型链，因此不具备数组的方法。 如果想对 getElementsByClassName() 返回的元素集合使用 forEach 方法，你可以先将 HTMLCollection 对象转换为数组。

avatar
文章
阅读
粉丝