获取DOM对象

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>

获取元素的其他方法

1. id获取元素

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

   返回值：一个元素对象

2. 标签名获取元素

   语法：getElementsByTagName('标签名')

   返回值：标签名匹配的NodeList 对象集合 是个伪数组

3. 类名获取元素

   语法：document.getElementsByClassName('类名')

   返回值：与类名匹配的NodeList 对象集合 是个伪数组

4. 获得body

   document.body

5. 获得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>

目前常用：

document.querySelector('css选择器')

document.querySelectorAll('css选择器')