JavaScript 获取 HTML 元素方法

简介: 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];
目录
相关文章
|
9天前
|
移动开发 开发者 UED
HTML5 语义元素详解
HTML5引入了诸多语义元素
WK
|
3天前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
15 1
|
12天前
|
存储 JavaScript 前端开发
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
|
12天前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
12天前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
10天前
|
移动开发 数据安全/隐私保护 UED
HTML5 表单元素详解
HTML5 引入了新的表单元素和属性,如 `&lt;form&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;` 和 `&lt;button&gt;`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`&lt;input&gt;` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。
WK
|
3天前
|
Web App开发 存储 移动开发
HTML5新增了哪些表单元素
HTML5通过新增多种表单元素和属性,提升了用户体验与交互性。例如,`email`和`url`元素分别验证邮箱地址和网址格式;`number`和`range`便于输入数字及区间值;`date`等元素简化了日期时间的选择;`search`添加搜索图标,`color`提供颜色选择器;`datalist`结合`input`属性给予用户下拉列表选项;`keygen`用于生成密钥对以增强安全性;`output`则用于动态展示计算结果。这些改进共同提高了表单的功能性和易用性。
WK
11 2
|
12天前
|
小程序 JavaScript 前端开发
你的生日是星期几?HTML+JavaScript帮你列出来
你的生日是星期几?HTML+JavaScript帮你列出来
|
2天前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
|
12天前
|
前端开发 JavaScript 开发工具
MASM32+ HTML & JavaScript,好搭档
MASM32+ HTML & JavaScript,好搭档