js元素的几种获取方式

时间:2020-05-01

① Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。

var element = document.getElementById(id);

② 返回一个包含了所有指定类名的子元素的类数组对象。当在document对象上调用时,会搜索整个DOM文档,包含根节点。你也可以在任意元素上调用getElementsByClassName() 方法,它将返回的是以当前元素为根节点,所有指定类名的子元素。

var elements = document.getElementsByClassName(names);

var elements = rootElement.getElementsByClassName(names);

③ Element.getElementsByTagName() 方法返回一个动态的包含所有指定标签名的元素的HTML集合HTMLCollection。指定的元素的子树会被搜索,不包括元素自己。返回的列表是动态的,这意味着它会随着DOM树的变化自动更新自身。所以,使用相同元素和相同参数时,没有必要多次的调用Element.getElementsByTagName() .

如果是HTML文档中的某个元素调用了getElementsByTagName函数, 运行前会将参数转为小写字母形式。故不建议在驼峰式命名的SVG元素中使用。 Element.getElementsByTagNameNS() 适用于那种情况.

Element.getElementsByTagName 和 Document.getElementsByTagName()类似,除了它的搜索被限制为指定元素的后代。

elements = element.getElementsByTagName(tagName);

④ 根据给定的name 返回一个在 (X)HTML document的节点列表集合。

elements = document.getElementsByName(name);

⑤ 返回与指定的选择器组匹配的元素的后代的第一个元素。

element = baseElement.querySelector(selectors);

⑥ 返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

elementList = parentNode.querySelectorAll(selectors);

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p class="test" id="test">
    hello
</p>
<hr>
<input type="text" class="test" name="username"/>

<script>
    // 通过id属性获取
    console.log(document.getElementById("test"));
    // 通过class属性获取
    console.log(document.getElementsByClassName("test"));
    // 通过标签名获取
    console.log(document.getElementsByTagName("p"));
    // 通过name属性获取
    console.log(document.getElementsByName("username"));
    // 通过css选择器获取第一个元素
    console.log(document.querySelector("#test"));
    // 通过css选择器获取所有元素
    console.log(document.querySelectorAll(".test"));
</script>
</body>
</html>

输出结果