html文档中怎么区分节点对象节点类型,javascript DOM中的节点层次和节点类型概述...

针对JS高级程序设计这本书，主要是理解概念，大部分内容源自书内。写这个主要是当个书中的笔记加总结

存在的问题请大家多多指正！

DOM

文档对象模型，针对HTML和XML文档的一个API。描绘了一个层次化的结点树，循序开发人员添加，移除修改页面上的一部分。

1节点层次

DOM把文档描绘成一个由多层节点构成的结构。节点有不同的类型。节点之间的关系构成了层次。

文档节点是每个文档的根节点(Document节点)，html节点被称为文档元素。文档元素是最外层的元素，文档中的其他所有元素都包含在文档元素中。HTML页面中，文档元素始终都是html元素。

1.1 Node类型

DOM1级定义了一个node结构，该结构将由DOM中的所有节点类型实现。这个node接口在javascript中是作为Node类型实现的。除了ie以外所有的浏览器都可以访问到这个类型。

javascript中的所有节点类型都继承自node类型，因此节点们都共享者相同的基本属性和方法。

每个节点都有一个nodetype属性，用于表现节点的类型，节点类型有在Node类型的中定义的12个数值来表示，任何节点都必须是其中之一。

NodeType

Named Constant

1

ELEMENT_NODE

2

ATTRIBUTE_NODE

3

TEXT_NODE

4

CDATA_SECTION_NODE

5

ENTITY_REFERENCE_NODE

6

ENTITY_NODE

7

PROCESSING_INSTRUCTION_NODE

8

COMMENT_NODE

9

DOCUMENT_NODE

10

DOCUMENT_TYPE_NODE

11

DOCUMENT_FRAGMENT_NODE

12

NOTATION_NODE

1.1.1 nodeName和nodeValue属性

节点类型

nodeName 返回

nodeValue返回

1

Element

元素名

null

2

Attr

属性名称

属性值

3

Text

text

节点的内容

4

CDATASection

cdata-section

节点的内容

5

EntityReference

实体引用名称

null

6

Entity

实体名称

null

7

ProcessingInstruction

target

节点的内容

8

Comment

comment

注释文本

9

Document

document

null

10

DocumentType

文档类型名称

null

11

DocumentFragment

document 片段

null

12

Notation

符号名称

null

1.1.2 节点间关系

节点关系的属性

childNodes

firstChild

lastChild

parentNodes

nextSibling

previousSibling

owenerDocement

hasChildNodes

其中childNodes会返回一个NodeList的动态对象，虽然不是Array类型的实例，同样也可以用item()方法，也有length属性。这个NodeList的列表中每个节点都是彼此的兄弟节点，可以调用nextSibling,previousSibling属性访问他们的兄弟节点。

ownerDocument是直接顶到顶，去找顶端的文档节点。

1.1.3 操作节点

节点操作的方法：

appendChild()

一个参数，你新加入的节点，默认放到最后

如果这个新加入的节点在这个父节点中存在，则将她从原来位置删除然后添加到末尾

insertBefore()

两个参数，要插入的节点和作参照的节点

被插入的节点会变成参照节点的前面的同胞节点

若参照物是null，则和appendChild一样

第二个参数可以是element.firstChild或者element.lastChild，这样可以插入element节点的首节点或者最后一个节点的前一个节点

replaceChild()

两个参数，要插入的节点和被替换的节点

返回值是被替换的节点，并从文档中剔除

1.1.4 其他方法

cloneNode()

参数只有一个布尔值

true表示深层次复制，复制子节点树

false表示浅层复制，只复制节点本身，复制后返回接点归文档所有，但她没有父节点，是孤儿，可以通过appendChild(),insertBefore()，replaceChild()等把他插进去

他不会复制节点的JS属性和事件，IE会出BUG，所以最好复制之前移除BUG

1.2 Document类型

document对象表示整个HTML界面，而且document对象是window对象的一个属性，所以可以直接调用

1.2.1文档子节点

只有一个html元素

childNodes[0],firstChild,dicumentElement都表示一个值，指向html元素

document的属性

documentElement 指向html元素

body 指向body元素

doctype 指向doctype属性

1.2.2 文档信息

document关于自身信息的属性：

title 包含着title元素中的文本

URL 完整的URL

domain 网页的域名，三个关于URL的属性只有他可以修改，但是不能设置为URL不包含的域

refierrer 链接到当前页面的URL ，没有则返回NULL

1.2.3 查找元素

取得元素的对象方法：

getElementById()

只接受一个参数，区分大小写

如果有多个一样的ID则只返回第一个

getElementByTagName()

接受一个参数，元素的标签名

在HTML中返回的是HTMLCollection对象，也是一个动态集合，和NodeList非常相似，具有item()方法

在参数为*时返回所有的标签

HTMLCollection对象

item() 可以运用[]的方法在其中加入name属性的字符串返回那一项

