JS操作DOM元素属性和方法（转）
我的图书馆
JS操作DOM元素属性和方法（转）
Dom元素基本操作方法API，先记录下，方便以后使用。 　　W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分，这就使得JavaScript可以访问元素的属性和方法。 　　DOM独立于具体的编程语言，通常通过JavaScript访问DOM，不过并不严格要求这样。可以使用任何脚本语言来访问DOM，这要归功于其一致的API。表3-1列出了DOM元素的一些有用的属性，表3-2列出了一些有用的方法。 表3-1　用于处理XML文档的DOM元素属性 属性名 &&&&&&& 描述 childNodes 返回当前元素所有子元素的数组 firstChild 返回当前元素的第一个下级子元素 lastChild 返回当前元素的最后一个子元素 nextSibling 返回紧跟在当前元素后面的元素 nodeValue 指定表示元素值的读/写属性 parentNode 返回元素的父节点 previousSibling 返回紧邻当前元素之前的元素 表3-2　用于遍历XML文档的DOM元素方法 方法名 &&&&&&&&&&&&&&&&&&&&&&& 描述 getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素 getElementsByTagName(name) 返回当前元素中有指定标记名的子元素的数组 hasChildNodes() 返回一个布尔值，指示元素是否有子元素 getAttribute(name) 返回元素的属性值，属性由name指定 　　有了W3C DOM，就能编写简单的跨浏览器脚本，从而充分利用XML的强大功能和灵活性，将XML作为浏览器和服务器之间的通信介质。 　　从下面的例子可以看到，使用遵循W3C DOM的JavaScript来读取XML文档是何等简单。代码清单3-3显示了服务器向浏览器返回的XML文档的内容。这是一个简单的美国州名列表，各个州按地区划分。 表3-3 动态创建内容时所用的W3C DOM属性和方法 属性/方法 &&&&&&&&&&&&&&&& 描述 document.createElement(tagName) 文档对象上的createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素 document.createTextNode(text) 文档对象的createTextNode方法会创建一个包含静态文本的节点 &element&.appendChild(childNode) appendChild方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。例如，可以增加一个option元素，作为select元素的子节点 &element&.getAttribute(name) &element&.setAttribute(name, value)这些方法分别获得和设置元素中name属性的值 &element&.insertBefore(newNode, targetNode)将节点newNode作为当前元素的子节点插到targetNode元素前面 &element&.removeAttribute(name) 这个方法从元素中删除属性name &element&.removeChild(childNode) 这个方法从元素中删除子元素childNode &element&.replaceChild(newNode, oldNode) 这个方法将节点oldNode替换为节点newNode &element&.hasChildnodes() 这个方法返回一个布尔值，指示元素是否有子元素 Document－－最顶层的节点，所有的其他节点都是附属于它的。 DocumentType－－DTD引用（使用&!DOCTYPE&语法）的对象表现形式，它不能包含子节点。 DocumentFragment－－可以像Document一样来保存其他节点。 Element－－表示起始标签和结束标签之间的内容，例如&tag&&/tab&或者&tag/&。这是唯一可以同时包含特性和子节点的节点类型。 Attr－－代表一对特性名和特性值。这个节点类型不能包含子节点。 Text－－代表XML文档中的在起始标签和结束标签之间，或者CDataSection内包含的普通文本。这个节点类型不能包含子节点。 CDataSection－－&![CDATA[]]&的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。 Entity－－表示在DTD中的一个实体定义，例如&!ENTITY foo"foo"&。这个节点类型不能包含子节点。 EntityReference－－代表一个实体引用，例如&。这个节点类型不能包含子节点。 ProcessingInstruction－－代表一个PI。这个节点类型不能包含子节点。 Comment－－代表XML注释。这个节点不能包含子节点。 Notation－－代表在DTD中定义的记号。这个很少用到。 Node接口定义了所有节点类型都包含的特性和方法。 特性/方法 类型/返回类型 说明 nodeName String 节点的名字;根据节点的类型而定义 nodeValue String 节点的值;根据节点的类型而定义 nodeType Number 节点的类型常量值之一 ownerDocument Document 指向这个节点所属的文档 firstChild Node 指向在childNodes列表中的第一个节点 lastChild Node 指向在childNodes列表中的最后一个节点 childNodes NodeList 所有子节点的列表 previousSibling Node 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点，那么该值为null nextSibling Node 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点，那么该值为null hasChildNodes() Boolean 当childNodes包含一个或多个节点时,返回真 attributes NamedNodeMap 包含了代表一个元素的特性的Attr对象;仅用于Element节点 appendChild(node) Node 将node添加到childNodes的末尾 removeChild(node) Node 从childNodes中删除node replaceChild(newnode,oldnode) Node 将childNodes中的oldnode替换成newnode insertBefore(newnode,refnode) Node 在childNodes中的refnode之前插入newnodd 除节点外，DOM还定义了一些助手对象，它们可以和节点一起使用，但不是DOM文档必有的部分。 NodeList－－节点数组，按照数值进行索引;用来表示和一个元素的子节点。 NamedNodeMap－－同时使用数值和名字进行索引的节点表;用于表示元素特性。 2.访问相关的节点 下面的几节中考虑下面的HTML页面 1&html& 2&&& &head& 3&&&&&&& &title&DOM Example&/title& 4&&& &/head& 5&&& &body& 6&&&&&&& &p&Hello World!&/p& 7&&&&&&& &p&Isn't this exciting?&/p& 8&&&&&&& &p&You're learning to use the DOM!&/p& 9&&& &/body& 10&/html& 要访问&html/&元素（你应该明白这是该文件的document元素），你可以使用document的documentElement特性： var oHtml = document.documentE 现在变量oHtml包含一个表示&html/&的HTMLElement对象。如果你想取得&head/&和&body/&元素，下面的可以实现： var oHead = oHtml.firstC var oBody = oHtml.lastC 也可以使用childNodes特性来完成同样的工作。只需把它当成普通的javascript array，使用方括号标记： var oHead = oHtml.childNodes[0]; var oBody = oHtml.childNodes[1]; 注意方括号标记其实是NodeList在javascript中的简便实现。实际上正式的从childNodes列表中获取子节点的方法是使用item()方法： var oHead = oHtml.childNodes.item(0); var oBody = oHtml.childNodes.item(1); HTML DOM页定义了document.body作为指向&body/&元素的指针。 var oBody = ducument. 有了oHtml,oHead和oBody这三个变量，就可以尝试确定它们之间的关系： alert(oHead.parentNode==oHtml); alert(oBody.parentNode==oHtml); alert(oBody.previousSibling==oHead); alert(bHead.nextSibling==oBody); alert(oHead.ownerDocument==document); 以上均outputs "true"。 3.处理特性 正如前面所提到的，即便Node接口已具有attributes方法，且已被所有类型的节点继承，然而，只有 Element节点才能有特性。Element节点的attributes属性其实是NameNodeMap,它提供一些用于访问和处理其内容的方法： getNamedItem(name)－－返回nodename属性值等于name的节点; removeNamedItem(name)－－删除nodename属性值等于name的节点; setNamedItem(node)－－将node添加到列表中，按其nodeName属性进行索引; item(pos)－－像NodeList一样，返回在位置pos的节点; 注：请记住这些方法都是返回一个Attr节点，而非特性值。 NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。 当NamedNodeMap用于表示特性时，其中每个节点都是Attr节点，这的nodeName属性被设置为特性名称，而nodeValue属性被设置为特性的值。例如，假设有这样一个元素： &p style="color:red" id="p1"&Hello world!&/p& 同时，假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值: var sId = oP.attributes.getNamedItem("id").nodeV 当然，还可以用数值方式访问id特性，但这样稍微有些不直观： var sId = oP.attributes.item(1).nodeV 还可以通过给nodeValue属性赋新值来改变id特性： oP.attributes.getNamedItem("id").nodeValue="newId"; Attr节点也有一个完全等同于(同时也完全同步于)nodeValue属性的value属性，并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。 因为这个方法有些累赘，DOM又定义了三个元素方法来帮助访问特性： getAttribute(name)－－等于attributes.getNamedItem(name). setAttribute(name,newvalue)－－等于attribute.getNamedItem(name).value= removeAttribute(name)－－等于attribute.removeNamedItem(name)。 4.访问指定节点 (1)getElementsByTagName() 核 心(XML) DOM定义了getElementsByTagName()方法，用来返回一个包含所有的tagName(标签名)特性等于某个指定值的元素的 NodeList。在Element对象中，tagName特性总是等于小于号之后紧跟随的名称－－例如，&img /&的tagName是"img"。下一行代码返回文档中所有&img /&元素的列表： var oImgs = document.getElementsByTagName("img"); 把所有图形都存于oImgs后，只需使用方括号或者Item()方法（getElementsByTagName()返回一个和childNodes一样的NodeList），就可以像访问子节点那样逐个访问这些节点了： alert(oImgs[0].tagName);&&&&& //outputs "IMG" 假如只想获取在某个页面第一个段落的所有图像，可以通过对第一个段落元素调用getElementsByTagName()来完成，像这样： var oPs = document.getElementByTagName("p"); var oImgsInp = oPs[0].getElementByTagName("img"); 可以使用一个星号的方法来获取document中的所有元素： var oAllElements = document.getElementsByTagName("*"); 当参数是一个星号的时候，IE6.0并不返回所有的元素。必须使用document.all来替代它。 (2)getElementsByName() HTML DOM 定义了getElementsByName()，这用来获取所有name特性等于指定值的元素的。 (3)getElementById() 这是HTML DOM定义的第二种方法，它将返回id特性等于指定值的元素。在HTML中，id特性是唯一的－－这意味着没有两个元素可以共享同一个id。毫无疑问这是从文档树中获取单个指定元素最快的方法。 注：如果给定的ID匹配某个元素的name特性，IE6.0还会返回这个元素。这是一个bug，也是必须非常小心的一个问题。 5.创建新节点 最常用到的几个方法是 Java代码 &createDocumentFragment()－－创建文档碎片节点&&&createElement(tagname)－－创建标签名为tagname的元素&&&createTextNode(text)－－创建包含文本text的文本节点&&&&&createElement()、createTextNode()、appendChild()&&&&&1&html&&&&2&&&&&head&&&&3&&&&&&&&&title&createElement()&Example&/title&&&&4&&&&&&&&&script&type="text/javascript"&&&&5&&&&&&&&&&&&function&createMessage()&{&&&6&&&&&&&&&&&&&&&&var&oP&=&document.createElement("p");&&&7&&&&&&&&&&&&&&&&var&oText&=&document.createTextNode("Hello&World!");&&&8&&&&&&&&&&&&&&&&oP.appendChild(oText);&&&9&&&&&&&&&&&&&&&&document.body.appendChild(oP);&&&10&&&&&&&&&&&&}&&&11&&&&&&&&&/script&&&&12&&&&&/head&&&&13&&&&&body&onload="createMessage()"&&&&14&&&&&/body&&&&15&/html&&&&&&removeChild()、replaceChild()、insertBefore()&&&删除节点&&&1&html&&&&2&&&&&head&&&&3&&&&&&&&&title&removeChild()&Example&/title&&&&4&&&&&&&&&script&type="text/javascript"&&&&5&&&&&&&&&&&&function&removeMessage()&{&&&6&&&&&&&&&&&&&&&&var&oP&=&document.body.getElementsByTagName("p")[0];&&&7&&&&&&&&&&&&&&&&oP.parentNode.removeChild(oP);&&&8&&&&&&&&&&&&}&&&9&&&&&&&&&/script&&&&10&&&&&/head&&&&11&&&&&body&onload="removeMessage()"&&&&12&&&&&&&&&p&Hello&World!&/p&&&&13&&&&&/body&&&&14&/html&&&&&&&&替换&&&1&html&&&&2&&&&&head&&&&3&&&&&&&&&title&replaceChild()&Example&/title&&&&4&&&&&&&&&script&type="text/javascript"&&&&5&&&&&&&&&&&&function&replaceMessage()&{&&&6&&&&&&&&&&&&&&&&var&oNewP&=&document.createElement("p");&&&7&&&&&&&&&&&&&&&&var&oText&=&document.createTextNode("Hello&Universe!");&&&8&&&&&&&&&&&&&&&&oNewP.appendChild(oText);&&&9&&&&&&&&&&&&&&&&var&oOldP&=&document.body.getElementsByTagName("p")[0];&&&10&&&&&&&&&&&&&&&&oOldP.parentNode.replaceChild(oNewP,&oOldP);&&&11&&&&&&&&&&&&}&&&12&&&&&&&&&/script&&&&13&&&&&/head&&&&14&&&&&body&onload="replaceMessage()"&&&&15&&&&&&&&&p&Hello&World!&/p&&&&16&&&&&/body&&&&17&/html&&&
&新消息添加到旧消息之前 Java代码 &1&html&&&&2&&&&&head&&&&3&&&&&&&&&title&insertBefore()&Example&/title&&&&4&&&&&&&&&script&type="text/javascript"&&&&5&&&&&&&&&&&&function&insertMessage()&{&&&6&&&&&&&&&&&&&&&&var&oNewP&=&document.createElement("p");&&&7&&&&&&&&&&&&&&&&var&oText&=&document.createTextNode("Hello&Universe!");&&&8&&&&&&&&&&&&&&&&oNewP.appendChild(oText);&&&9&&&&&&&&&&&&&&&&var&oOldP&=&document.getElementsByTagName("p")[0];&&&10&&&&&&&&&&&&&&&&document.body.insertBefore(oNewP,&oOldP);&&&11&&&&&&&&&&&&}&&&12&&&&&&&&&/script&&&&13&&&&&/head&&&&14&&&&&body&onload="insertMessage()"&&&&15&&&&&&&&&p&Hello&World!&/p&&&&16&&&&&/body&&&&17&/html&&&&
&createDocumentFragment() 一旦把节点添加到document.body（或 者它的后代节点）中，页面就会更新并反映出这个变化。对于少量的更新，这是很好的，然而，当要向document添加大量数据时，如果逐个添加这些变动， 这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中，假如 想创建十个新段落 Js代码 &1&html&&&&2&&&&&head&&&&3&&&&&&&&&title&insertBefore()&Example&/title&&&&4&&&&&&&&&script&type="text/javascript"&&&&5&&&&&&&&&&&&function&addMessages()&{&&&6&&&&&&&&&&&&&&&&var&arrText&=&["first",&"second",&"third",&"fourth",&"fifth",&"sixth",&"seventh",&"eighth",&"ninth",&"tenth"];&&&7&&&&&&&&&&&&&&&&&&8&&&&&&&&&&&&&&&&var&oFragment&=&document.createDocumentFragment();&&&9&&&&&&&&&&&&&&&&&&10&&&&&&&&&&&&&&&&for&(var&i=0;&i&&&arrText.&i++)&{&&&11&&&&&&&&&&&&&&&&&&&&var&oP&=&document.createElement("p");&&&12&&&&&&&&&&&&&&&&&&&&var&oText&=&document.createTextNode(arrText[i]);&&&13&&&&&&&&&&&&&&&&&&&&oP.appendChild(oText);&&&14&&&&&&&&&&&&&&&&&&&&oFragment.appendChild(oP);&&&15&&&&&&&&&&&&&&&&}&&&16&&&&&&&&&&&&&&&&&&17&&&&&&&&&&&&&&&&document.body.appendChild(oFragment);&&&18&&&19&&&&&&&&&&&&}&&&20&&&&&&&&&/script&&&&21&&&&&/head&&&&22&&&&&body&onload="addMessages()"&&&&23&&&24&&&&&/body&&&&25&/html&&&&
&6.让特性像属性一样 大部分情况下，HTML DOM元素中包含的所有特性都是可作为属性。 假设有如下图像元素： Js代码 &&img&src&=&"mypicture.jpg"&border=0&/&&&&如果要使用核心的DOM来获取和设置src和border特性，那么要用getAttribute()和setAttribute()方法：&&&alert(oImg.getAttribute("src"));&&&alert(oImg.getAttribute("border"));&&&oImg.setAttribute("src","mypicture2.jpg");&&&oImg.setAttribute("border",1);&&&然而，使用HTML&DOM，可以使用同样名称的属性来获取和设置这些值：&&&alert(oImg.src);&&&alert(oImg.border);&&&oImg.src="mypicture2.jpg";&&&oImg.border&="1";&&&&&
TA的推荐TA的最新馆藏[转]&2013年4月 Web 开发大版内专家分月排行榜第三
2013年5月 总版技术专家分月排行榜第一
2016年7月 总版技术专家分月排行榜第二2016年3月 总版技术专家分月排行榜第二2015年12月 总版技术专家分月排行榜第二2014年8月 总版技术专家分月排行榜第二2014年7月 总版技术专家分月排行榜第二2013年6月 总版技术专家分月排行榜第二
本帖子已过去太久远了，不再提供回复功能。遍历DOM元素的children属性遇到的坑 - 推酷
遍历DOM元素的children属性遇到的坑
问题的引出
关于DOM元素的
属性，以前我只在意它和
childNodes
属性的区别：即
属性只会返回子元素节点集合，而
childNodes
返回的就不止元素节点，还有文本节点等所有子节点集合。这样看来，
似乎是我们获取子元素而舍弃其他类型的子节点的最佳选择，虽然说在IE8-的浏览器下用它还会返回注释节点，但兼容起来也是很简单的。
我们知道，
返回的子元素集合实际上是一个类似数组的HTMLCollection对象，那接下来我们要获取每个子元素自然要遍历它咯，但是一遍历，问题就出来了：
&div id=&ul&&
&div id='i'&&/div&
&div id=&ii&&&/div&
&div&&/div&
o=document.getElementById('ul').
for (i in o) {
console.log(o[i]);
上面的代码使用了
进行遍历，但我们预料中的结果并未出现，以chrome为例，运行结果是这个：
这就是我在前面的
那篇文章中提到过的坑了，其中有两个奇怪的问题：
等几个在数组应该是不可枚举的属性。
把有id的元素重复了两次。
先说一下，上面提到的第一点在各个浏览器里情况都相同，而第二点关于返回的元素是否重复在各浏览器下情况还不同。
我们先讨论第一点，这里要考虑
循环遍历对象时的规则比较奇葩：对象自身和继承到的可枚举属性都会被遍历到。所以为确定多遍历到的内容到底是自身还是原型上的属性，我们来验证一下：
console.log(Object.keys(o)); //[&0&,&1&,&2&,&i&,&ii&]
console.log(Object.getOwnPropertyNames(o)); //[&0&,&1&,&2&,&i&,&ii&]
Object.keys()
方法返回的是可枚举的自身属性的属性名组成的数组，而
Object.getOwnPropertyNames()
返回的是所有自身属性的属性名组成的数组（含可枚举和不可枚举）。在这里我们没有看到
namedItem()
三个属性的身影，由此断定他们不是HTMLCollection对象自身的属性，但既然能被
遍历到那就只能是来自HTMLCollection原型的可枚举属性。我们可以用
Object.getOwnPropertyDescriptor()
来验证其在原型上的可枚举性：
console.log(Object.getOwnPropertyDescriptor(o.__proto__, 'length').enumerable); //true
console.log(Object.getOwnPropertyDescriptor(o.__proto__, 'item').enumerable); //true
console.log(Object.getOwnPropertyDescriptor(o.__proto__, 'namedItem').enumerable); //true
解决了多出来的三个属性的来源，我们再回过头看看为什么会把有id的元素重复了两次。观察用
Object.keys()
方法返回的数组，这两次一次用下标做属性名、一次用id名作属性名。但其实两个属性名指向的是同一个对象：
o[0]===o['i'] //true
o[1]===o['ii'] //true
可见之所以
会把id的元素重复遍历两次，不是因为有id的元素都添加进HTMLCollection对象两次，只是一个元素有了两个属性名而已，这是chrome的情况（我的版本是48.0. m），但放到火狐和IE下结果却还有点所不同：
console.log(Object.keys(o)); //[&0&, &1&, &2&]
console.log(Object.getOwnPropertyNames(o)); // [&0&, &1&, &2&, &i&, &ii&]
o[0]===o['i'] //true
o[1]===o['ii'] //true
console.log(Object.keys(o)); //[&i&, &ii&, &2&]
console.log(Object.getOwnPropertyNames(o)); // [&i&, &ii&, &2&]
o[0]===o['i'] //true
o[1]===o['ii'] //true
可见虽然不同的浏览器返回的HTMLCollection对象都存在有id的子元素有两个属性名的情况，但从
Object.keys(o)
的结果看，火狐和IE对同一元素默认只取一个属性名。所以如果你在火狐或IE运行一开始那段代码，就会发现
遍历时火狐和IE也只对同一元素访问一次，不会像chrome那样重复遍历。然而我们还看到，这两个浏览器间选取的属性名也不同，火狐优先选择下标形式，而IE优先选择id形式，同时由
Object.getOwnPropertyNames(o)
的结果我们还可以窥探出火狐实现选取属性名的机制可能是通过将id形式的属性名设为不可枚举来实现的，至于IE就不清楚了。
这下我们可以得出结论了：
个属性返回的HTMLCollection对象不止能遍历到子元素，还能遍历到来自其原型的
namedItem()
三个属性。而且一旦遍历到的子元素有id，就存在HTMLCollection对象里一个元素会有两个属性名的问题，更让人蛋疼的是各浏览器对这两个属性名的选取各不相同。当然，最根本原因还是因为
属性现在还没被正式纳入标准，在使用这种非标准属性时我们难免遇到一些奇葩的状况。
所以这也告诫我们，如果对一个非标准属性的特点不是特别了解，还是不要轻易使用它，否则出现的问题往往是你难以控制的。但如果你还是觉得
使用起来方便，那在使用时就得谨记这些问题，比如在遍历子元素时最好放弃
循环，老老实实使用基本的for循环去遍历数字索引吧，这样就和遍历数组差不多，不会遍历到那些多出来的属性了。
，最好只用来遍历数组或简单的对象。既要防止那些添加、修改了原型属性的对象遍历出多余的的结果，也要防止类似
这种非标准属性返回一个属性的枚举性不可控的对象的坑。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致