js获取标签的三种方式

我不是女神ヾ 2022-10-02 15:57 635阅读 0赞

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                ul li{
                    color: black;
                }
                ul li.active{
                    color: red;
                }
            </style>
        </head>
        <body>
            <div id="box">MJJ</div>
            <ul id="box2">
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <script type="text/javascript">
                // 1.通过id获取单个节点对象
                var box = document.getElementById('box');
                console.log(box);
                console.dir(box);
                // // 2.通过标签名来获取节点对象
                // var box2 = document.getElementsByTagName('div');
                // console.log(box2);
                // var lis = document.getElementsByTagName('li');
                // for(var i = 0; i < lis.length; i++){
                //     // lis[i].className = 'active';
                //     lis[i].onclick = function(){
                //         // this指向了绑定onclick的那个对象
                //         // 排他思想
                //         for(var j = 0; j < lis.length; j++){
                //             lis[j].className = '';
                //         };
                //         this.className = 'active';
                //     }
                // }
                // // 3.通过类名获取
                // var lis2 = document.getElementsByClassName('active');
                // // console.log(lis2);
                // // var box = document.getElementById('box2');
                // // console.log(box.children);
            </script>
        </body>
    </html>

##  1、通过id获取 ##

1.1

![1286512-20190604191821524-321682393.png][]

1.2

var box = document.getElementById('box');  
console.log(box);

![1286512-20190604191230107-621121621.png][]

1.3、console.dir(box)

![1286512-20190604191254058-2049704792.png][]

![1286512-20190604191314039-857289334.png][]

![1286512-20190604191326626-2062386553.png][]

![1286512-20190604191340662-2143205583.png][]

![1286512-20190604191408743-202161058.png][]

![1286512-20190604191443161-469865697.png][]

## 2、通过标签名来获取节点对象 ##

2.1
    // // 2.通过标签名来获取节点对象
    var box2 = document.getElementsByTagName('div');
    console.log(box2);

![1286512-20190604191701298-2077211849.png][]

2.2、实现点击哪个li，哪个li变成红色，其它不红。

通过获取元素通过tag名字获得是这个标签的数组。

console.log(lis);

![1286512-20190604192429936-113175391.png][]

实现点击哪个li，哪个li变成红色，其它不红。

![1286512-20190604192149373-1270906999.png][]

for(var i = 0; i < lis.length; i++){
                    // lis[i].className = 'active';
                    lis[i].onclick = function(){
                        // this指向了绑定onclick的那个对象
                        // 排他思想
                        for(var j = 0; j < lis.length; j++){
                            lis[j].className = '';
                        };
                        this.className = 'active';

1）获取所有指定标签元素，是个数组（好像是伪数组把？？）   \#document.getElementsByTagName('li')

2）循环数组元素。点击某个标签之后先将所有的标签class设置为空字符串。  \# lis\[j\].className = ''

3）再给点击到的标签添加类名   \#this.className = 'active';

4）类名是有设置了css样式的。红色color值

5）点击之后的操作是onclick事件。给循环的每个数组元素绑定事件。 \#  lis\[i\].onclick = function()\{\}；

6）给每个数组元素.onclick绑定事件，需要for循环遍历数组。事件是执行=的匿名函数function()\{\},将所有的这个li标签去掉类名，再加个有红色属性的类名，这样实现点击谁只有谁有这个类，只有这个标签变红。将所有li标签去掉类名就是在函数中再for循环数组对每个元素类名设置为空字符串

7）如果没有第2步，那么选中之后的标签不会变回黑色，标签不会只是单个变红

2.3、

点击li 2 2变红，点击3 3变红 。打印this是每个li标签对象，是单个数组元素。 打印数组每个元素lis\[i\]类型是未定义，元素是未定义。

![1286512-20190604194536845-1760955721.png][]

点击时可查看到对应的class在变化：

![1286512-20190604200433061-1886323557.png][]

## 3、通过类名获取 ##

3.1、

var lis2 = document.getElementsByClassName('active');
    console.log(lis2);

![1286512-20190604200631889-252447650.png][]

## 4、获取所有子孩子对象     父对象.children ##

var box = document.getElementById('box2');
                cd=box.children
                console.log(cd);
                for(var i = 0; i < cd.length; i++){
                    console.log(i,cd[i])
                }

![1286512-20190604201741678-1829950499.png][]

#注意  console.log(i,cd[i])可以打印多个元素

转载于:https://www.cnblogs.com/machangwei-8/p/10975912.html

[1286512-20190604191821524-321682393.png]: /images/20220109/31aade9bddb04b6ca11b3bf2c6aaf54f.png
[1286512-20190604191230107-621121621.png]: /images/20220109/0d0c2d7fa2da4b399f7a85932dd1a6d9.png
[1286512-20190604191254058-2049704792.png]: /images/20220109/0be33f9517574c93ab8f79102b0ee1f5.png
[1286512-20190604191314039-857289334.png]: /images/20220109/91427b6267db4d209f3702e74f179d37.png
[1286512-20190604191326626-2062386553.png]: /images/20220109/e013999ad3274fdeb6ad1ee8a96378cc.png
[1286512-20190604191340662-2143205583.png]: /images/20220109/b99cf28e69464b29ac5753f930b549f5.png
[1286512-20190604191408743-202161058.png]: /images/20220109/30f428011c534520ad47abb9234e6374.png
[1286512-20190604191443161-469865697.png]: /images/20220109/c047285362584c4a95ca8f41ec13da39.png
[1286512-20190604191701298-2077211849.png]: /images/20220109/c1a185b05aeb407e8bd055d374177f63.png
[1286512-20190604192429936-113175391.png]: /images/20220109/c7fd5ff803f2430ea0ad3dc0dc324e73.png
[1286512-20190604192149373-1270906999.png]: /images/20220109/ce98451c443e49b7957891ef07084a35.png
[1286512-20190604194536845-1760955721.png]: /images/20220109/6ef36788a6c54a638660a67b1252b11f.png
[1286512-20190604200433061-1886323557.png]: /images/20220109/abb9bf3b18ce4d2fb95c292e594db680.png
[1286512-20190604200631889-252447650.png]: /images/20220109/ca1f612c8d664ec8a0805644d6b97adc.png
[1286512-20190604201741678-1829950499.png]: /images/20220109/5c433bf3035f4e1992c532079d3b7168.png