Js的DOM编程获取标签对象的三种方式

最新推荐文章于 2022-11-13 22:44:21 发布

N_Peng

最新推荐文章于 2022-11-13 22:44:21 发布

阅读量2.5k

点赞数 1

本文链接：https://blog.csdn.net/N_Peng/article/details/99618507

版权

Js的DOM编程获取标签对象的三种方式

一.DOM使用：

1.通过特定方法/特定属性控制标签对象
2.通过标签独享更改标签里面的属性火焰石，展示效果

二. 三种方式获取标签对象

1. 通过document的集合属性获取

1.1 document常用属性：

all集合属性：获取页面中所有的标签对象,返回的集合列表
forms：获取页面中所有的form标签对象,返回集合列表
mages：获取页面中所有的image标签对象，返回集合列表
links：获取页面所有的a标签对象，返回集合列表

1.2 使用方法

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通过Document集合属性获取标签对象</title>
	</head>
	<body>
<form><img src=""/><a href="#">超链接</a></form>
<form>
	<img src=""/><a href="#">超链接</a>
	<img src="" /><a href="#">超链接</a>
</form>
	</body>
<script>
        var nodeList = document.all ;
 //或  var nodeList = document.forms ;
 //或  var nodeList = document.images;
 //或  var nodeList = document.links;
	alert(nodeList.length) ;
	for(var i = 0 ; i < nodeList.length;i++){
		//获取节点(标签对象)的节点名称:nodeName属性
		//节点类型：nodeType(标签对象的节点类型：1)
		document.write(nodeList[i].nodeName+"<br/>") ;
	}
</script>
</html>

2. 通过节点关系获取

2.1 节点:

parentNode：父节点
childNodes：所有的子节点
firstChild：第一个子节点
lastChild：最后一个子节点
nextSibling：下一个兄弟节点
previousSibling：上一个兄弟节点

2.2 实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>查询节点关系获取标签对象</title>
	</head>
<body>
<form><a href="#">超链接</a><input type="button" value="点我" /></form>
<form><a href="#">跳转</a><input type="text" /></form>
</body>
<script>
	
	//1：获取第一个a标签对象
	var aNode = document.links[0] ;
	alert(aNode.nodeName) ;
	
	//2：通过aNode获取父节点对象：
	var formNode = aNode.parentNode ;
	alert(formNode.nodeName) ;
	//3：通过父节点获取所有的子节点
	var nodeList = formNode.childNodes ;
	for(var i = 0 ; i < nodeList.length ; i++){
		if(nodeList[i].nodeType ==1){//帅选出标签对象的节点
		    document.write("节点名称是:"+nodeList[i].nodeName+",节点类型是:"+nodeList[i].nodeType+"<br/>") ;
		
		}
	}
	
	//4：获取formNode的第一个子点
	var firtNode = formNode.firstChild ;
	alert(firtNode.nodeName);
	//5：获取formNode的最后一个子节点
	var lastNode = formNode.lastChild ;
	alert(lastNode.nodeName);*/
	
	//6：获取第二个a标签对象
	var aNode = document.links[1] ;
	/7：aNode获取下一个兄弟节点:nextSibling
	var nextNode = aNode.nextSibling ;
	alert(nextNode.nodeName) ;
	//8：nextNode:获取上一个兄弟节点
	var previous = nextNode.previousSibling ;
	alert(previous.nodeName) ;
</script>
</html>

3. 通过document对象的方法获取标签对象

3.1 方法：

getElementById：通过id属性值获取标签对象(推荐)
注意：id属性同一个页面下,必须唯一的
getElementsByTagName：通过标签名称获取
getElementsByName：通过name标签属性获取标签对象
getElementsByClassName：通过class属性获取

3.2 实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通过document对象的方法获取标签对象</title>
<script>
function getUserName(){
	var username = document.getElementById("username") ;
//或 var username =document.getElementsByTagName("input")[0];
//或 var username = document.getElementsByName("uname")[0] ;
//或 var username = document.getElementsByClassName("cl")[0] ;
	//弹出输入的内容
	alert(username.value) ;	
}	
</script>
	</head>
<body>
用户名:<input type="text" id="username" class="cl" name="uname" onblur="getUserName()" />
</body>
</html>

N_Peng

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Js的DOM编程获取标签对象的三种方式

Js的DOM编程获取标签对象的三种方式一.DOM使用：1.通过特定方法/特定属性控制标签对象2.通过标签独享更改标签里面的属性火焰石，展示效果二. 三种方式获取标签对象1. 通过document的集合属性获取1.1 document常用属性：all集合属性：获取页面中所有的标签对象,返回的集合列表forms：获取页面中所有的form标签对象,返回集合列表mages：获取页面中...
复制链接

扫一扫