JavaScript 获取 HTML 元素方法

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];