DOM（一）-12-(document获取节点byName)

最新推荐文章于 2022-12-28 10:53:25 发布

wy_0928

最新推荐文章于 2022-12-28 10:53:25 发布

阅读量390

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47809653

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

【document对象——获取节点byName】

不是所有标签都具备name属性，具备name属性的有：表单标签、超链接标签

========================================================================================================

【示例】通过单击button拿到标签相关属性，将获取标签属性方法定义在getNodeByName中，重点演示document对象中的
getElementsByName方法，目标是即通过user这个名字获取节点

<html>
	<head>
	</head>
	
	<body>
		<script type="text/javascript">
		
			function getNodeByName(){
			
				var nodes = document.getElementsByName("user");//获取到的是一个数组，其内都是一个个节点
				
				alert(nodes.length);//弹出1，说明数组长度是1
				
				alert(nodes[0].nodeName);//弹出input
				
				alert(nodes[0].type);//弹出text，因为type和name都是该节点的属性，那么直接用该节点对象获取即可
				
				alert(nodes[0].value);//在网页中的文本框内输入什么，单击button后就弹出什么，因为value也是该节点的一个
				//属性，表示文本框中的内容（【注】表单中有两个属性：name和value）
			
			}
		
		</script>
		
		<input type="button" value="演示获取节点byName" οnclick="getNodeByName()" />
		<input type="text" name="user" />
	</body>
</html>

【总结】
document对象中的getElementById和getElementsByName两个方法区别：
（1）getElementById：通过标签的id属性值获取该标签节点对象，因为id值是唯一的，所以单数形式：Element，返回一个对象
（2）getElementsByName：通过标签的name属性获取节点，因为name有相同，所以复数形式：Elements，返回一个数组
（凡是复数形式的，返回的都是数组）

以上代码可以写成如下形式：
var userNode = document.getElementsByName("user")[0];
alert(userNode.value);
getElementsByName获取到的是一个数组，[0]表示其中第一个元素，那么userNode就是一个节点对象，不再是一个节点数组