js获取DOM节点的方式

最新推荐文章于 2022-09-28 18:30:49 发布

原创最新推荐文章于 2022-09-28 18:30:49 发布 · 335 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #dom #js #css

js获取DOM节点的方式

getElementById 是通过标签的 id 名称来获取标签的

getElementsByClassName 是通过标签的 class 名称来获取标签的

getElementsByTagName 是通过过标签的标签名称来获取标签的

querySelector 是按照选择器的方式来获取第一个元素

querySelectorAll 是按照选择器的方式来获取所有元素

1.通过ID获取（getElementById）

//因为在一个页面中 id 是唯一的，所以获取到的就是一个元素
<body>
  <div id="box"></div>
  <script>
      var box = document.getElementById('box')
      console.log(box) // <div></div>
  </script>
</body>

2.通过class名称来获取（getElementsByClassName ）

//因为页面中可能有多个元素的 class 名称一样，所以获取到的是一组元素哪怕你获取的 class 只有一个，
//那也是获取一组元素，只不过这一组中只有一个 DOM 元素而已
<body>
  <div calss="box"></div>
  <script>
      var box = document.getElementsByClassName('box')
      console.log(box) // [<div></div>]
      console.log(box[0]) // <div></div>
  </script>
</body>

3.getElementsByTagName通过标签名称来获取（getElementsByTagName）

// 因为页面中可能有多个元素的 标签 名称一样，所以获取到的是一组元素
// 哪怕真的只有一个这个标签名，那么也是获取一组元素，只不过这一组中只有一个 DOM 元素而已
<body>
  <div></div>
  <script>
      var box = document.getElementsByTagName('div')
      console.log(box) // [<div></div>]
      console.log(box[0]) // <div></div>
  </script>
</body>

4.通过选择器的方式来获取（querySelector）

// 也就是说，按照我们写 css 的时候的选择器来获取
// 这个方法只能获取到一个元素，并且是页面中第一个满足条件的元素
<body>
  <div>第一个div</div>
  <div class="box">第二个div</div>
  <div id="box">第三个div</div>
  <div number="1">第四个div</div>
  <script>
  	console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素 
	console.log(document.querySelector('.box')) // 获取页面中第一个有 box 类名的元素
	console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元素
	console.log(document.querySelector('div[number = '1']')) // 获取页面中div属性名为number = 1的元素
  </script>
</body>

5.通过选择器的方式来获取所有元素（querySelectorAll ）

//这个方法能获取到所有满足条件的元素，以一个伪数组的形式返回
<body>
  <div>第一个div</div>
  <div class="box">第二个div</div>
  <div id="box">第三个div</div>
  <div number="1">第四个div</div>
  <script>
  	console.log(document.querySelectorAll('div')[0]) // 获取页面中的第一个 div 元素 
	console.log(document.querySelectorAll('.box')[0]) // 获取页面中第一个有 box 类名的元素
	console.log(document.querySelectorAll('#box')[0]) // 获取页面中第一个 id 名为 box 的元素
	console.log(document.querySelectorAll('div[number = '1']')[0]) // 获取页面中div属性名为number = 1的元素
  </script>
</body>