JavaScript中的DOM操作之获取页面中标签的方式

最新推荐文章于 2024-10-11 09:37:52 发布

原创最新推荐文章于 2024-10-11 09:37:52 发布 · 508 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了JavaScript中获取页面标签对象的五种方式：通过id、class、标签名、name属性值以及通用选择器。详细讲解了每种方式的特点，如通过id获取唯一对象，通过class获取伪数组等，并提到了兼容性问题。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），简写为DOM

获取页面中标签的方式
①通过id属性值获取标签对象
document.getElementById('id属性值')执行结果只能获取一个标签对象，id属性值一定要有引号

<body>
<div id="div1">我是div1</div>
<script>
var oDiv1 = document.getElementById('div1');
alert(oDiv1);
</script>
</body>

在这里插入图片描述
②通过class属性值获取标签对象
document.getElementsByClassName('class属性值')Elements之后有一个s表示复数。class属性在JavaScript,一律定义为className， class关键词用在其他功能上。执行结果获取到的是一个伪数组，即使只有一个符合条件的标签，获取到也是一个数组。数组的单元是符合条件的标签，可以通过索引下标来获取某一个标签对象。不能被 forEach() 循环遍历

<body>
<div id="div2">我是div2</div>
<script>
var oDiv2 = document.getElementsByClassName('div2');
console.log(oDiv2); //HTMLCollection(0)
console.log(oDiv2[0]); //undefined

// 不能被forEach()循环
oDiv2.forEach(function(v){
console.log(v);
})
</script>
</body>

③通过标签名称获取标签对象
document.getElementsByTagName('标签名称')获取到是一个伪数组，数组的单元是符合条件的标签，不能被forEach()循环遍历

<body>
<div id="div3">我是div3</div>
<script>
var oDiv3 = document.getElementsByTagName('div');
console.log(oDiv3); //HTMLCollection(1)
oDiv3.forEach(function(v){
console.log(v);
})
</script>
</body>

④通过标签name属性的属性值获取标签对象
document.getElementsByName('标签name属性的属性值')获取到的结果是一个伪数组，数组内容是符合条件的标签，可以被forEach()循环遍历

<body>
<span name="s">我是span1</span>
<span name="s">我是span2</span>
<span name="s">我是span3</span>
<span name="s">我是span4</span>
<script>
var oSpan = document.getElementsByName('s');
console.log(oSpan);
oSpan.forEach(function(v){
console.log(v);
})
</script>

在这里插入图片描述
⑤通过只要是符合语法规范的方式就能获取到标签对象（推荐）
document.querySelector()获取符合条件的第一个标签
document.querySelectorAll()获取符合条件的所有标签
所有标签是一个数组，可以被forEach() 循环遍历，低版本ie不兼容这两种方式

<body>
    <div id="div1">我是div1</div>
    <div class="div2">我是div2</div>
    <span name="s">我是span1</span>
    <span name="s">我是span2</span>
    <span name="s">我是span3</span>
    <span name="s">我是span4</span>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        // 通过标签的id属性值来获取,要记得写 # 号
        var oQuery1 = document.querySelector('#div1');
        console.log(oQuery1);

        // 通过标签的class属性值来获取,要记得写 . 号
        var oQuery2 = document.querySelector('.div2');
        console.log(oQuery2);

        // 通过标签的标签名称来获取
        // 只获取第一个div标签
        var oQuery3 = document.querySelector('div');
        console.log(oQuery3);
        // 获取所有div标签
        var oQuery4 = document.querySelectorAll('div');
        console.log(oQuery4);

        // 通过属性和属性值获取，语法:('[属性="属性值"]') 
        // 获取name属性值是s的标签
        var oQuery5 = document.querySelectorAll('[name="s"]');
        console.log(oQuery5);

        // 获取type属性值是text的标签
        var oQuery6 = document.querySelectorAll('[type="text"]');
        console.log(oQuery6);

        // 还可以通过标签结构获取 ul标签中子级li标签，只要是css语法支持的选择器语法都行，父子后代兄弟....都支持
        var oQuery7 = document.querySelectorAll('ul>li');
        console.log(oQuery7);
        </script>
        </body>