Html树

一、DOM简介。

DOM是W3C为访问XML和XHTML等结构化文档而建立的标准。

W3C文档对象模型(DOM)是一个平台和语言中立的接口，它使程序和脚本能够动态地访问和更新文档的内容、结构和风格。

核心DOM:任何结构化文档的标准模型。

XML:XML文档的标准模型。是获取、更改、添加或删除XML元素的标准。

HTML:HTML文档的标准模型。定义所有HTML元素的对象和属性以及访问它们的方法(接口)。

第二，DOM节点。

根据DOM规范，文档中的每个组件都是一个节点。DOM的规定：

整个文档是一个文档节点，也称为根节点。

每个标签都是一个元素节点。

标签中包含的文本是一个文本节点。

标签的每个属性都是一个属性节点。

注释属于注释节点。

2.1DOM接口及其属性和方法。

DOM将文档模拟为一系列节点接口。您可以通过JavaScript或其他编程语言访问节点。正确

DOM的编程接口是由一组标准属性和方法定义的。

2 . 1 . 1 om属性。

典型的DOM属性：

X.x.nodeName:x的名称。

x.nodeValue:x的值。

x.parentNode:x的父节点除了根节点外只有一个父节点。

x . child node 3360 x的子节点，可以有多个子节点。

x . attributes 3360 x的属性节点集合，可以有多个属性。

其中x是节点对象。

2 . 1 . 2 om方法。

典型的DOM方法：

x . getelementsbytagname(name):获取具有指定标记名的所有元素。

X.appendChild(节点):将子节点插入X.

X.removeChild(节点):从X中移除子节点.

示例：

//获取文档标题document . getelementsbytagname(' title ')[0]的文本内容。childnode [0]。nodevalue2.1.3访问节点。

方法1:通过使用getElementsByTagName()方法。

方法二：循环遍历节点树。

方法三：利用节点之间的关系在节点树中导航。

2.1.4节点信息：

NodeName :获取节点的名称，该名称是只读的。

节点值：获取或设置节点的值。

节点类型：节点的类型，只读。1代表元素，2代表属性，3代表文本，8。

征求意见，9份文件。

第三，节点操作。

3.1创建节点。

创建元素(标记名):创建元素节点。

文本节点(Text):创建一个文本节点。

创建属性：创建一个属性节点。

3.2添加节点。

新创建的节点需要组织与其他现有节点的关系，这样才能真正属于文档树。

AppendChild(node)在当前节点内部的最后一个子节点之后添加一个新的子节点，参数是新的子节点。

InsertBefore(newNode，Node)在当前节点内的指定子节点之前添加一个新的子节点。第一个参数是新的子节点，第二个参数是当前节点内的指定子节点。

InsertAfter()在当前节点内的指定子节点后添加一个新的子节点。第一个参数是新的子节点，第二个参数是当前节点内的指定子节点。

SetAttributeNode()设置当前元素节点中的属性节点，邀请调用此方法的节点类型为元素类型，需要设置的属性节点为参数。

示例：

