1.什么是DOM？
DOM(文档对象模型)是HTML和XML文档的API，通过它可以改变文档。
这种说法很官方，你一定还不明白。
举个例子:我们有一段HTML，那么如何访问第二层的第一个节点，如何把最后一个节点移到第一个节点？
DOM是定义如果做类似操作应该做什么的标准。例如，getElementById用于访问节点，insertBefore用于插入节点。
浏览器加载HTML时，会生成相应的DOM树。
简而言之，DOM可以理解为访问或操作各种HTML标签的实现标准。
对于一个HTML，文档节点Document(不可见)是它的根节点，对应的对象是Document对象(严格来说是一个子类HTMLDocument对象，下面单独介绍文档类型时会指出)。
换句话说，有一个文档节点Document，然后它有子节点，比如through
document . getelementsbytagname(" HTML ")，并获取元素节点类型的元素HTML。
每一个HTML标记都可以用一个相应的节点来表示，例如:
HTML由元素节点表示，注释由注释节点表示，文档类型由文档类型节点表示，等等。
总共定义了12种类型的节点，这些类型都是从节点类型继承而来的。
所以先说节点类型，因为这个类型的方法会被所有节点继承。
二。节点类型(基类，所有节点都继承了它的方法)
Node是所有节点的基类型，所有节点都继承自它，所以所有节点都有一些共同的方法和属性。
先说节点类型的属性。
首先，它是nodeType属性，用于指示节点类型，例如:
document.nodeType; // 返回 9 ，其中document对象为文档节点Document的实例这里9代表DOCUMENT_NODE的意思，可以通过NODE查看节点对应的编号。文档_节点
document.nodeType === Node.DOCUMENT_NODE; // true至于有哪些节点，每个节点对应的编号是多少，问Google就行了。反正常用的是元素节点元素(对应数字是1)和文本节点文本(对应数字是3)。
那么nodeName和nodeValue是常用的。
对于元素节点，nodeName是标记名，nodeValue是null。
对于文本节点nodeName为“# text”(在Chrome中测试)，nodeValue是实际值。
每个节点还有一个childNodes属性，这是一个非常重要的属性，保存着这个节点的所有直接子元素。
调用childNodes会返回一个NodeList对象，它非常像一个数组，但是有一个关键点。它是动态查询的，也就是每次调用都会查询DOM结构，所以需要谨慎使用，注意性能。
您可以使用下面的数组表或item方法来访问childNodes。
然后，每个节点都有各种属性，以便它们可以相互访问，如下图所示。
有用的方法和属性:
1、hasChildNodes()
如果包含childNodes，则返回true，这比查询childnodes的长度简单。
2、所有者文档
返回文档节点的引用(即html中的文档对象)
然后介绍节点类型的常用方法。
appendChild()方法可以将一个节点添加到该节点的childNodes的末尾。值得注意的是，如果文档中已经存在这个节点，那么原来的节点会被删除，感觉像是移动节点。
insertBefore()方法接受两个参数，一个是插入的节点，另一个是引用的节点。如果第二个参数为null，insertBefore和appendChild具有相同的效果。否则，该节点将被插入到引用节点之前。这里需要注意的是，如果第二个参数不为null，那么插入的节点不能是现有的节点。
replaceChild()方法可以替换一个节点，接受两个参数:要插入的节点和要替换的节点。返回被替换的节点。
RemoveChild()删除节点。这里有一个共同的要求。例如，我有一个节点#waste-node，那么我如何移除它？
var wasteNode = document.getElementById("waste-node");wasteNode.parentNode.removeClhid(wasteNode); // 先拿到父节点，再调用removeClild删除自己我们在这里暂停一下。不知道大家注意到没有，上面的方法都是对某个节点的子节点进行操作。也就是说，必须找到parentNode(通过父节点)才能操作。
接下来说说复制节点的方法:
clone node()；复制节点并接受参数true或false。如果为真，则复制该节点及其子节点。如果为false，则是复制节点本身(复制的节点将没有子元素)。此方法返回复制的节点。如果需要操作的话，需要使用上面提到的四种方法将这个节点放到html中。
至此，已经介绍了节点类型的常见属性和方法。如开头所述，所有节点类型都继承自节点类型，因此这些方法对所有节点都是通用的。
三。文档类型
在什么是DOM的开头，提到了文档类型。其实这个类型最重要的是它的子类HTMLdocument有一个实例对象文档。这个文档对象是我们最常用的对象之一。
文档对象安装在窗口对象上，因此您可以在浏览器中直接访问文档。
和往常一样，先说文档对象的属性，后面再说它的方法。
文档对象的一些属性
Document.childNodes继承了上面提到的节点类型，可以返回文档的直接子节点(通常包括文档声明和html节点)。
Document.documentElement可以直接获取html节点的引用(相当于
document . getelementsbytagname(" html ")[0]).
对document.body正文节点的引用
可以修改文档标题页的标题，这将更改浏览器选项卡上的名称。
文档的url。URL页面。
Document.referrer获取referrer，也就是打开这个页面的页面地址，对于源统计很有用。
Document.domain获取域名，可以设置，但通常只能设置为不包含子域的情况，在部分子域跨域的情况下有效。
接下来，介绍两种常见的方法。
GetElementById和getElementsByTagName
GetElementById，传入Id，获取元素节点。里面的参数区分大小写(不区分IE8)。注意:如果有多个元素具有相同的id，则返回第一个元素。IE7-内部表单元素的名称也将被用作id。
GetElementsByTagName根据标签获取元素，获取HTMLCollection类型。如果传入" "，则可以获取所有元素。*
另一个方法getElementsByName是HTMLdocument类型(即document对象)所特有的。顾名思义，getElementsbyname根据名称返回元素。
还有一些文档对象的集合。例如，document.forms可以返回所有表单表单。类型也是HTMLCollection。
说到HTMLCollection，我们再来说说。
HTMLCollection是包含一个或多个元素的集合，与上面提到的NodeList非常相似。这种类型的HTMLCollection有两种方法，一种是通过下标(或。item())，另一种是通过['name'](或者。namedItem())。
最后，还有另一个关于文档对象的重要方法，那就是
write() writeln() open() close()
Open close和open close分别是打开和关闭网页的输出流，相当于页面加载时的打开状态。这两种方法一般不用。
然后重要的方法是write和writeln，这两个方法都把东西写到页面上。不同的是，后者会添加一个新的行字符。
注意:在页面加载的过程中，可以使用这两种方法向页面添加内容。如果页面已经加载，再次调用write将重写整个页面。
还有一点，如果你想动态地写脚本，比如
四。元素类型
接下来，我们来谈谈最重要也是最常见的类型，元素类型。
我们日常操作的都是元素类型(本质是HTMLElement，这里简单说是为了方便理解)，比如
document.getElementById("test")返回的是元素类型。我们日常生活中所说的“DOM对象”通常是指元素类型的对象。
然后说说这种类型的共同属性:
首先它在节点类型上有所有的属性方法，这个我就不赘述了，主要讲讲它自己的独特性。
首先是tagName，它与从节点类型继承的Nodename相同。都是返回标签名，通常是大写的，结果取决于浏览器。所以我在做一个对比。
最好是调用toLowerCase()这样的方法来进行比较。
说说上面提到的HTMLElement类型。
HTMLElement类型继承自Element类型，也是HTML元素的实际类型。我们在浏览器中使用的所有元素都是这种类型。
这种类型有一些标准属性，例如:
元素的唯一标识。
标题通常是鼠标上移时显示的信息。
类名类名
等等，这些属性是可读可写的，也就是说如果你改变了它们，就会得到相应的效果。
除了属性，还有几个重要的方法。
先说节点属性的操作方法。
GetAttribute、setAttribute和removeAttribute是三种方法。
这些是最常用的操纵属性的方法，我就不说怎么用了。顾名思义，它们非常简单。
还有一个attributes属性，它保存一个元素的所有属性。
停在这里，问一个问题。ele.className和ele.getAttribute("class ")返回的结果是一回事吗？
回答这个问题，我想说一个重要的知识点。元素的属性结构就是这样来的，比如inpnt元素。
lt;input checked="checked"gt;然后这个元素的属性被包含在input.attributes中，比如你在html元素上看到的类、id或者你自己定义的数据测试。
那么getAttribute、setAttribute、removeAttribute可以认为是一种快速获取属性集的方法。而* * direct input.id或者input.className都是直接挂在input下面的属性，和属性是一个级别的。* *所以返回的内容可能看起来和过去一样，但实际上是不同的。不信可以试试input.getAttribute("checked ")。
一般来说，这三种方法通常处理自定义属性，而不是id、class等“可识别的特性”。
先说创造元素。
Document.createElement()可以创建一个元素，比如:
document.createElement("div");通常，您可以稍后为元素设置属性。有两种方法，一种是直接node.property或者node.setattribute("属性名"，"值")。等待
但是经过这一切，这个元素仍然不在页面中，所以你必须通过上面提到的appendChild之类的方法将元素添加到页面中。
在IE中，你也可以直接穿透整个HTML字符串来创建元素，比如
document.createElement("test");最后，元素节点还支持那些HTMLDocument类型的查找方法，比如getElementsByTagName。但是它只会找到它的后代的节点。所以你可以这样写代码。
document.getElementById("test").getElementsByTagName("div"); // 找到id为test元素下的所有div节点V .文本类型
这是一种特殊的类型，也是第三种最常见的类型(第一种和第二种分别是文档和元素)。
这个节点只是一个字符串。
一个重要的特点就是它没有子元素(但是仔细想想就知道了= =)
您可以通过nodeValue或data属性访问文本节点的文本内容。
下面简单说一下它提供的一些方法。
appendData(); // 在text末尾加内容 deleteData(offset, count); // 从offset指定的位置开始删除count个字符还有insertDate、replaceData、splitText等方法。，所以就不一一说了。用的机会少，能用的时候请参考。
然后它还有一个length属性，返回字符长度。
这里有一个常见的坑。例如，下面的html结构
在这里，ul的第一个孩子是什么？乍一看，你一定以为是李，但实际上，你会发现它不是李，而是一个文本节点！
这是因为浏览器认为ul和第一个li之间有空白字符，所以有文本节点。
这里一个常见的问题是，遍历ul的childNodes时，被遍历的元素必须确定nodeType是否等于1(等于1表示是元素节点)，才能跳过这个坑。否则，您也可以删除所有空大小写和换行符。
创建文本节点的方法是document.createTextNode
然后像操作元素类型一样，再次插入到元素中，浏览器就能看到了。
六。其他类型:Comment、DocumentType和DocumentFragment
这些生僻字只是路过。
Comment是一个注释节点。
Type是DocumentType节点，可通过docment.doctype访问
节点DocumentFragment是一个文档片段，偶尔会用到。
例如，常见的用法是将三个li插入一个ul。
如果循环插入三次，浏览器会渲染三次，对性能影响很大。
所以人们通常会这样做。
第一
var fragment = document.createDocumentFragment();然后用appendChild将li循环插入片段。
最后一次将片段插入ul。这会很快。
七。DOM扩展
看了上面说的这么多节点类型，我想大家对DOM节点都有了深刻的理解。下面说一些关于DOM扩展的事情。
浏览器为了方便开发者，扩展了一些DOM函数。
因为是浏览器自己扩展的，所以使用前一定要注意兼容性
判断“标准模式”和“混杂模式”通过document.compatMode和新的document.documentMode
上面不是说了一个文本节点是第一个子元素的坑吗，所以浏览器又实现了一个children属性，只包含元素节点。
为了方便判断节点A是否是节点B的子节点，引入了contains方法，比如
B.contains(A); // true就代表是，false就代表不是这种方法存在兼容性问题。你可以在使用之前谷歌一下解决方案。
另外还提供了四种访问元素的方法。
innerText/innerHTML/outer text/outer html .
通过这些方法，您可以读取和写入元素。
其中*TEXT是返回的文本内容*HTML是返回的HTML文本。
outer*表示是否包含元素本身。
其实看内容的时候，内在和外在没有什么区别。
当内容写入一个元素时，就是是否包含元素本身的区别。
重要的是，这些方法存在性能问题。比如在IE中，如果通过inner删除的节点还在内存中，很容易消耗大量内存。*
另外一个窍门是，插入大量html代码，使用innerHTML，速度非常快。推荐使用。
