JavaScript中DOM节点的访问、创建、修改和删除

DOM是文档对象模型的缩写。文档模型是用树节点表示XML或HTML的文档。使用DOM方法和属性，您可以访问、修改和删除页面上的任何元素，还可以添加一个元素。DOM是一个独立于语言的API，可以用任何语言实现，包括Javascript。看下面的课文。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www . w3 . org/TR/XHTML L1/DTD/XHTML L1-Strict . DTD ' html Head title my page/title/Head p class=' opener '第一段/p PEM第二段/em第二段/p p p id=' closer ' final/p/body/html我们来看第二段。

Pemsecond/em段落/p您可以看到这是一个p标签。它包含在正文标签中。所以body是p的父节点，p是子节点。第一段和第三段也是body的子节点。他们都是第二段的兄弟节点。em标签是第二个段p的子节点，所以p是它的父节点。父子关系可以像树一样描述这种关系。因此，它们被称为DOM树)。核心DOM和HTML DOM。我们已经知道DOM可以描述HTML和XML文档。事实上，HTML文档是XML文档，但它们更标准化。因此，作为DOM Level 1的一部分，核心DOM规范适用于所有XML文档，而HTML DOM规范扩展了核心DOM。当然，HTML DOM不能应用于所有的XML文档，而只能应用于HTML文档。让我们来看看核心DOM和HTML DOM的构造函数。构造函数关系

访问DOM节点在我们想要验证表单或更改图片之前，我们需要知道如何访问元素。获取元素的方法有很多。文档节点通过文档，我们可以访问当前文档。我们可以通过firebugs检查文档的属性和方法。的所有节点都具有节点类型、节点名称和节点值的属性。让我们看看什么是节点类型的文档。

document.nodeType//9有12种节点类型。文件是9。常用的有element (element:1)、attribute (attribute:2)和text (text:3)。节点也有名称。对于HTML标签。节点名是标签名。文本节点的名称是#text。文档节点的名称是#document。节点也有值。对于文本节点，该值是文本。如果文档的值是nulldocumentElementXML，将有一个根节点来打包文档。对于HTML文档。ROOT节点是一个html标记。访问根节点。您可以使用documentElement的属性。

document.documentElement//html document . document element . nodetype；//1 document . document element . nodename；//HTML文档. document element . tagname；//对于具有相同元素、nodeName和tagName的子节点，我们可以使用以下方法来确定是否包含子节点。

document . document element . haschildnodes()；//真HTML有两个子节点。

document . document element . child nodes . length；//2 document . document element . child nodes[0]；//head document . document element . child nodes[1]；//body也可以通过子节点访问父节点。

document . document element . child nodes[1]。parentNode//html我们将body的引用赋给一个变量。

var BD=document . document element . child nodes[1]；BD . child nodes . length；//9我们来看看身体的结构。

body p class=' opener '第一段/p pemsecond/em段/p p id='closer'final/p！-就这样- /body为什么子节点数是9？首先，有四个p和一个注释，总共四个。这4个节点包含3个空白节点。只有七个。正文和第一个p之间的第8个空白节点。第9个是注释和/body之间的空白节点。总共有9个节点。因为属性的第一个节点是空白节点，所以第二个节点是第一个p标记。

BD . child nodes[1]；//p class='opener '查看它是否有属性。

bd.childNodes[1]。hasAttributes()；//true也可以查看属性个数。

BD . child nodes[1]. attributes . length；//1 //可以使用索引和名称来访问属性，也可以使用getAttribute方法。bd.childNodes[1]。属性[0]。nodeName//类bd.childNodes[1]。属性[0]。nodeValue//开启器bd.childNodes[1]。属性['class']。nodeValue//开启器bd.childNodes[1]。getAttribute(' class ')；//开启器访问标签中的内容。让我们看看第一个标签p，您可以使用textContent属性访问它。注意IE浏览器中不存在textContent，请用innerText替换，结果是一样的。

bg.childNodes[1]。textContent//“第一段”有另一个属性innerHTML。这不是一个DOM规范。但是主流浏览器支持这个属性。它返回HTML代码。

bg.childNodes[1]。innerHTML//“第一段”没有html代码，因此结果与text content(ie中的innerText)相同。看看第二段中包含HTML代码的标签。

bd.childNodes[3]。innerHTML//'emsecond/em段落' bd.childNodes[3]。textContent//第二段另一种方法可以获取文本节点，然后获取nodeValue属性。代码如下。

BD . child nodes[1]. child nodes . length；//1子节点数BD。childnodes [1]。childnodes [0]。nodename//节点名# textbd。childnodes [1]。childnodes [0]。nodevalue//节点值第一段快速访问DOM通过childnodes、parentnode、nodename、node value和属性，可以访问文档的任意节点。然而，实际上，文本节点相当烦人。如果文本更改，可能会影响脚本。而且如果DOM树足够深，访问起来确实不方便。幸运的是，我们可以以更方便的方式访问节点。这些方法是：

Getelementsbyname()getelementsbyname()getelementsbyid()首先，getelementsbyname()通过标记名获取html元素的集合。例子如下

document . getelementsbytagname(' p ')。长度；//3因为是集合，所以我们可以以数组下标的形式或者通过item方法来访问。相比之下，建议使用数组访问方法。更简单。

document . getelementsbytagname(' p ')[0]；//p class=' opener ' document . getelementsbytagname(' p ')。项目(0)；//结果同上。document . getelementsbytagname(' p ')[0]。innerhtml//第一段访问元素的属性，可以使用attributes集合。但是更简单的方法是将其作为属性直接访问。看一个例子。

