一、DOM、Document节点概述
DOM、Document节点与Node节点的关系
基本描述：
（1）DOM全称为Document Object Model （文档对象模型），是一套用来管理控制html文档的规则。
DOM规则中规定：
a，DOM将其范畴内的所有对象都称为节点（node）。
b，DOM将html文档内部的所有元素都视为节点，所有的文本和属性也视为节点。
（2）Document节点是DOM规则范畴内的一个比较特殊的节点，这个节点代表了html文档本身。
（3）Node节点是DOM规则范畴内除了Document节点之外的其他所有节点的一个统称。
DOM Tree与DOM的核心思想
核心思想：把结构化文档解析成一系列的节点，再由这些节点组成一个树状结构，这个树状结构就被称为DOM Tree。
影响作用：所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的（比如增删内容）。
注意事项：
（1）严格地说，DOM不属于JavaScript。
（2）但是操作DOM是JavaScript最常见的任务。
（3）而JavaScript也是最常用于DOM操作的语言。
（4）所以，DOM往往放在JavaScript里面介绍。
大概图解：
Node节点的类型
基本描述：node是DOM的最小组成单位，一个文档的树形结构就是由各种不同类型的节点组成。
类型图解：
二、Document节点的属性和方法
Document节点的属性
基本描述：因为document节点代表了文档本身，因此document节点的属性代表了文档本身的属性。
结构内容：常见的document节点的属性有如下几个部分
（1）返回文档内部的某个节点：doctype，documentElement，body，head。
（2）返回文档指定信息：documentURL，URL，domain，lastModified，location，title，readyState。
（3）返回文档内部特定节点的集合：anchors，forms，images，links，scripts。
注意事项：在属性内容中用红色标出的属性需要详细注意。
（1）URL属性
描述：URL属性返回当前文档的网址，是一个只读属性。URL属性只有HTML文档才具备。
语法：document.URL
（2）location属性
描述：本属性返回一个只读对象类型的数据，提供了当前文档的URL相关信息。
语法：document.location
内容：
document.location.assign("传递一个URL")
document.location.href = "传递一个url" ； // 这两种方法可以用来更改文档的url
（3）anchors属性
描述：本属性用来获取页面【添加name属性的所有a标签】的集合。
语法：document.anchors
Document节点的方法——选中页面元素
基本描述：DOM规则为Document节点提供了大量用来选中页面元素的方法。
基本语法：
（1）node.querySelector("选择器名"); // 选中页面中第一个符合选择器要求的页面元素，如果没有则返回null。
（2）node.querySelectorAll("选择器名"); // 选中页面中所有符合选择器要求的页面元素，并构成集合返回。
（3）node.getElementById("ID名"); // 选择页面中唯一一个匹配指定ID属性的元素节点。
（4）node.getElementsByTagName("标签名"); // 选中页面中所有符合指定标签名的元素。
（5）node.getElementsByClassName("类名"); // 选中页面中所有符合指定类名的元素。
（6）node.getElementsByName("name名"); // 选中页面中所有符合name属性值的元素。
注意事项：
（1）上述六个选中页面的元素并没有指定必须通过document节点来调用，这意味着所有的节点都能够使用他们。
（2）1、3方法获取的是具体的节点，可以直接使用，而其余方法获取的则是由所有符合条件的节点构成的节点列表（nodelist），是一个对象类型。
（3）前两个方法属于querySelector系列的方法，其中querySelectorAll方法返回的节点列表是一个静态的节点列表，而后面四个方法则属于getElementBy系列的方法，后面的三个方法返回的节点列表是动态的节点列表。（在我的另外一篇博客中有详细介绍）
Document节点的方法——创建页面元素
基本描述：一个页面的元素如果想要被用户看到，需要【元素本身】【元素内容】和【元素属性】三部分构成。而创建页面元素也正是从这三个部分来考虑的。
基本语法：
（1）创建元素节点：document.createElement("元素名");
（2）创建文本节点：document.createTextNode("文本内容");
（3）创建属性节点：document.createAttribute("属性名");
（4）将一个元素/内容节点添加到另外一个元素节点的内部：父节点.appendChild(subNode);
（5）将一个属性节点添加到元素节点之上：元素节点.setAttributeNode(属性节点);
注意事项：
（1）上述三个有关于“创建”的方法都必须由document节点来调用。
（2）只有“能够添加子节点”的元素节点才能进行添加子节点的操作，很多元素是不能够添加子节点的。例如img标签等自闭合标签，这种标签添加子节点也没有任何效果。
Document节点的方法——操作页面元素
基本描述：操作页面元素实际上指的是操作页面元素的属性。
基本内容：
【元素节点的属性方法getAttribute(),setAttribute()和remove Attribute()】
【元素节点的style属性】
【元素节点的style属性的cssText写法】
【元素节点的style属性方法setProperty()，getPropertyValue()和removeProperty()】
基本语法：
node.getAttribute("属性名");
node.setAttribute("属性名",“属性值”);
node.removeAttribute("属性名");
node.getPropertyValue("属性名");
node.setProperty("属性名","属性值");
node.removeProperty("属性名");
注意事项：
（1）对于元素节点的属性操作方法而言，其能够修改的是所有元素的属性，而不仅仅局限于style属性。
（2）对于元素节点的属性，如果是系统提供的属性则可以直接通过元素节点然后打点调用，例如：node.id、img.src、a.href、div.className（这个例外，类名写的不是class，是className）
三、Node节点的属性与方法
node节点的属性
基本描述：node节点的属性和document节点的属性不同点在于，node节点的属性全都是通用属性，因此可以被所有节点共同拥有。
基本内容：
（1）通用属性：nodeName、nodeType
（2）返回当前node的相关节点属性：ownerDocument、nextSibling、previousSiblings、parentNode、parentElement。
（3）返回node内容属性：textContent、nodeValue
（4）返回当前node子节点相关属性：childNodes、firstChild、lastChild
注意事项：
（1）nodeName属性表示节点的名称，需要注意的是对于元素节点，其nodeName属性会返回大写的元素名。例如：console.log(myDiv.nodeName); // DIV
（2）nextSibling属性表示当前节点后一个相邻的同级节点，如果当前节点后面没有相邻的同级节点，则返回null。
（3）previousSibling属性表示当前节点前一个相邻的同级节点，如果当前节点前面没有相邻的同级节点，则返回null。
（4）parentNode属性表示当前节点的父级节点，需要注意的是document节点没有本属性，如果访问则返回null。
（5）childNodes属性表示当前节点的所有子节点构成的列表。必须说明一点，childNodes属性返回的子节点列表中包含当前节点内部的所有子元素节点，而且还有文本节点！
node节点的属性补充
node节点的方法
基本描述：node节点的方法和document节点的方法不同点在于，node节点的方法全部都是通用方法，因此可以被所有的节点共同调用。
基本内容：
（1）appendChild() // 追加节点
（2）hasChildNodes() // 判断是否存在子节点
（3）cloneNode() // 克隆节点
（4）insert Before() // 插入节点
（5）removeChild() // 删除节点
（6）replaceChild() // 替换节点
（7）contains() // 判断是否包含某节点
（8）isEqualNode() // 判断是否等于某节点
相关语法：
（1）父节点.appendChild(要追加的子节点);
（2）某节点.hasChildNodes();
（3）某节点.cloneNode(是否深拷贝boolean);
（4）父节点.insertBefore(新节点，父节点中的某个子节点);
（5）父节点.removeChild(父节点中的某个子节点);
（6）父节点.replaceChild(新节点，父节点中某个子节点);
（7）父节点.contains(要判断的节点);
（8）某节点.isEqualNode(另一个节点);