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">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

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 = 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';
                }
            }

通过获取元素通过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 = 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';
                    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 = 0; i < cd.length; i++){
                console.log(i,cd[i])
            }

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