html healtheta http-equiv=' Content-Type ' Content=' text/html；Charset=UTF-8'title使用DOM创建和添加节点/title脚本类型=' text/JavaScript '函数createnandaddnode(){//div标记元素节点varcontainer=document . body . getelementsbyname(' div ')[0]；//创建一个元素节点对象，元素名为标签名pvarpele=document . Create element(' p ')；//创建一个文本节点对象，文本内容为参数值vartxt of p=document . createtextnode('这是段落的文本')；//在元素节点内部增加一个文本节点p，就是段落的文本Pele . appendchild(txtOfP)；//在div元素节点后添加一个新的子节点。Divp这是段落/divcontainer.appendChild(pEle)的文本；//创建超链接标签节点vara ele=document . create element(' a ')；//创建一个文本节点var txt ofa=document . createtextnode(' blog park ')；//在元素节点中增加一个文本节点，一个blog park/aaele . appendchild(txtOfA)；//创建一个href属性节点var attrofa=document . create attribute(' href ')；//将href属性节点设置为其属性值at trofa . node value=' http 3360 www . cn blogs.com '；//将属性节点添加到超链接元素节点，即设置a元素标签的属性节点aele . setattributenode(attrOfA)；//将元素节点a添加到div中的container.appendChild(aEle)中；}//加载浏览器窗口时调用此方法。onload=createandaddnode/script/head dydiv/div/body/html 3.3修改节点。

更改节点通常意味着更改元素内部的文本或元素的属性值。在这两种情况下，在访问文本节点或属性节点后，您可以为其节点值分配一个值来实现更改。对于后者，你也可以。

在元素节点上调用setAttribute方法来更改属性值。

示例：

html healtheta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 ' title script type=' text/JavaScript ' functionchangesize(){ var target=document . getelementbyid(' txt _ 1 ')；//将列的属性值设置为50target.setattribute ('cols '，' 50 ')；//将该行的属性值设置为6。首先访问属性节点集合，然后通过getNamedItem，target . attributes . getNamedItem(' row ')定位属性名称。nodevalue=' 6} function changettext(){ var target=document . getelementbyid(' LBL _ 1 ')；//首先访问这个元素节点的子节点。子节点的数量可以是多个，因此数组下标用于访问指定的元素。然后修改其价值目标。childnodes [0]。nodeValue='你的简历：'通过node value；}/script/headsdyformaction=' label id=' LBL _ 1 ' for=' txt _ 1 '多行文本框的标签文本/label textareid=' txt _ 1 '/textareinputtype=' button ' name=' BTN ' value='更改多行文本字段' onclick='的大小。/input type=' button ' name=' BTN ' value='更改标签的文本' onclick=' changeText()；//表单/正文/html3.3删除节点。

删除节点一般指删除元素节点中包含的子元素或文本，也可以删除元素节点中包含的属性节点。

html healtheta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8' titlescript节点，具有DOM/titlescript类型=' text/JavaScript '函数doremovenode () {//label标记元素节点vartargetlbl=document . getelementbyid(' LBL _ 1 ')；//从标签元素节点中删除第一个子节点target LBL . remove child(target LBL . first child)；//Document元素，通过访问Document元素集合，通过指定position元素[0]得到多行文本字段vartageara=Document . Document element . getelementsbytagname(' textarea ')；//文档中的第一个表单标记元素节点是vartagetform=document . document element . getelementsbytagname(' form ')[0]；//删除textareagetform。文档中第一个表单标签中的removechild (tagetarea );}/script/headsdyformlabel id=' LBL _ 1 ' for=' txt _ 1 '多行文本框的标签文本/label textarea id=' txt _ 1 ' rows=' cols=' '/textarea input type=' button ' name=' BTN ' value=' delete node ' on click。//表单/正文/html iv。总结。

DOM是内存中文档的树形结构，称为DOM树。DOM是访问W3C制定的文档的标准方法和属性。它被称为DOM接口。文档中的每个数据都表示为树结构中的一个节点。由所有节点组成的树结构称为节点树或DOM树。节点的类型很多，比如元素节点、属性节点、文本节点、根节点等。节点有名称和值，但不同类型的节点有不同的含义。

createElement()方法用于创建元素节点，createAttribute()方法用于创建属性节点，createTextNode()方法用于创建文本节点，子元素节点或文本节点被添加到元素节点中。可以使用appendChild()方法。还有insertAfter()和insertBefore()方法，用于在特定节点之前和之后插入新节点。需要注意的是，将属性节点添加到元素节点的方法是setAttributeNode()方法。

要修改文本节点的值或更改属性节点的值，请使用该节点的节点值属性。

移除节点使用removeChild()方法。

关于JavaScript使用HTML DOM操作文档的方法，边肖就给大家介绍这么多，希望对大家有所帮助！