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>

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

<body>
  <div class="ce">测试</div>
  <script>
    let ce = document.getElementsByClassName('ce')
    console.log(ce[0]); // <div class="ce">测试</div>
  </script>
</body>

通过标签名来获取页面元素: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>

通过标签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>

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>

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>