js获取页面元素的几种方法_js 获取元素时如何判断元素是当前页面获取到的而不是缓存

作者：小丑西瓜9 | 2024-03-06 10:00:21

踩

js 获取元素时如何判断元素是当前页面获取到的而不是缓存

通过ID来获取页面元素：document.getElementById(‘id’);

<body>
  <div id="ce">测试</div>
  <script>
    let ce = document.getElementById('ce')
    console.log(ce); // <div id="ce">测试</div>
  </script>
</body>
1
2
3
4
5
6
7

通过类名来获取页面元素：document.getElementsByClassName(‘类名’);

<body>
  <div class="ce">测试</div>
  <script>
    let ce = document.getElementsByClassName('ce')
    console.log(ce[0]); // <div class="ce">测试</div>
  </script>
</body>
1
2
3
4
5
6
7

通过标签名来获取页面元素：document.getElementsByTagName(‘标签名’);

<body>
  <div>测试</div>
  <div>测试2</div>
  <script>
    let ce = document.getElementsByTagName('div')
  	// 会获取页面所有的div标签
    console.log(ce); // ce[0] <div class="ce">测试</div>  ce[1] <div class="ce">测试2</div>
  </script>
</body>
1
2
3
4
5
6
7
8
9

通过标签name属性获取页面元素：document.getElementsByName(‘name属性的值’);

<body>
  <div name="ce">测试</div>
  <script>
    let ce = document.getElementsByName('ce')
    console.log(ce[0]); // <div name="ce">测试</div>
  </script>
</body>
1
2
3
4
5
6
7

H5新增的获取元素的方式:document.querySelector(‘选择器’); id带#,class带.

<body>
  <div id="ce1">测试1</div>
  <div class="ce2">测试2</div>
  <script>
    let ce1 = document.querySelector('#ce1')
    let ce2 = document.querySelector('.ce2')
    console.log(ce1); // <div id="ce1">测试</div>
    console.log(ce2); // <div class="ce2">测试2</div>
  </script>
</body>
1
2
3
4
5
6
7
8
9
10

H5新增的获取元素的方式:document.querySelectorAll(‘选择器’); 获取满足条件的所有元素

<body>
  <div id="ce1">测试1</div>
  <div class="ce2">测试2</div>
  <script>
    let ce = document.querySelectorAll('div')

    console.log(ce[0]); // <div id="ce1">测试1</div>
    console.log(ce[1]); // <div class="ce2">测试2</div>
  </script>
</body>
1
2
3
4
5
6
7
8
9
10

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/197708

js获取页面元素的几种方法_js 获取元素时 如何判断元素是当前页面获取到的 而不是缓存

通过ID来获取页面元素：document.getElementById(‘id’);

通过类名来获取页面元素：document.getElementsByClassName(‘类名’);

通过标签名来获取页面元素：document.getElementsByTagName(‘标签名’);

通过标签name属性获取页面元素：document.getElementsByName(‘name属性的值’);

H5新增的获取元素的方式:document.querySelector(‘选择器’); id带#,class带.

H5新增的获取元素的方式:document.querySelectorAll(‘选择器’); 获取满足条件的所有元素

js获取页面元素的几种方法_js 获取元素时如何判断元素是当前页面获取到的而不是缓存