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>

// 获取 calss 名为 isCalss 的第一个元素
document.getElementsByClassName('isCalss')[0];