第十三章-HTML-DOM

中国十大品牌IT教育机构本章目标理解DOM的概念理解节点和节点树的概念理解节点的类型，名称，值掌握节点的创建，添加，修改，删除：文档对象模型W3C(万维网联盟)制定的用于访问诸如XML和XHTML文档的标准。的部分/级别W3CDOM被分为3个不同的部分/级别（parts/levels）：核心DOM：用于任何结构化文档的标准模型XMLDOM：用于XML文档的标准模型HTMLDOM：用于HTML文档的标准模型树把文档视为一种包含了多个节点的树结构文档中的每个成分都是一个节点。整个文档是一个文档节点，又称为根节点每个标签是一个元素节点包含在标签中的文本是文本节点标签的每一个属性是一个属性节点注释属于注释节点……树示例!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.0Transitional//ENhtmlheadtitle文档标题/title/headbodyh1我的标题/h1ahref=我的链接/a/body/html的编程接口是通过一套标准的属性和方法来定义的。属性：x.nodeName-x的名称x.nodeValue-x的值x.parentNode-x的父节点x.childNodes-x的子节点x.attributes-x的属性节点方法：x.getElementsByTagName(name)-获取带有指定标签名称的所有元素x.appendChild(node)-向x插入子节点x.removeChild(node)-从x删除子节点教育机构访问节点可以通过三种方法来访问节点：通过使用getElementsByTagName()方法通过循环（遍历）节点树通过利用节点的关系在节点树中导航=document.getElementsByTagName(p);for(i=0;ix.length;i++){document.write(x[i].childNodes[0].nodeValue);document.write(br/);}=document.documentElement.childNodes;for(i=0;ix.length;i++){if(x[i].nodeType==1){//仅处理元素节点，元素节点的类型为1document.write(x[i].nodeName);document.write(br/);}}=document.getElementsByTagName(p)[0].childNodes;y=document.getElementsByTagName(p)[0].firstChild;for(i=0;ix.length;i++){if(y.nodeType==1){document.write(y.nodeName+br/);}y=y.nextSibling;}教育机构节点信息通过节点的属性可获取节点的信息。三个重要的DOM节点属性是：nodeNamenodeValuenodeType属性获取节点的名称。nodeName是只读的元素节点的nodeName与标签名相同属性节点的nodeName是属性的名称文本节点的nodeName永远是#text属性获取或设置节点的值。元素节点的nodeValue是undefined文本节点的nodeValue是文本自身属性节点的nodeValue是属性的值属性规定节点的类型。nodeType是只读的。节点类型类型数值元素1属性2文本3注释8文档9教育机构属性节点属性节点比较特殊，它只属于元素节点，但不包含在元素节点的下级子节点列表之内。要获取元素的所有属性，可以访问元素节点的attributes属性从而得到属性节点列表。而属性节点列表支持getNamedItem()方法获得特定名称的属性节点对象，也可使用索引对属性节点列表进行遍历。教育机构属性节点示例!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.0Transitional//ENhtmlheadtitlenewdocument/titlemetaname=generatorcontent=editplus/metaname=authorcontent=suhongwei/scripttype=text/JavaScriptfunctiongetAttributesOfElement(){……}/script/headbodyinputtype=buttonname=btnvalue=访问元素的属性onclick=getAttributesOfElement();//body/htmlfunctiongetAttributesOfElement(){varfirstmeta=document.documentElement.getElementsByTagName(meta)[0];varatts=firstmeta.attributes;alert(atts.length);alert(atts.getNamedItem(name).nodeValue);alert(atts.getNamedItem(content).nodeValue);for(vari=0;iatts.length;i++){alert(属性名：+atts[i].nodeName+属性值：+atts[i].nodeValue);}}中国十大品牌IT教育机构创建节点使用document文档对象的一系列方法可以创建各种节点。方法描述createElement创建元素节点，参数为元素名称即标签名，返回元素节点。createTextNode创建文本节点，参数为文本本身，返回文本节点。createAttribute创建属性节点，参数为属性名称，返回属性节点。教育机构添加节点新创建的节点需要与其他已存在的节点组织关系，才能让它真正属于文档树。方法描述appendChild在当前节点内部最后一个子节点后面添加新的子节点，参数为新的子节点。insertBefore在当前节点内部指定的的子节点之前添加新的子节点，第一个参数为新的子节点，第二个参数为当前节点内部指定的子节点。insertAfter在当前节点内部指定的的子节点之后添加新的子节点，第一个参数为新的子节点，第二个参数为当前节点内部指定的子节点。setAttributeNode在当前元素节点设置属性节点，要求调用此方法的节点的类型为元素类型，参数为要设置的属性节点。教育机构创建节点与添加节点示例!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.0Transitional//ENhtmlheadtitle使用DOM创建并添加节点/titlescripttype=text/JavaScriptfunctioncreateAndAddNode(){……}window.onload=createAndAddNode;/script/headbodydiv/div/body/htmlfunctioncreateAndAddNode(){varcontainer=document.body.getElementsByTagName(div)[0];varpEle=document.createElement(p);vartxtOfP=document.createTextNode(这是段落文字);pEle.appendChild(txtOfP);container.appendChild(pEle);varaEle=document.createElement(a);vartxtOfA=document.createTextNode(博客园);aEle.appendChild(txtOfA);varattOfA=document.createAttribute(href);attOfA.nodeValue=(attOfA);container.appendChild(aEle);}教育机构修改节点改变节点一般指改变元素内部的文本，或改变元素的属性值。这两种情况都可以在访问到文本节点或属性节点后，为其nodeValue赋值来实现更改。对于后者，还可以在元素节点上调用setAttribute方法来实现属性值的改变。改变节点/titlescripttype=text/JavaScriptfunctionchangeSize(){//……}functionchangeText(){//……}/script/headbodyformlabelid=lbl_1for=txt_1多行文本框的标签文字/labeltextareaid=txt_1/textareainputtype=buttonname=btnvalue=改变多行文本域的尺寸onclick=changeSize();/inputtype=buttonname=btnvalue=改变标签的文字onclick=changeText();//form/bodyfunctionchangeSize(){vartarget=document.getElementById(txt_1);targe