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