javascript DOM中的节点层次和节点类型概述

Posted 2021-11-28 wangzirui98

针对JS高级程序设计这本书，主要是理解概念，大部分内容源自书内。写这个主要是当个书中的笔记加总结
存在的问题请大家多多指正！
因为DOM这方面的对象方法操作性都特别强，但是逻辑很简单，所以就没有涉及到实际的代码。
另外这篇不包括DOM2,DOM3的内容

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自带的开头和算到一起，所以就结束了。所以要变成</script>
• 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相同