1.document.getElementById(‘id’) 通过元素 id 来查找元素。
2.document.getElementsByTagName(‘name’) 通过标签名来查找元素。
3.document.getElementsByClassName(‘class’) 通过类名来查找元素。
4.document.getElementsByName(‘name’) 通过表单元素中 name 名查找元素。
5.document.querySelector(‘CSS 选择器’) 通过 CSS 选择器获取匹配上的第一个元素。
6.document.querySelectorAll(‘CSS 选择器’) 通过 CSS 选择器获取匹配上的所有元素。
<p class="isCalss" id="isId">第一个段落</p> <p class="isCalss">第二个段落</p> <input class="isCalss" name="isName" type="text"> <input class="isCalss" name="isName" type="text"> <script> // 获取到第一个 P 标签 document.getElementById('isId'); // 获取到两个 p 标签 document.getElementsByTagName('p'); // 获取到两个 p 标签和两个 input 标签 document.getElementsByClassName('isCalss'); // 获取到两个 input 标签 document.getElementsByName('isName'); // 获取到第一个 p 标签 document.querySelector('.isCalss'); // 获取到两个 p 标签和两个 input 标签 document.querySelectorAll('.isCalss'); </script>
综上所述,除了通过 ID 选择器和 querySelector 选择器获取到的元素是唯一的,其余的选择
器返回的是 伪数组 的形式,可以通过 [ 下标 ] 的方式确定我们需要操作的元素。
// 获取 calss 名为 isCalss 的第一个元素 document.getElementsByClassName('isCalss')[0];