js获取标签的三种方式

时间 2019-11-10

原文原文链接

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

一、经过id获取

1.1javascript

1.2css

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

1.三、console.dir(box)

二、经过标签名来获取节点对象

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

2.二、实现点击哪一个li，哪一个li变成红色，其它不红。java

            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')this

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

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

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

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

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

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



2.三、

            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.一、

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

四、获取全部子孩子对象父对象.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])能够打印多个元素

js获取标签的三种方式

一、经过id获取

二、经过标签名来获取节点对象

三、经过类名获取

四、获取全部子孩子对象 父对象.children

四、获取全部子孩子对象父对象.children