獲取DOM物件

阿新 • • 發佈：2022-05-14

DOM物件

概念：

瀏覽器根據html標籤生成的 JS物件

所有的標籤屬性都可以在這個物件上面找到
修改這個物件的屬性會自動對映到標籤身上

DOM的核心思想

把網頁內容當做物件來處理

獲取DOM物件

根據CSS選擇器來獲取DOM元素

獲取單個元素

語法: document.querySelector('css選擇器')

引數:

包含一個或多個有效的CSS選擇器字串

返回值：

CSS選擇器匹配的第一個元素,一個 HTMLElement物件。

如果沒有匹配到，則返回null。

  <div id="c1">123</div>
  <div class="box">abc</div>
  <p>段落</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script>
    const div1 = document.querySelector('#c1')
    console.log(div1)
    const div2 = document.querySelector('.box')
    console.log(div2)
    const p = document.querySelector('p')
    console.log(p)
    const li = document.querySelector('ul li:nth-child(2)')
    console.log(li)
    const div3 = document.querySelector('div:nth-child(5)')
    console.log(div3)
  </script>

獲取多個元素

語法：document.querySelectorAll('css選擇器')

引數:

包含一個或多個有效的CSS選擇器字串

返回值：

CSS選擇器匹配的NodeList 物件集合是個偽陣列

偽陣列有下標.legth屬性但不可以使用陣列方法：增加/刪除/修改

  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <div>hellow</div>
  <script>
    const divs = document.querySelectorAll('div')
    console.log(divs)
    for (let i = 0; i < divs.length; i++) {
      console.log(divs[i].innerText)
    }

    const lis = document.querySelectorAll('ul li')
    console.log(lis)
  </script>

注意

1.哪怕頁面只有一個元素，返回的也是偽陣列

2.靈活性

  <h2>標題</h2>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>5</p>
  </div>
  <p>p標籤</p>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>

  <script>
    // 注意
    // 1.哪怕頁面只有一個元素，返回的也是偽陣列
    const h2s = document.querySelectorAll('h2')

    // 2.靈活性
    // 獲取頁面中所有p標籤
    const ps1 = document.querySelectorAll('p')
    console.log(ps1)

    // 獲取.box中的p標籤
    // 法一
    // const ps2 = document.querySelectorAll('.box p')
    // 法二
    const div = document.querySelector('.box')
    const ps2 = div.querySelectorAll('p')
    for (let i = 0; i < ps2.length; i++) {
      console.log(ps2[i].innerText)
    }
  </script>

獲取元素的其他方法

id獲取元素

語法：document.getElementById('id值')

返回值：一個元素物件
標籤名獲取元素

語法：getElementsByTagName('標籤名')

返回值：標籤名匹配的NodeList 物件集合是個偽陣列
類名獲取元素

語法：document.getElementsByClassName('類名')

返回值：與類名匹配的NodeList 物件集合是個偽陣列
獲得body

document.body
獲得html

document.documentElement

  <div class="box">123</div>
  <div id="father">345</div>
  <p>標籤</p>
  <script>
    // id獲取元素
    const div = document.getElementById('father')
    console.log(div)
    // 標籤名獲取元素
    const divs = document.getElementsByTagName('div')
    console.log(divs)
    // 類名獲取元素
    const divs2 = document.getElementsByClassName('box')
    console.log(divs2)

    // body
    console.log(document.body)
    // html
    console.log(document.documentElement)
  </script>