精通HTMLDOM.doc

精通HTML DOM DOM 1. 属性方法 类型/返回类型 说明 nodeName String 节点名称，根据节点的类型而定义 nodeValue string 节点的值，同样根据节点的类型而定义 nodeType string 节点类型，常量值之一 firstChild Node 指向childNodes列表中的第一个节点 lastChild Node 指向childNodes列表中的最后一个节点 parentNode Node 指向节点的父节点，如果已经是根节点，返回null childNodes NodeList 所有子节点的列表，方法item(i)可以访问第i+1个节点 previousSibling Node 指向前一个兄弟节点，如果该节点已经是第一个节点，则返回null nextSibling Node 指向后一个兄弟节点，如果该节点已经是最后一个节点，则返回null hasChildNodes Boolean 当childNodes包含一个或多个节点时，返回true attributes NameNodeMap 包含一个元素特性的Attr对象，仅用于元素节点 appendChild(node) Node 将node 节点添加到childNode的末尾 removeChild(node) Node 从childNodes中删除node节点 replaceChild(newnode,oldnode) ? Node 将childNodes中的oldnode节点替换成newnode节点 insertChild(newnode,refnode) Node 在childNodes中的refnode节点之前插入newnode节点 ? 2、访问节点 有两种方法getELementById 和getElemntsByTagName 举例： var oUl=document.getElementsByTagName_r(ul); var oLi2=oUl[1].getElementsByTagName_r(li); alert(oLi2.length++oLi2[0].tagName++oLi2[1].childNodes[0].nodeVale); ? var oLi=document.getElementByIdx_x(cssLi);注意这个地方的双引号不能丢掉 alert(oLi.tagName+ +oLi.childNodes[0].nodeValue); ? ? 3、节点类型 元素节点的nodeType是1；属性节点的nodeType是1；文本节点的nodeType是1； 注意 script language=javascript function myDOMInspector(){ ?????? var oUl = document.getElementByIdx_x(myList);?? //获取ul标记 ?????? var DOMString = ; ?????? if(oUl.hasChildNodes()){????????????????????????????????????????? //判断是否有子节点 ????????????? var oCh = oUl.childNodes; ????????????? for(var i=0;ioCh.length;i++)????????????????????? //逐一查找 ???????????????????? DOMString += oCh[i].nodeName + \n; ?????? } ?????? alert(DOMString); } /script /head body onload=myDOMInspector() ?????? ul id=myList ????????????? li糖醋排骨/li ????????????? li圆笼粉蒸肉/li ????????????? li泡菜鱼/li ??????? li板栗烧鸡/li ??????? li麻婆豆腐/li ?????? /ul /body ? 在IE下输出正常，但是 FireFox 等其它浏览器还包含众多的空格作为文本节点，因此以上代码仅适用于IE浏览器。 ul id=myList ????????????? li糖醋排骨/lili圆笼粉蒸肉/lili泡菜鱼/lili id=myDearFood板栗烧鸡/lili麻婆豆腐/li ?????? /ul ? 修改成这样才在各个浏览器中兼容（这样就不如jquery） ?下面的代码有一定难度：请多看几次 兼容代码处理方式 ? script language=javascript function