详解JavaScript DOM元素获取与ES6选择器差异

本文档详细介绍了JavaScript中DOM（Document Object Model）元素的获取和添加方法。在前端开发中，理解并熟练运用这些方法对于构建动态网页至关重要。 1. DOM元素获取： - `document.getElementById(id)`：这是最基本的元素查找方式，它返回具有指定id属性的第一个元素。例如，在HTML中，如果你有一个`<div id="myDiv">...</div>`，你可以通过`var div = document.getElementById('myDiv')`来获取这个元素。 - `document.getElementsByClassName(className)`：这个方法根据类名返回所有匹配的元素，返回的结果是一个类似数组的对象，每个元素都是HTML元素的NodeList。如`var elements = document.getElementsByClassName('test')`，会获取所有class为'test'的元素。 - `document.getElementsByTagName(tagName)`：与getElementsByClassName类似，但返回的是指定标签名的所有元素，例如`var listItems = document.getElementsByTagName('li')`获取所有的`<li>`元素。 - `document.querySelector(selector)`：这是一个更强大的选择器，可以接受CSS选择器作为参数，返回符合该选择器的第一个元素。比如`var firstItem = document.querySelector('li.test')`将选取第一个class为'test'的`<li>`元素。 - `document.querySelectorAll(selector)`：此方法返回所有匹配CSS选择器的元素集合，同样是一个NodeList，如`var allItems = document.querySelectorAll('li.test')`将获取所有class为'test'的`<li>`元素。 2. 区别与动态性： - `getElementsByTagName()` 和 `getElementsByClassName()` 返回的是动态列表，因为它们是实时更新的，当DOM结构发生变化时，它们会自动反映这些变化。如果页面上新增加了带有相同类名或ID的元素，这两个方法会自动包含新元素。 - `querySelectorAll()` 获取的是静态列表，即它返回的结果在文档加载时就确定了。如果DOM结构发生变化，需要再次调用该方法以获取最新的匹配结果，否则可能获取不到预期的元素。 3. 示例代码： 文档中提供的HTML和JavaScript代码展示了如何使用这些方法。首先获取原始的`<li>`元素，然后动态添加一个新的`<li>`，并观察元素数量的变化。可以看到，`getElementsByTagName()`和`querySelector()`返回的数量在添加后有所改变，而`querySelectorAll()`的数量保持不变，因为它是静态的。 总结来说，了解这些DOM操作方法对于处理页面的动态内容和响应用户交互至关重要。熟练掌握它们可以帮助开发者更好地控制网页元素，实现复杂的功能，并确保在不同场景下的性能优化。