js获取dom元素的方式

lcsc

已于 2023-03-30 09:11:30 修改

阅读量1.5k

点赞数 1

文章标签： javascript

于 2023-03-29 11:03:22 首次发布

本文链接：https://blog.csdn.net/m0_70185330/article/details/129832663

版权

1、querySelector() 获取匹配的第一个元素

1.1直接获取标签 ----- 有两个div，只获取第一个div。

  <div class="myclass">11</div>
  <div class="mclass">2222</div>
  <script>
    // 如果有相同的只会选择第一个
    const elements = document.querySelector('div')
    console.log(elements);
  </script>

1.2直接获取class类名 ----- 两个类名一样（myclass），只获取第一个myclass，使用querySelector获取类名元素，要把 ‘.’写上。

  <div class="myclass">11</div>
  <div class="myclass">2222</div>
  <script>
    // 如果有相同的只会选择第一个
    const elements = document.querySelector('.myclass')
    console.log(elements);
  </script>

1.3直接获取id ----- 使用querySelector获取类名元素，要把 ‘#’写上。

  <div id="myid">2222</div>
  <script>
    // 如果有相同的只会选择第一个
    const elements = document.querySelector('#myid')
    console.log(elements);
  </script>

1.4可以获取父标签里的子标签，例如：ul li，使用querySelector默认选中ul 里面的第一个li。

  <ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
  </ul>
  <script>
    // 如果有相同的只会选择第一个
    const elements = document.querySelector('ul li')
    console.log(elements);
  </script>

1.5还可以获取父标签里的指定子标签，使用nth-child选择器。

  <ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
  </ul>
  <script>
    // 如果有相同，使用nth-child选择器可以选择获取指定的元素
    const elements = document.querySelector('ul li:nth-child(2)')
    console.log(elements);
  </script>

使用querySelector获取元素，返回值是：一个HTMLElement对象

*querySelector获取到的元素可以直接操作修改

<body>
  <div class="myclass">@@@1</div>
  <div class="myclass">@@@2</div>
  <div id="myid">###1</div>
  <script>
    const elements = document.querySelector('.myclass:first-child')
    // 可直接修改
    elements.style.color = 'red'
  </script>
</body>

2、querySelectorAll() 获取匹配的全部元素

2.1直接获取标签 ----- 有三个div，获取全部div元素。

<body>
  <div class="myclass">@@@</div>
  <div id="myid">###1</div>
  <script>
    // 获取全部div元素
    const elements = document.querySelectorAll('div')
    console.log(elements);
  </script>
</body>

2.2直接获取class类名 ----- 两个类名一样（myclass），获取全部myclass，使用querySelectorAll获取类名元素，要把 ‘.’写上。

<body>
  <div class="myclass">@@@</div>
  <div class="myclass">@@@</div>
  <div id="myid">###1</div>
  <script>
    // 获取全部div元素
    const elements = document.querySelectorAll('.myclass')
    console.log(elements);
  </script>
</body>

2.3直接获取id ----- 使用querySelectorAll获取类名元素，要把 ‘#’写上。

<body>
  <div class="myclass">@@@</div>
  <div class="myclass">@@@</div>
  <div id="myid">###1</div>
  <script>
    // 获取全部div元素
    const elements = document.querySelectorAll('#myid')
    console.log(elements);
  </script>
</body>

2.4可以获取父标签里的全部子标签，例如：ul li，使用querySelectorAll默认选中ul 里面的全部li。

<body>
  <ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
  </ul>
  <script>
    // 获取ul下的所有li
    const elements = document.querySelectorAll('ul li')
    console.log(elements);
  </script>
</body>

2.5还可以获取父标签里的指定子标签，使用nth-child选择器。

<body>
  <ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
  </ul>
  <script>
    // 使用nth-child获取ul下的指定li
    const elements = document.querySelectorAll('ul li:nth-child(2)')
    console.log(elements);
  </script>
</body>

使用querySelectorAll获取元素，返回值是：一个NodeList对象集合，这个只是个伪数组

*有长度有索引的数组，但是没有push、pop这些数组方法（伪数组）。

*返回的是一个伪数组，不可以直接修改，只能通过遍历的方式一次给里面的元素做修改。

<body>
  <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
  </ul>
  <script>
    const elements = document.querySelectorAll('ul li')
    for (var i = 0; i < elements.length; i++) {
      elements[i].style.color = 'red'
    }
  </script>
</body>

3、通过ID获取，getElementById

<body>
    <div id="myid">111</div>
    <script>
        const elements = document.getElementById("myid");
        console.log(elements);
    </script>
</body>

使用getElementById获取元素，返回值是：一个HTMLElement对象

*getElementById获取到的元素可以直接操作修改

4、通过类名class，getElementsByClassName

<body>
    <div class="myclass">111</div>
    <script>
        const elements = document.getElementsByClassName("myclass");
        console.log(elements);
    </script>
</body>

使用getElementsByClassName获取元素，返回值是：一个HTMLCollection对象集合，这个只是个伪数组

*有长度有索引的数组，但是没有push、pop这些数组方法（伪数组）。

*返回的是一个伪数组，不可以直接修改，只能通过遍历的方式一次给里面的元素做修改。

5、通过标签名，getElementsByTagName

<body>
    <div class="myclass">111</div>
    <div class="myclass">111</div>
    <script>
        const elements = document.getElementsByTagName('div');
        console.log(elements);
    </script>
</body>

使用getElementsByTagName获取元素，返回值是：一个HTMLCollection对象集合，这个只是个伪数组

*有长度有索引的数组，但是没有push、pop这些数组方法（伪数组）。

*返回的是一个伪数组，不可以直接修改，只能通过遍历的方式一次给里面的元素做修改。

6、获取html的方法（document.documentElement）

<body>
    <div class="myclass">111</div>
    <div class="myclass">111</div>
    <script>
        const elements = document.documentElement;
        console.log(elements);
    </script>
</body>

打印的结果：

7、获取body的方法（document.body）

<body>
    <div class="myclass">111</div>
    <div class="myclass">111</div>
    <script>
        const elements = document.body;
        console.log(elements);
    </script>
</body>

打印结果：

8、获取head的方法（document.head）

<body>
  <div>111</div>
  <script>
    const elements = document.head
    console.log(elements);
  </script>
</body>

打印结果：

9、获取带有name的标签，getElementsByName

<body>
    <input type="text" name="user" value="11">
    <script>
        const elements = document.getElementsByName("user");
        console.log(elements);
    </script>
</body>