JavaScript 获取 HTML 元素的骚操作

最新推荐文章于 2025-03-19 00:11:28 发布

原创最新推荐文章于 2025-03-19 00:11:28 发布 · 267 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js

前端专栏收录该内容

52 篇文章

订阅专栏

本文介绍了JavaScript中多种获取HTML元素的方法，包括通过ID、名称、标签名等属性获取元素，以及使用querySelector和querySelectorAll等现代技术。

JavaScript 这些获取元素的sao操作你都知道嘛，赶快收藏吧！

1、 HTML DOM

文档对象模型 (Document Object Model)，是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是 HTML DOM 是关于如何虎丘、修改、添加、删除 HTML 元素的标准。我么用 JavaScript 对网页进行的所有操作都是通过DOM进行的。

2、Document 对象

每个载入浏览器的 HTML文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

Document 对象使 Window(窗口) 对象的一部分，所以可以通过 window.document 属性对其进行访问。

函数	说明
getElementById	通过元素的id值获取对应的元素，只能获取当前文档中的一个指定的元素
getElementByName	通过元素的name属性值获取对应的元素，返回一个包含当前文档中所有与之匹配的name属性值的元素的NodeList。如果没有与之匹配的则返回一个空的NodeList
getElementByTagName	通过元素的标签名称获取与之对应的元素，返回一个包含当前文档中所有与TagName相匹配的元素的元素对象集合——HTMLCollection（伪数组）。如果没有与之匹配的则返回一个空的HTMLCollection（伪数组）
getElementByClassName（H5新增）	通过元素的Class属性值获取与之匹配的元素，返回一个包含当前文档中所有与Class相匹配的元素的HTMLCollection(伪数组)。如果没有与之匹配的则返回一个空的HTMLCollection
querySelector（H5新增）	通过选择器获取（包含所有选择器），只会找到和选择器匹配的第一个元素，而之后的元素不进行获取
querySelectorAll（H5新增）	通过选择器获取与之匹配的所有元素，并返回一个元素列表nodeList
body（特殊元素）	获取body元素
documentElement（特殊元素）	获取HTML元素

3、获取的方法

通过Id属性获取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js获取HTML元素的方式</title>
</head>

<body>
    <h4 id="h">我是H4</h4>
    <script>
        window.onload = function() {
            console.log(document.getElementById("h"))
        }
    </script>
</body>

</html>

通过Name属性获取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js获取HTML元素的方式</title>
</head>

<body>
    <input type="text" name="text">
    <script>
        window.onload = function() {
            console.log(document.getElementsByName("text"))
        }
    </script>
</body>

</html>

通过TagName属性获取

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js获取HTML元素的方式</title>
</head>


<body> 

     <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        window.onload = function() {
            console.log(document.getElementsByTagName("li"))
        }
    </script>

</body>

</html>

注意：

因为获取元素的最终结果是一个HTMLCollection(伪数组)，因此在使用元素的时候需要遍历，并且通过TagName获取到的元素对象是动态的，当页面里面增加了新的标签，伪数组中的元素也会随之增加。

通过ClassName获取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js获取HTML元素的方式</title>
</head>

<body>
    <p class="p1">我是p标签</p>
    <script>
        window.onload = function() {
            console.log(document.getElementsByClassName("p1"))
        }
    </script>
</body>

</html>

通过querySelector获取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>
</head>

<body>
    <ul>
        <li id="one" class="hellow"></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        window.onload = function() {
            // 获取到ul中第一个li元素
            var oneLi = document.querySelector("#one");
            var oneLi = document.querySelector(".hellow");
            console.log(oneLi)
        }
    </script>
</body>

</html>

通过querySelectorAll获取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        window.onload = function() {
            // 通过子代选择器获取与之匹配的所有元素，并返回一个nodeList
            var liList = document.querySelectorAll("ul>li");
            console.log(liList)
        }
    </script>
</body>

</html>

获取body元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>
</head>

<body>
    <script>
        window.onload = function() {
            // body属性获取body元素
            var body = document.body;
            console.log(body);
        }
    </script>
</body>

</html>

获取HTML元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>
</head>

<body>
    <script>
        window.onload = function() {
            // 通过documentElement属性获取HTML元素
            var html = document.documentElement;
            console.log(html)
        }
    </script>
</body>

</html>