简述列举文档对象模型DOM里document的常用的查找访 ?
文档对象模型(DOM)提供了多种方法来查找和访问页面中的元素。以下是一些原生 JavaScript 中 document
对象常用的查找方法:
1. getElementById()
- 用途:根据元素的 ID 查找一个元素。
-
示例:
var element = document.getElementById("myElement");
2. getElementsByClassName()
- 用途:根据元素的类名查找元素集合。
-
示例:
var elements = document.getElementsByClassName("myClass");
3. getElementsByTagName()
- 用途:根据元素的标签名(例如,
div
、p
)查找元素集合。 -
示例:
var elements = document.getElementsByTagName("div");
4. querySelector()
- 用途:使用 CSS 选择器语法查找页面中的第一个匹配元素。
-
示例:
var element = document.querySelector(".myClass"); var firstDiv = document.querySelector("div");
5. querySelectorAll()
- 用途:使用 CSS 选择器语法查找页面中所有匹配的元素。
-
示例:
var elements = document.querySelectorAll(".myClass"); var allDivs = document.querySelectorAll("div");
6. getElementsByName()
- 用途:根据元素的
name
属性查找元素集合。这对于表单元素特别有用。 -
示例:
var elements = document.getElementsByName("name");
使用场景和注意事项
getElementById()
是非常快的,因为 ID 在文档中应该是唯一的。getElementsByClassName()
和getElementsByTagName()
返回的是一个类数组对象(HTMLCollection),你可以遍历这些元素,但它们不是真正的数组。querySelector()
和querySelectorAll()
提供了更大的灵活性,因为你可以使用任何有效的 CSS 选择器来查找元素。querySelectorAll()
返回的是一个 NodeList 对象。- 当使用
querySelectorAll()
时,得到的 NodeList 是静态的,意味着如果之后 DOM 结构发生变化,NodeList 不会自动更新。
这些方法是在 DOM 中查找和访问元素的基础,了解和掌握它们对于进行高效的 DOM 操作非常重要。