js获取标签的方法

●圆圈○

于 2020-12-22 20:16:38 发布

阅读量532

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/m0_46270930/article/details/111565354

版权

前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍了JavaScript中获取HTML元素的几种方法，包括通过ID、类名和标签名。使用getElementsByTagName()可以获取指定标签的所有元素，形成节点列表。querySelector则能返回匹配CSS选择器的第一个元素，而querySelectorAll则返回所有匹配的元素集合。此外，还提到了节点树上的相关操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过id获取文档元素

<p id="myId">这是我学习JavaScript的网址：</p>
var pElement = document.getElementById("myId");

通过类名获取文档元素

<p class="myName">段落</p>
var myNodeList = document.getElementsByClassName("myName");

通过标签的名字获取文档元素
getElementsByTagName()获取整个文档中指定名字的所有标签，显然，结果是一个文档元素数组（节点列表），

<div id="div1">
    <p id="p1">文本1</p>
    <p id="p2">文本2</p>
    <a name="a1">链接</a>
</div>
<div id="div2">
    <p id="p3" name="a1">文本3</p>
</div>
var allDiv = document.getElementsByTagName("div");
window.alert(allDiv[0]);

querySelector返回匹配指定css选择器的第一个元素。
querySelector和querySelectorAll。

<body>
    <p class="css1">
        CSS选择器
    </p>
</body>
var myElement =  document.querySelector(".css1");

节点树上的操作


```handlebars
<body>
<div id="div1">
    <div class="cl1">
        <p>文本</p>
        <a>超链接</a>
    </div>
    <div class="cl2">
        <select id="se">
            <option>红</option>
            <option>黄</option>
            <option>蓝</option>
        </select>
    </div>
</div>
</body>