节点层级
Document节点表示每个文档的根节点，在这里，根节点的唯一子节点是元素，我们称之为文档元素(documentelement)。元素节点表示HTML元素，属性节点表示属性，文档节点表示文档类型，注释节点，表示注释。DOM一共有12种节点类型，这些类型都继承一种基本类型。1.Node类型
在JavaScript中，所有的节点类型都继承Node类型，因此所有类型都共享相同的基本属性和方法。每个节点都有nodeType属性，表示该节点的类型，节点类型由定义在Node类型上的12个数值常量表示👇
1.nodeName和nodeValue
nodeName和nodeValue保存着有关节点的信息。这两个属性的值完全取决于节点的类型。如果是元素类型，那么nodeName始终等于元素的标签名，nodeValue的值为Null。
2.节点关系
每一个节点都有一个childnode属性，其中包含一个NodeList实例，这是一个类数组对象，有length属性，并且可以通过[ ]下标访问，但是不是一个array实例，特殊的是，NodeList实际上是对一个DOM结构的查询，DOM结构的变化会自动地在NodeList上反映出来，是一个实时活动对象。
除了上图中的节点关系，还有👇
hasChildNodes()：这个方法返回true则说明节点有一个或者多个子节点。
ownerDocument:这是一个指向代表整个文档的文档节点的指针（所有节点都共享）。
3.操作节点
appendChild()：用于在childNodes列表末尾添加节点。同时也会更新相关的关系指针。比如说上面图片中的lastChild。
insertBefore()：插入节点。这个方法接受两个参数：要插入的节点和参照节点。如果参照节点是Null，那么就放在最后一个，效果和上面的方法相同。
replaceChild()：替换节点。该方法接受两个参数：要插入的节点和要替换的节点。要替换的节点会被返回并从树中完全移除，要插入的节点会取而代之。相关指针会被替换的节点完全复制，被替换的节点从技术上说仍然被同一个文档所有，但是文档中已经没有了他的位置。（最后一句话看懂了说明你已经大彻大悟了）
removeChild()：移除节点，传入一个参数就行了。
4.其他方法
所有节点还共享了两个方法：
cloneNode()：传入true深复制，复制节点和其整个子DOM树。如果传入false，则只会复制调用该方法的节点。复制返回的节点属文档所有，尚未表明父节点，所以可以成为孤儿节点。不会复制JavaScript属性，只会复制HTML属性。
normalize()：用来处理文档子树中的文本节点。
2.Document类型
Document类型是JavaScript中表示文档节点的类型。1.文档子节点
document.documentElement始终指向<HTML>元素。
2.文档信息
document.title:获取标题。
document.url：获取完整的url。 domain：获取域名。 referrer：获取来源。
document.domain的属性是可以设置的，当前页面来自某个不同子域的窗格<frame>或内嵌窗格<iframe>时，设置这个就很有用。因为跨域通信存在安全隐患，可以把每个页面的domain属性设置成相同的值。
3.定位元素
getElementbyId():这个方法接受一个参数，即要获取元素的ID，如果找到了就返回这个元素，如果没有就返回null，并且区分大小写。
getElementByTagName():这个方法接受一个参数，记要获取元素的标签名，返回包含零个或多个元素的NodeList。在HTML文档中，返回一个HTMLCollection对象。
let images = document.getElementTagName('img');
这里把返回的HTMLCollection对象保存在变量images中。可以使用item()和中括号的方法访问其中的元素，也可以用length属性来获取长度。上面的方法和NodeList很相似。
HTMLCollection对象还有一个额外的方法，namedItem()，可通过标签的name属性取得某一项的引用。例如👇
<img src = 'myimg.gif' name='myImage'>
let myImages = images.namedItem('myImage');
可以通过这样的方法，取得img标签的引用。上述方法还可以通过👇实现：
let myImages = images['myImage'];
这也就是说明，HTMLCollection标签既可以向NodeList方法一样使用中括号【】接受数值索引，也可以接受字符串索引。如果是数字，调用NodeList方法，如果是字符串调用namedItem方法。
getElementsByName():这个方法会返回具有给定name属性的所有元素。一般用于单选按钮，比如说
<div name = 'color' id = 'a'>A</div>
<div name = 'color' id = 'b'>B</div>
<div name = 'color' id = 'c'>C</div>
选择时可以通过getElementsByName()将三个元素获取到，再区别所选项。
与getElementsByTagName()一样，getElementByName()也会被返回HTMLCollection。
4.特殊集合
`document.anchors`:文档中所有带name属性<a>元素。document.forms:文档中所有<form>元素。
document.images:文档中所有<img>元素。
document.links:文档中所有带href属性的<a>元素。
5.DOM兼容性检测
吼吼不太想看！
6.文档写入
docunment对象有一个古老的能力，即向网页输出流中写入内容。write():接受一个字符串参数，把字符串写入网页。
writeln()：同上，然后自动换行。
open()和
close()
这里还介绍了window.onload功能，可以将括号内程序推迟到页面加载完毕后执行。
3.Element类型
除了Document类型外，ELement类型就是web开发中最常用的类型了，Element表示XML或HTML元素，对外暴露出访问元素标签名、子节点和属性的能力。
1.HTML元素
所有HTML元素都通过HTMLElement类型表示，包括直接实例和间接实例。拥有👇的属性：
id:元素在文档中的唯一标识符；
title:元素的额外属性，通常以提示条形式展示；
lang:元素内容的语言代码（很少用）；
dir:语言的书写方向（'ltr'→,'rtl'←）
className:相当于class属性，用于指定元素的CSS类(class是ECMAScript关键字，不可以直接使用。)
2.取得属性
getAttribute():不能取得自定义的属性值。
3.设置属性
setAttribute():这个方法接受两个参数，要设置的属性名和属性的值。如果属性值已经存在，那么会替换原值。不仅适用于HTML元素，也适用于自定义属性。但是再DOM对象上添加自定义属性，不会自动让它变成元素的属性。
removeAttribute():删除属性，把属性从元素中去掉。
4.attributes
Element类型是唯一使用attributes属性的DOM节点类型。attributes属性包含一个NameNodeMap实例，类似于NodeList的“实时集合”，还有document中的HTMLCollection对象。元素的每个属性都表示为一个Attr节点，并且保存在NameNodeMap中，并且包含以下方法：
getNamedItem(name):返回NodeName属性等于name的节点。
removeNamedItem(name):删除nodeName属性等于name的节点。
setNamedItem(node):向列表中添加node节点，以其nodeName为索引。
item(pos):返回索引位置pos处的节点。
5.创建元素
document.createElement():这个方法接受一个参数，即要创建元素的标签名。
6.元素后代
文章内容参考：JavaScript高级程序设计（第四版）标题样式来自：juejin.cn/post/684490…
哪里写错了就联系我🐧：54269504
