本帖最后由 庶民 于 2023-6-13 13:29 编辑
- document.getElementById()
- 通过元素的id属性获取DOM元素，返回一个 DOM元素对象，表示指定id属性的元素。
- document.getElementsByClassName()
- 通过元素的class属性获取DOM元素，返回一个 HTMLCollection对象，包含了所有具有指定class属性的元素。
- document.querySelector()
- 通过CSS选择器获取DOM元素，返回一个 DOM元素对象，表示第一个匹配指定CSS选择器的元素。。
- document.querySelectorAll()
- 通过CSS选择器获取所有匹配的DOM元素，返回一个 NodeList对象，包含了所有匹配指定CSS选择器的元素。。
- document.getElementsByName()
- 通过元素的name属性获取DOM元素，返回的是一个 NodeList对象，包含了所有具有指定name属性的元素。
- document.getElementsByTagName("div")
- 通过元素的标签名获取DOM元素，返回的是一个 HTMLCollection对象，包含了所有具有指定标签名的元素。
- document.getElementsByTagNameNS("namespaceURI", "div")
- 通过 命名空间 和 元素的标签名 获取DOM元素。返回的是一个 HTMLCollection对象，包含了所有具有指定命名空间和标签名的元素。
getElementsByTagNameNS 用法
<!DOCTYPE html>
<html>
<head>
<title>getElementsByTagNameNS() 示例（仅做了解，平常很少用到）</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<rect x="10" y="10" width="80" height="80" fill="red" />
</svg>
<script>
// 需要注意：返回的 HTMLCollection 对象是实时的，即当 DOM 结构发生变化时，它会自动更新。
var elements = document.getElementsByTagNameNS("http://www.w3.org/2000/svg", "rect");
console.log(elements[0]); // 输出 <rect x="10" y="10" width="80" height="80" fill="red" />
</script>
</body>
</html>
| 