DOM - 根据ID访问HTML元素根据id获取元素的jquery方法

zhezhongyun 2024-12-22 21:56 72 浏览

根据ID访问HTML元素如下方法实现

document.getElementById(idVal):返回文档中id属性值为idVal的HTML元素。

上面这个方法简单易用，只要被访问HTML元素具有唯一的id属性，那么javaScript脚本就可以方便地访问到该元素。

在设计良好的HTML页面中，建议为页面中的每个HTML元素都设置唯一的id属性值；或者要求其他成员开发HTML页面时尽量为每个元素设置唯一的id属性值。

早起的很多HTML页面并不是规范的HTML页面，而且早期的很多页面只是简单的静态页，不需要使用javaScript动态修改页面内容，因此页面中可能有些HTML元素没有指定id属性值，但现在不同了，现在可能经常需要动态修改HTML页面内容，经常需要根据ID来访问HTML元素，因此建议为每个HTML元素指定唯一的id属性值。

下面的页面代码示范了如何根据ID来访问HTML元素

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>根据ID访问HTML元素</title>
 </head>
 <body>
 <div id="a">HELLO</div>
 <textarea id="b" rows="3" cols='25'>
 world
 </textarea>
 <input type="button" value="访问2个元素" onclick="accessById();"/>
 <script type="text/javascript">
 var accessById=function()
 {
 alert(document.getElementById("a").innerHTML+"\n"+document.getElementById("b").value);
 }
 </script>
 </body>
</html>

上面的页面中定义了一个id为a的<div../>元素、一个id为b的<textarea.../>元素，页面中还定义了一个简单按钮，当用户单击该按钮时执行accessById()函数，该函数只是弹出一个警告提示框，该提示框输出<div../>元素的innderHTML属性和<textarea.../>元素的value属性。

在浏览器中浏览该页面，并单击页面中的“访问2个元素”按钮，可以看到如图所示警告框

可以看出，该警告框的内容正好是<div.../>元素和<textarea.../>元素的“内容”。由此可以可见，使用document.getElementById()方法来访问HTML元素非常简单。

可能有读者感到奇怪，程序中为了访问<div.../>元素和<textarea../>元素的“内容”，为何一个用innerHTML属性，另一个用value呢？这是因为DOM模型扩展了HTML元素，为几乎所有的HTML元素都新增了innerHTML属性，该属性代表该元素的“内容”，当某个元素的开始标签、结束标签之间都是字符串内容时（不包含其他子元素），javaScript子元素可通过它的innerHTML属性返回这些字符串内容。但<textarea../>例外，因为它是一个表单控件，它的开始标签和结束标签之间的内容是它的值，因此只能通过value属性来访问。不仅如此，还有<input../>元素所生成的表单控件，包括单行文本框、各种按钮等，它们的可视化文本都由value属性控制，因此也通过value来获取它们的“内容”。除此之外的其他HTML元素，包括列表框、下拉菜单的列表项、<label.../>表单域、<button.../>按钮，都应通过innerHTML来获取它们的“内容”。

HTML 拓展阅读

上一篇：给大伙支两招，一键去网页跳转弹窗
下一篇：Flask 模板:使用 Jinja2 渲染 HTML

DOM - 根据ID访问HTML元素根据id获取元素的jquery方法

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

DOM - 根据ID访问HTML元素 根据id获取元素的jquery方法

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

DOM - 根据ID访问HTML元素根据id获取元素的jquery方法