您的位置：首页 > 其它

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

2015-08-20 16:26 330 查看
【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" onclick="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就是一个节点对象，不再是一个节点数组
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航