访问HTML元素

最新推荐文章于 2022-09-19 22:00:00 发布
最新推荐文章于 2022-09-19 22:00:00 发布
阅读量460 收藏 1
点赞数
分类专栏： DOM 文章标签： javascript DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/owen_william/article/details/51088745
版权

1.根据ID访问元素  


下面我们来看一段代码：

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(Owen.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 根据ID访问HTML元素 </title>
	<script type="text/javascript">
		var accessById = function()
		{
			alert(document.getElementById("a").innerHTML + "\n"
			+ document.getElementById("b").value);
		}
	</script>
	</head>
<body>
	<div id="a">Java</div>
	<textarea id="b" rows="3" cols='25'>Spring源码
		</textarea>
	<input type="button" value="访问2个元素" οnclick="accessById();"/>
</body>
</html>

运行结果：


2.利用节点关系访问HTML元素

一旦获取了某个HTML元素，由于该元素实际上与DOM树的某个节点对应，因此我们完全可以利用节点之间的父子、兄弟关系来访问HTML元素。


下面我们来看一段代码：

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(owen.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 根据节点关系访问HTML元素 </title>
	<style type="text/css">
		/* 定义改变背景色的CSS，表示被选中的项 */
		.selected {
			background-color:#66f
		}
	</style>
	</head>
	<body>
	<ol id="books">
		<li id="java">Java</li>
		<li id="ssh">Java EE</li>
		<li id="ajax" class="selected">Ajax</li>
		<li id="xml">XML</li>
		<li id="ejb">Java EE企业应用</li>
		<li id="workflow">Android</li>
	</ol>
	<input type="button" value="父节点"
		οnclick="change(curTarget.parentNode);"/>
	<input type="button" value="第一个"
		οnclick="change(curTarget.parentNode.firstChild.nextSibling);"/>
	<input type="button" value="上一个"
		οnclick="change(curTarget.previousSibling.previousSibling);"/>
	<input type="button" value="下一个"
		οnclick="change(curTarget.nextSibling.nextSibling);"/>
	<input type="button" value="最后一个"
		οnclick="change(curTarget.parentNode.lastChild.previousSibling);"/>
	<script type="text/javascript">
		var curTarget = document.getElementById("ajax");
		var change = function(target)
		{
			alert(target.innerHTML);
		}
	</script>
</body>
</html>

需要指出的是，<ol…/>节点一共包含了13个子节点，而不是6个子节点！因为在每两个<li…/>节点之间都有一个“空白”，每个“空白”也将被当作<ol../>元素子节点。

运行结果：

3.访问表单控件

表单DOM中由HTMLFormElement对象表示，该对象除了可调用前面介绍的基本属性和方法之外，还拥有如下几个属性：


下面我们来看一段代码：

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(Owen.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 访问表单控件 </title>
</head>
<body>
	<form id="d" action="" method="get">
		<input name="user" type="text" /><br />
		<input name="pass" type="text" /><br />
		<select name="color">
			<option value="red">红色</option>
			<option value="blue">蓝色</option>
		</select><br />
		<input type="button" value="第一个" οnclick=
			"alert(document.getElementById('d').elements[0].value);" />
		<input type="button" value="第二个" οnclick=
			"alert(document.getElementById('d').elements['pass'].value);" />
		<input type="button" value="第三个"	οnclick=
			"alert(document.getElementById('d').color.value);" />
	</form>
</body>
</html>

运行结果：

4.访问列表框、下拉菜单的选项

HTMLSeletElement代表一个列表框或下拉菜单，HTMLSelectElement对象除了可使用普通HTML元素的各种属性和方法外，还支持如下额外的属性。

HTMLSelectElement的options属性可直接访问列表框、下拉菜单的所有列表项，传指定索引即可访问指定列表项，语法如下：


列表框、下拉框菜单的选项由HTMLOptionElement对象表示，除了前面介绍的普通属性之外，该对象还提供了如下几个常用属性。


如下代码：

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(owen.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 访问列表项 </title>
</head>
<body>
	<select id="mySelect" name="mySelect" size="6">
		<option value="java">Java</option>
		<option value="ssh">Java EE</option>
		<option value="ajax" selected>Ajax</option>
		<option value="xml">XML</option>
		<option value="ejb">Java EE</option>
		<option value="workflow">Android</option>
	</select><br />
	<input type="button" value="第一个" οnclick=
		"change(curTarget.options[0]);" />
	<input type="button" value="上一个"	οnclick=
		"change(curTarget.options[curTarget.selectedIndex - 1]);" />
	<input type="button" value="下一个" οnclick=
		"change(curTarget.options[curTarget.selectedIndex + 1]);" />
	<input type="button" value="最后一个" οnclick=
		"change(curTarget.options[curTarget.length - 1]);" />
	<script type="text/javascript">
		var curTarget = document.getElementById("mySelect");
		var change = function(target)
		{
			alert(target.text);
		}
	</script>
</body>
</html>

运行结果：

5.访问表格子元素

HTMLTableElement代表表格，HTMLTableElement对象除了可使用普通HTML元素的各种属性和方法，还支持如下的额外的属性。

在获得一个表格之后，完全可以通过上面提供的一系列属性来访问表格”内容”。如下：



HTMLTableRowElement代表表格行，HTMLTableRowElement对象除了可使用普通HTML元素的各种属性和方法外，还支持如下的额外属性。



HTMLTableCellElement代表单元格，HTMLTableCellElement对象除了可使用普通HTML元素的各种属性和方法外，还支持如下的属性。


下面给出示例的代码：


<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(owen.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 访问表格元素 </title>
</head>
<body>
	<table id="d" border="1">
	<caption>疯Java体系</caption>
		<tr>
			<td>Java</td>
			<td>Java EE</td>
		</tr>
		<tr>
			<td>Ajax</td>
			<td>Java EE</td>
		</tr>
		<tr>
			<td>XML</td>
			<td>Android</td>
		</tr>
	</table>
	<input type="button" value="表格标题" οnclick=
		"alert(document.getElementById('d').caption.innerHTML);" />
	<input type="button" value="第一行、第一格" οnclick=
		"alert(document.getElementById('d').rows[0].cells[0].innerHTML);" />
	<input type="button" value="第二行、第二格" οnclick=
		"alert(document.getElementById('d').rows[1].cells[1].innerHTML);" />
	<input type="button" value="第三行、第二格" οnclick=
		"alert(document.getElementById('d').rows[2].cells[1].innerHTML);" />
</body>
</html>

运行结果：



Owen William
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html多种方法读取表单的元素值
yanleigis的专栏
10-30 1487
function ylgetvalue(obj){   //方法1   var objj=eval(obj.wo_sign);   alert(eval(obj.wo_sign):+objj.value);      //方法2   objj=obj.wo_sign;   alert(obj.wo_sign:+objj.value);      //方法3   objj=eval(doc
086_访问html元素
aihiao的专栏
01-07 409
1. 访问html元素有一下几种方法: 1.1. 通过id查找html元素。 1.2. 通过标签名查找html元素。 1.3. 通过类名查找html元素。 1.4. 通过CSS选择器查找html元素。 1.5. 通过html对象集合查找html元素。 2. 通过id查找html元素 2.1. 通过id查找html元素, 是最简单也是最常用的一种方式。 var myElement = document.getElementById("intro"); 2.2. 如果元素被找到, 此方法会以
访问HTML中元素的方法
第十七签
06-06 1251
1、根据ID访问HTML元素<!DOCTYPE html> <html> <head> <title>访问html元素</title> <script type="text/javascript"> function getContent(){ alert(document.getElementById("
访问元素CSS属性
agagqdvqg198134339的博客
07-22 72
function getRealStyle(id, styleName) { var element = document.getElementById(id); var realStyle = null; if (element.currentStyle) { realStyle = element.currentStyle[styleName];...
DOM访问HTML元素
Manjusaka
03-07 207
document.images   //获取页面中的图像集合
HTML5访问表格元素
11-22
用Html5编写的表格，并能访问其中的标题，单元格的数据。
HTML_2D_ARRAY:以数组形式访问 HTML 元素的接口
06-16
HTML_2D_ARRAY 是一种特殊的接口，它允许开发者以二维数组的形式访问和操作HTML元素，极大地简化了DOM（文档对象模型）的操作。在JavaScript中，这个接口通常与`document.querySelectorAll()`方法结合使用，用于获取...
HTML5访问Select的元素
11-22
html5访问Select里的元素，通过索引或相对定位的方式来实现。
html元素过滤.rar
04-05
HTML元素过滤是一个重要的网络安全与网页开发技术，主要目的是防止恶意用户通过输入特定的HTML标签来执行脚本攻击，如跨站脚本（XSS）攻击。在处理用户输入时，对HTML元素进行过滤是保障网站安全的重要手段。下面将...
HTML5元素周期表
07-26
HTML5的离线存储特性（如Application Cache或Service Worker）使得周期表可以在离线状态下访问，提升了用户体验。同时，Web Storage（如localStorage和sessionStorage）可以用于保存用户的偏好设置或浏览历史，提供...
使用规范的方法访问页面元素
Cocowool的专栏
06-21 1009
        Firefox以及其他Gecko引擎的浏览器遇到的最常见的兼容性问题是IE DHTML和W3C DOM的区别。 不规范的DHTML脚本中最容易犯的一个错误就是使用不规范的方式来访问网页元素。我们曾经用spider爬一些国内著名门户网站，单从数量上看，95%以上的javascript错误都来自于此。 常见的访问网页元素的不规范方式有一下几种: 1. 直接用id或name属性名访问
访问 HTML中元素的方法
weixin_30709929的博客
12-07 197
http://www.w3school.com.cn/jsref/index.asp 1.document.getElementbyId(“id1”),Html中，名称是id1的元素的对象。由于要求元素的id是唯一的，所以通过getElementId()方法获得的是一个对象，而不是一个数组。 2.document.getElementbyTagName("h1"),返回所有标签为<...
JavaScript如何查找和访问HTML页面中的HTML元素
最新发布
cnds123的专栏
09-19 3563
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 DOM被结构化为对象树。JavaScript可以访问和更改HTML文档的所有元素。本文将介绍如何做到。
python列表元素的访问及常用方法
苦瓜_小学生的博客
03-09 8456
列表元素的访问 创建列表只有可以使用 整数 作为下标来访问其中的元素，与c语言数组类似，0表示第一个元素、1表示第二个元素、2表示第三个元素以此类推；列表还指出使用负整数作为下标，其中，-1表示最后一个元素、-2表示倒数第二个元素以此类推 列表常用方法 方法 说明 append(x) 将x追加至列表尾部 extend(L) 将列表L中所有元素追加至列表尾部 insert(...
CefSharp获取页面Html代码的两种方式
weixin_34249678的博客
03-06 9028
CefSharp在NuGet的简介是“The CefSharp Chromium-based browser component”，机翻的意思就是“基于Cefsharp Chromium的浏览器组件” 第一种方法 就是执行JavaScript代码获取当前html代码 StringBuilder sb = new StringBuilder(); ...
疯狂H5笔记 - DOM编程详解
qq_27905183的博客
11-10 398
1.通过节点关系来访问HTML元素：Node parentNode：返回当前节点的父节点 Node previousSibling：返回当前结点的前一个兄弟节点 Node nextSibling：返回当前节点的下一个兄弟结点 Node[] childNodes：返回当前节点的所有子节点 Node[] getElementByTagName(tagName)：返回当前节点的具有指定标签名的所有子节点
Python的ndarray和DataFrame访问元素操作总结
cshy2013的博客
05-14 5758
Numpy的二维数组（ndarray，或称矩阵）和DataFrame在数据访问方式上有许多相似之处，且有些地方容易让人搞混，因此做了简要总结。
JS访问Web页面的元素
Abel_01_xu的博客
12-04 616
1. 访问特定元素      document.getElementById('id') 2. 根据元素名访问      document.getElementsByTagName('img')      值得注意的是，上述返回的是一个类数组NodeList，他是一个特殊的集合，动态的集合，不是一个Array对象，因此不能对其使用数组方法，例如push()等。NodeList的唯一属性是l...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值