针对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相同
原文地址：https://www.cnblogs.com/wangzirui98/p/10826466.html