DOM学习中的小笔记
DOM:Document Object Moder 文本对象模型 （框架）DOM包含了HTML中所有的标签
DOM把文档层次中每一个对象称之为节点就是一个层次结构
可以理解为一个树形结构 每个节点就像树叶
每个再入浏览器的HTML文档都会成为document对象
document对象可以让我们从JS中对HTML页面的所有元素进行访问
HTML整个文档的跟就是html,在DOM中可以通过docuement.documentElement来访问html元素（element）,html是整个节点数的跟节点。body是子节点,通过document.body也可以访问Body元素的
Element元素
DOM获取标签的方法
document.getElementById()通过ID查找某个元素
document.getElementsByClassName()通过class类名获取一个元素的集合
document.getElementsByTagName()通过标签名获得一个元素的集合
document.getElementsByName()通过name的值来获取一个元素列表
document.querySelector() 通过css样式选择器获取第一个符合条件的元素
document.querySelectorAll() 通过css样式选择器获取一个元素列表
DOM节点
在DOM里面包含了很多API，用来访问或者是操作HTML文档中的元素。
在HTML文档中，所有的事物都被称作DOM节点，比如：元素节点，文本节点，注释节点等，其中标签元素在HTML文档中被称之为元素节点。我们要想通过JS代码对页面（其实就是对元素的操作）进行动态操作。所以我们要先去了解DOM节点，这样才能通过DOM提供的API对页面进行操作
API：Application Programing Interface 应用程序编程接口
API：是一些预定义好的一些功能（比如：属性和方法）。在HTML里面的API就是HTML定义好的一些属性和方法，通过使用这些定义好的属性和方法，来实现对HTML元素的操作
关于节点(node)：HTML文档中包含各种标签元素，这些标签元素按照层级关系和结构，大致可以分为：父元素、子元素、同胞元素，这些元素的层级关系和结构就构成了一个节点树的结构，在节点树中，父元素，子元素，同胞元素又被称为：父节点parentNode、子节点childNode、同胞节点siblingNode
节点的解释
1.HTML文档中所有的事物都是DOM节点
1.1 HTML文档中的元素称为 元素节点
1.2 HTML文档中的属性称为 属性节点
1.3 HTML文档中的文本称为 文本节点
1.4 HTML文档中的注释称为 注释节点
1.5 HTML文档中的文档本身称为 文档节点(根节点)
1.6 HTML文档中的空格和换行也是一个节点，一般被划分为文本节点
2.nodeName属性是获取某一个节点的节点名称
2.1 元素节点的nodeNome：和元素名称一样（大写的标签名）
2.2 属性节点的nodeNome: 和属性名一样
2.3 文本节点的nodeNome：#text
2.4 注释节点的nodeNome：#comment
2.5 文档节点的nodeNome： #document
3.nodeType属性，获取某一个节点的节点类型
3.1 元素节点的nodeType：1 对应 Node.ELEMENT.NODE
3.2 属性节点的nodeType：2 对应 Node.ATTRIBUTE.NODE
3.3 文本节点的nodeType：3 对应 Node.TEXT.NODE
3.4 注释节点的nodeType：8 对应 Node.COMMENT.NODE
3.5 文档节点的nodeType：9 对应 Nod.DOCUMENT.NODE
4.nodeValue属性，获取某一个节点的值，一般用于文本节点和属性节点
对于文本节点nodeValue 属性包含文本
对于属性节点nodeValue 属性包含属性值
nodeValue对于文档节点和元素节点是不可用的
textContent 代替nodeValue 来获取文本节点的内容
节点的方法
1.获取节点的方法：元素节点名.（父节点parentNode、子节点childNode、同胞节点siblingNode）
2.获取节点的上一个或者下一个：previous （父节点parentNode、子节点childNode、同胞节点siblingNode）上一个，next下一个（父节点parentNode、子节点childNode、同胞节点siblingNode）
3.属性的方法：
3.1 获取属性列表 标签名.attribute
3.2 修改添加属性方法：
<1>节点名.属性名 = “属性值”
<2>通过 setAttribute修改属性值 标签名.setAttribute（“属性名”，“属性值”）
<3>（get获取 has 判断 remover 移除）Attribute属性
4.创建新的节点的方法
document.createElement（创建元素节点即新的标签）
document.createTextNode（创建文本节点即文本内容）
5.创建完节点需要把新的节点连接到原有的节点中
5.1.父级节点parentNode.appendChild（在父级标签添加一个新的元素）
5.2 在某个子节点之前插入新的节点 ： 父级节点parentNode.insertBefore（要插入的节点，在哪个子节点之前【第二个参数可以为null（在元素节点的子节点之后） 为null时效果等同于appendChild】）
5.3 移除某个子节点： 父级节点parentNode.removeChild（要移除的节点）
5.4 writeln （要添加的内容）将内容写入文档,并添加了一个换行符，重启一行
5.5 write（要添加的内容） 将内容写入文档，直接在开始标签和结束标签之间写入新的内容
5.6 在指定位置插入 HTML内容
标签名.insertAdjacentHTML（“插入HTML内容的位置（）”，“要插入的内容”）
5.7 在指定位置插入 元素
标签名.insertAdjacentElement（“插入HTML内容的位置（）”，“要插入的内容”）
DOM节点的类名修改方法
1.标签名.classList.(add增加，remove移除，)
DOM节点内容的获取方法
1.标签名.innerHTML 获取元素内的HTML内容（获取到的是这个元素节点内的文本内容或者标签，连带子标签一块获取），也可以修改原来的内容，覆盖原来的标签
2.标签名.innerText 获取元素内的文本内容 （只获取文本内容）
3.标签名.textContent 获取元素内的文本内容（连带着空格换行一块获取，和innerText差不多）
4. 标签名.outerHTML 获取元素的HTML内容，包含这个标签（从这个开始标签和结束标签的所有内容连带这个标签本身）
5.标签名.outerText 获取元素的文本内容（跟innerText差不多）
获取DOM的全部节点
