DOM访问方法说明及DOM节点操作一例

iteye_18932

于 2011-11-22 00:15:15 发布

阅读量170

点赞数

分类专栏：前端文章标签： xhtml javascript 数据结构与算法 ViewUI

前端专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨了HTML元素访问方法中的HTMLCollection与NodeList的区别与使用，包括它们的特性、访问方式及注意事项。通过具体示例展示如何在实际应用中灵活运用这些方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>

<title>Test</title>

</head>

<body>

<form name="form1" action="" >

<input type="text" name="name1" id="id1" />

<input type="text" name="name2" id="id2" />

</form>

<div id="result" ></div>

<script type="text/javascript">

var myform=document.forms.item(0);

var result=document.getElementById('result');

var mystr;

mystr=myform.elements.namedItem("id1").tagName;

result.appendChild(document.createTextNode(mystr));

result.appendChild(document.createElement("br"));

mystr=myform["id2"].tagName;

result.appendChild(document.createTextNode(mystr));

</script>

</body>

</html>

在W3C中，一般通过属性返回的元素集合叫HTMLCollection，如document.forms.通过方法返回的叫Node List,如getElementByTagName.

HTMLCollection可以通过item方法用索引访问，索引按深度优先排序，通namedItem方法按id访问（HTML4.01支持id和name,xhtml只有id）。而Node List只能通过item来访问

而实际中所有浏览器HTMLCollection的item方法既可以用id访问又可以用name访问

对于Node List，只有Chrome在XHTML下不能通过namedItem和name访问元素（用item仍然支持id访问）。其它浏览器与HTMLCollection访问方法完全相同

至于数组语法访问HTMLCollection和Node List未见W3C有相关说明，不过从实现上看数组访问的结果与item访问的结果完全一样，也可能数组是item和namedItem的合集。

建议不要在任何时候用name访问集合中的元素。用item时也不要用id和name访问元素，当用id访问元素时要用数组语法或namedItem方法(仅HTMLCollection)。不要用id和name访问Node List

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>

<title>Test</title>

</head>

<body>

<form name="form1" action="" >

<input type="text" name="name1" id="id1" />

<input type="text" name="name2" id="id2" />

</form>

<div id="result" ></div>

<script type="text/javascript">

var myform=document.getElementsByTagName("input");

var result=document.getElementById('result');

var mystr;

mystr=myform[0].tagName;

result.appendChild(document.createTextNode(mystr));

result.appendChild(document.createElement("br"));

mystr=myform.item(1).tagName;

result.appendChild(document.createTextNode(mystr));

</script>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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