js获取标签的三种方式

<!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"></li>

            <li></li>

            <li></li>

            <li></li>

            <li></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

1.2

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

1.3、console.dir(box)

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

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

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

            var box2 = document.getElementsByTagName('div');

            // console.log(box2);

            var lis = document.getElementsByTagName('li'); //lis数组

            for(var i = ; i < lis.length; i++){

                // lis[i].className = 'active';

                lis[i].onclick = function(){

                    // this指向了绑定onclick的那个对象

                    // 排他思想

                    for(var j = ; j < lis.length; j++){

                        lis[j].className = '';

                    };

                    this.className = 'active';

                }

            }

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

console.log(lis);

实现点击哪个li，哪个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';

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、

            var box2 = document.getElementsByTagName('div');

            // console.log(box2);

            var lis = document.getElementsByTagName('li');

            console.log(lis);

            for(var i = ; i < lis.length; i++){

                // lis[i].className = 'active';

                lis[i].onclick = function(){

                    // this指向了绑定onclick的那个对象

                    // 排他思想

                    for(var j = ; j < lis.length; j++){

                        lis[j].className = '';

                    };

                    this.className = 'active';

                    console.log(this);

                    console.log(typeof lis[i]);

                    console.log(lis[i]);

                }

            }

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

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

3、通过类名获取

3.1、

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

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

            var box = document.getElementById('box2');

            cd=box.children

            console.log(cd);

            for(var i = ; i < cd.length; i++){

                console.log(i,cd[i])

            }

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