nameItem() 参数可以添加其中的name然后返回HTMLCollection中的name为参数的那一项

getElementByName()

只能找到带有name特性的子节点

同样返回的事HTMLCollection对象

nameItem()只返回第一个HTMLCollection对象，因为HTMLCollection对象里面的项的name都相同

1.2.4 特殊集合

document还有一些特殊的集合，这些集合都是HTMLCollection对象

anchors

applets

forms

images

links

1.2.5 文档写入

write()

writelen()

上两个方法都是接受一个字符串参数，即要写入到输出流中的文本。ln回家一个换行符，内容都原样加入

加入的时候要小心，因为本身JS脚本就带了对script标签，所以转义的时候容易把JS自带的开头和算到一起，所以就结束了。所以要变成

open()

close()

1.3 Element类型

Element类型用来表示文档中的元素，提供了对元素标签名、子节点及特性的访问

nodeName属性

tagName属性

上两个会返回元素的标签名，他俩返回的是相等的.tagName主要是为了清晰地表达。

1.3.1 HTML元素

HTML元素都有HTMLElement类型表示，不是通过这个类型，也是通过他的子类型来表示。HTMLElement类型直接继承Element并添加了一些属性，这些在HTML文档上都有体现

id

title

lang 元素内容的语言代码，较少使用

dir 语言的方向 ltr 或者 rtl

className

1.3.2 操作特性

三个主要方法

getAttribute()

传递给方法的特姓名与是实际的特姓名应该是一致的，class不要填className

同样可以取到自定义特性

特性不需要区分大小写

自定义特性根据H5规定需要加data-前缀

访问style特性值会返回CSS文本，而直接访问特性值得属性来访问会返回一个对象

访问onclick这类时间是会返回相应代码的字符串，而直接访问.属性这样的会被赋值

setAttribute()

接受两个参数，特姓名和特性值

如果特性名已存在，则这个操作将会覆盖原来的特性值

可以设置自定义属性，但是特姓名会被转为小写

removeAttribute()

传一个参数那就是特姓名，执行完了就会删除他

1.3.3 attributes 属性

Element类型是使用attributes属性的唯一一个DOM节点类型。attritubutes属性中包含一个NameNodeMap ，与NodeList类似，也是一个动态集合。下面是attributes对象的方法

getNameItem()：返回nodeName属性等于参数的节点

removeNamedItem() : 删除列表中nodeName等于参数的节点

setNameItem(node) : 向列表里添加节点，一节点的nodeName属性为索引

item(pos) :返回位于数字pos位置处的节点

这个attributes属性费老劲了，除了遍历能用上，感觉别的一点用不上啊，直接getAttributes(), setAttribute(), removeAttribute() 就完事了，你在这墨迹啥呢。

function outputAttritubes(element){

var pairs = new Array(),

attrName,

attrValue,

i,

len

for(i = 0, len = element.attributes.length; i < len; i++ ){

attrName = element.attributes[i].nodeName

attrValue = element.attributes[i].nodeValue

pairs.push(attrName + '=\''+attrValue + '\'')

}

1.3.4创建元素

document.creatElement()

里面可以放标签元素，返回的就是一个空的元素，在ie里也可以放一些HTML语言，直接创建出来

1.3.5 元素的子节点

在除了IE里，文本节点也算上，所以空格也算是文本节点。所以在chilNodes属性中就不会显示正确的节点。如果需要对element类型的节点进行操作的话最好添加一个element.childNodes[i].nodeType == 1来判断。否则会默认算上文本节点。

1.4 Text类型

文本节点由Text类型表示，包含的是可以按照字面解释的纯文本内容。纯文本中可以包含转移后HTML字符，但是不能包含HTML代码，TEXT节点的属性：

nodeValue

data

都可以访问text节点中包含的文本。

length：保存着字符的数目

下面的方法可以对文本节点进行操作

appendDate(text)：将text添加到文章的末尾

deleteDate(offset, count)： 从offset指定的位置开始删除count个字符

insertData(offset, text)： 从offset指定的位置插入text

replaceData(offset, count, text)：用text替换从offset位置指定到的位置offset+count的位置

splitText(offset)：从offset指定的位置将文本节点分成两个文本节点

substringData(offset, count)： 提取从offset指定的位置开始到offset_count为止的字符串

1.4.1 创建文本节点

doucument.createTextNode()

参数是要插入里面的文本，可以按照HTML格式进行编码

如果一个元素中有多个文本子节点，则让他们连接起来，中间没有空格

1.4.2 规范化文本节点

normalize()：在父元素中调用，则会将所有文本节点合并成一个及诶单，节点的nodeValue 是每个子节点相加

1.4.3 分割文本节点

splitText() 方法 将从第参数个开始分割，然后返回一个新的文本节点包含剩下的内容，该文本节点与原来节点的parentNode相同

标签：javascript,DOM,元素,文档,类型,文本,节点,属性

来源： https://www.cnblogs.com/wangzirui98/p/10826466.html