獲取元素

阿新 • • 發佈：2020-09-18

為什麼要獲取頁面元素？

例如：我們想要操作頁面上的某部分(顯示/隱藏，動畫)，需要先獲取到該部分對應的元素，再對其進行操作。

1. 根據ID獲取

語法：document.getElementById(id)
作用：根據ID獲取元素物件
引數：id值，區分大小寫的字串
返回值：元素物件 或 null

案例程式碼

<body>
  <div id="time">2019-9-9</div>
  <script>
    // 因為我們文件頁面從上往下載入，所以先得有標籤 所以我們script寫到標籤的下面
    var timer = document.getElementById('time');
 
    console.log(timer);
    console.log(typeof timer);
    // console.dir 列印我們返回的元素物件 更好的檢視裡面的屬性和方法
    console.dir(timer);
  </script>
</body>

2. 根據標籤名獲取元素

語法：document.getElementsByTagName('標籤名') 或者 element.getElementsByTagName('標籤名') 
作用：根據標籤名獲取元素物件
引數：標籤名 字串格式
返回值：元素物件集合（偽陣列，陣列元素是元素物件）

案例程式碼

<body>
 
  <ul>
    <li>知否知否，應是等你好久11</li>
    <li>知否知否，應是等你好久22</li>
    <li>知否知否，應是等你好久33</li>
    <li>知否知否，應是等你好久44</li>
    <li>知否知否，應是等你好久55</li>
  </ul>
  <ul id="nav">
    <li>生僻字</li>
    <li>生僻字</li>
    <li>生僻字</li>
 
    <li>生僻字</li>
    <li>生僻字</li>
  </ul>
  <script>
    // 1.返回的是 獲取過來元素物件的集合 以偽陣列的形式儲存的
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0]);
    // 2. 我們想要依次列印裡面的元素物件我們可以採取遍歷的方式
    for (var i = 0; i < lis.length; i++) {
      console.log(lis[i]);
     }
    // 3. element.getElementsByTagName()  可以得到這個元素裡面的某些標籤
    var nav = document.getElementById('nav'); // 先通過id 獲得nav 元素
    var navLis = nav.getElementsByTagName('li');
    console.log(navLis);
  </script>
</body>

注意：getElementsByTagName()獲取到是動態集合，即：當頁面增加了標籤，這個集合中也就增加了元素。

3. H5新增獲取元素方式

案例程式碼

<body>
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div id="nav">
    <ul>
      <li>首頁</li>
      <li>產品</li>
    </ul>
  </div>
  <script>
    // 1. getElementsByClassName 根據類名獲得某些元素集合
    var boxs = document.getElementsByClassName('box');
    console.log(boxs);
    // 2. querySelector 返回指定選擇器的第一個元素物件  切記 裡面的選擇器需要加符號 .box  #nav
    var firstBox = document.querySelector('.box');
    console.log(firstBox);
    var nav = document.querySelector('#nav');
    console.log(nav);
    var li = document.querySelector('li');
    console.log(li);
    // 3. querySelectorAll()返回指定選擇器的所有元素物件集合
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);
    var lis = document.querySelectorAll('li');
    console.log(lis);
  </script>
</body>