document . getelementsbytagname(' p ')[2]。id；//更近需要注意的是，类属性不能正常使用。使用类名。类是javascript规范中的保留字。

document . getelementsbytagname(' p ')[0]。className//开启器我们可以通过以下方式访问页面的所有元素。

span style=' color: # ff0000'document . getelementsbytagname(' * ')。长度；//9/span注意：早期版本的IE不支持上述方法。它可以由document.all替换.IE7已经支持它，但它返回所有节点，而不仅仅是元素节点。Sibs，body，first，last child next sibling和previousSibling是访问DOM的两种便捷方式。用于访问相邻节点的。例子如下

var para=document . getelementbyid(' closer ')para . next sibling；//' \ n ' para . previoussible；//' \ n ' para . previoussibling . previoussibling；//p para . previoussibling . previoussibling . previoussibling；//' \ n ' para . previoussibling . previoussibling . next sibling . next sibling；///p id='closer' body用于访问body元素的body。

document.body//body firstChild和lastChild。FirstChild与childNodes[0]相同。lastChild与child nodes[child nodes]相同。长度-1]。遍历DOM通过上面的研究，我们可以编写一个函数来遍历DOM。

函数WalkDom(n){ do { alert(n)}；if(n . haschildnodes()){ walk DOM(n . first child)} } while(n=n . nextsibling)} walk DOM(document . body)；//测试修改节点我们来看看DOM节点的修改。首先获取要更改的节点。

var my=document . getelementbyid(' closer ')；更改这个元素的属性非常容易。我们可以改变innerHTML。

my.innerHTML=' final//final因为innerHTML可以写成HTML，所以让我们修改html。

my . InnerHTML=' Emmy/em final '；//emmy/em fnal em标签已经成为dom树的一部分。我们可以测试一下。

my.firstChild//em my . first child . first child；//my我们也可以通过nodeValue改变这个值。

my . first child . first child . node value=' your '；//您的修改样式大多数修改节点可能是修改样式。元素有一个样式属性来修改样式。样式和css的属性是一一对应的。代码如下

my.style.border='1px纯红'；很多CSS属性都有破折号('-')，比如填充-top，这在javascript中是非法的。在这种情况下，您必须省略曲折，并大写第二个单词的第一个字母。规格如下。左边距变为左边距。其余的可以推断出来

my . style . font weight=' bold '；我们也可以修改其他属性，不管它们是否被初始化。

my.align=' rightmy.name=' mynamemy.id='进一步'；我的；//p id='进一步' align=' right ' style=' border : 1px纯红；' font-weight : bold；'创建节点

要创建新节点，可以使用createElement和createTextNode。如果新节点完成，可以使用appendChild()将该节点添加到DOM树中。创建一个元素p并设置innerHTML属性。

var myp=document . create element(' p ')；myp.innerHTML='又一个'；创建元素后，您可以随意修改和添加属性。

Myp.style.border=' 2px点蓝色'接下来，可以使用appendChild向DOM树中添加新节点。

使用dom的document.body.appendChild(myp)的方法和innerHTML的方法确实很简单，我们可以使用纯DOM的方法来实现上面的功能。

创建一个新的文本节点(另一个)创建一个新的段落，并将该文本节点添加到该段落中。将段落添加到正文//创建p var myp=document . create element(' p ')；//创建一个文本节点var myt=document.createtextnode('多一个段落')myp . appendchild(myt)；//创建一个STRONG元素var str=document . create element(' STRONG ')；str . appendchild(document . createtextnode(' bold '))；//将STRONG元素添加到p中的myp.appendChild(str)中；//将p元素添加到BODY document . BODY . appendchild(myp)中；//结果Ponemore paragraph strong bold/strong/p cloneNode()创建新节点的另一种方法是我们可以使用cloneNode来复制节点。CloneNode()可以传入一个布尔参数。如果为真，则是深度复制，包括其子节点，为假，只复制自身。首先获取要复制的元素。

var El=document . getelementsbytagname(' p ')[1]；//PEM second/EMP段落/p暂时不要使用深度复制。

document . body . appendchild(El . clonenode(false))我们发现页面没有改变，因为只复制了元素p。效果如下。

document . body . appendchild(document . create element(' p '))；如果使用深度复制，将复制p以下的所有子节点。包括文本节点和EM元素。

文件。尸体。appendChild (el。clonenode (true)) insertbefore()使用appendchild，这意味着在末尾添加元素。而insertBefore方法可以更精确地控制插入元素的位置。

element node . insert before(new _ node，existing _ node)实例。

document . body . insert before(document . createtextnode(' boo！)，document . body . first child)；这意味着创建一个新的文本节点，并将其用作主体元素的第一个节点。删除节点

要从DOM树中移除一个节点，我们可以使用removeChild()。让我们看看要被操纵的HTML。

body p class=' opener '第一段/p pemsecond/em段/p p id='closer'final/p！-就这样- /body看看下面的代码，删除第二段。

var myp=document . getelementsbytagname(' p ')[1]；var removed=document . body . remove child(myp)；被删除的节点就是被删除的节点。以后还可以使用这个删除的节点。我们也可以使用replaceChild()方法。这个方法是删除一个节点并用另一个节点替换它。最后一次节点删除操作后，结果如下。

body p class='开瓶器'第一段/p p id='closer'final/p！-就这些了-/身体我们来看看replaceChild的使用。我们把上一个删除节点来替代第二个p

var replaced=文档。尸体。替换子项(已删除，p)；和removeChild返回一样已替换。就是移除的节点。现在结果为

body p class='开瓶器'第一段/p pemsecond/em段/p！-就这些了-/身体