JavaScript學習（七）—元素節點的獲取方式-有解無憂

JavaScript學習（七）—元素節點的獲取方式

1、利用標簽名獲取

var 變數名稱= document.getElementsByTagName("標簽名稱");

回傳值：為由獲取到的HTML標簽形成的節點的集合

<body>
    <div>我是第1個div</div>
    <div>我是第2個div</div>
    <div>我是第3個div</div>
    <div>我是第4個div</div>
    <div>我是第5個div</div>
    <script>
        var divs = document.getElementsByTagName('div');
        console.log(divs);
    </script>
</body>

在這里插入圖片描述

如果要獲取其中某個元素節點可以使用下標，即節點集合[下標]

<body>
    <div>我是第1個div</div>
    <div>我是第2個div</div>
    <div>我是第3個div</div>
    <div>我是第4個div</div>
    <div>我是第5個div</div>
    <script>
        var divs = document.getElementsByTagName('DIV');
        console.log(divs[0]);
    </script>
</body>

在這里插入圖片描述
2、利用id獲取

var 變數名稱= document.getElementsById("id值");

注意：如果頁面中有多個元素且id值相同，那么只能回傳一個

<body>
    <div>我是第1個div</div>
    <div id="box">我是第2個div</div>
    <div id="box">我是第3個div</div>
    <div>我是第4個div</div>
    <div>我是第5個div</div>
    <script>
        // var divs = document.getElementsByTagName('DIV');
        // console.log(divs[0]);

        var div3 = document.getElementById('box');
        console.log(div3);
    </script>
</body>

在這里插入圖片描述
3、利用類名獲取

var 變數名稱= document.getElementsByClassName("類名")；

回傳值：回傳值為具有相同類名的元素形成的節點的集合

<body>
    <div>我是第1個div</div>
    <div id="box">我是第2個div</div>
    <div id="box">我是第3個div</div>
    <div class="sty">我是第4個div</div>
    <div class="sty">我是第5個div</div>
    <script>
        // var divs = document.getElementsByTagName('DIV');
        // console.log(divs[0]);

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


        var divs = document.getElementsByClassName('sty');
        console.log(divs);
    </script>
</body>

在這里插入圖片描述

也可以使用下標獲取該元素的指定節點，

<script>
        // var divs = document.getElementsByTagName('DIV');
        // console.log(divs[0]);

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


        var divs = document.getElementsByClassName('sty');
        console.log(divs[1]);

在這里插入圖片描述

4、利用name屬性的值獲取表單元素

var 變數名稱= document.getElementsByName("name屬性的值");

回傳值：回傳值為具有相同name屬性值的表單元素

    <input type="checkbox" name="hobby" value="swimming">游泳
    <input type="checkbox" name="hobby" value="singing">唱歌
    <input type="checkbox" name="hobby" value="climbing">爬山
    <input type="checkbox" name="hobby" value="dancing">跳舞

    <script>
        var inputs = document.getElementsByName('hobby');
        console.log(inputs);
    </script>

在這里插入圖片描述
5、利用CSS選擇器獲取頁面元素

1）document.querySelector(CSS選擇器)
作用：獲取符合選擇器的一個元素

     <div>我是第1個div</div>
    <div id="box">我是第2個div</div>
    <div id="box">我是第3個div</div>
    <div class="sty">我是第4個div</div>
    <div class="sty">我是第5個div</div>
<script>
  var divs = document.querySelector('div');
        console.log(divs);
        </script>

在這里插入圖片描述
2)document.querySelectorAll(CSS選擇器)
作用：獲取符合選擇器的所有元素

    <div>我是第1個div</div>
    <div id="box">我是第2個div</div>
    <div id="box">我是第3個div</div>
    <div class="sty">我是第4個div</div>
    <div class="sty">我是第5個div</div>


<script>
  var divs = document.querySelectorAll('div');
        console.log(divs);

</script>

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272260.html

標籤：其他

上一篇：前端CSS—選擇器知識點復習整理

下一篇：AD19焊盤畫法