前端知识之--DOM
1.什么是DOMHTML DOM 节点
2.编程接口3. 查找元素4.HTML DOM 属性innerHTML 属性（获取）innerHTML 属性（替换）nodeName 属性childNodes 属性nodeValue 属性nodeType 属性
5.操作文本内容1. 获取标签中间文本内容: innerText：2. 获取标签中间内容: innerHTML创建新的 HTML 元素 - appendChild()创建新的 HTML 元素 - insertBefore()删除已有的 HTML 元素-removeChild()替换 HTML 元素-replaceChild()
6. 事件HTML 事件属性使用 HTML DOM 来分配事件onload 和 onunload 事件onchange 事件onmouseover 和 onmouseout 事件onmousedown、onmouseup 以及 onclick 事件
7.导航节点列表HTML DOM 节点列表长度导航节点关系DOM 根节点childNodes 和 nodeValue
8.HTML DOM 总结
1.什么是DOM
我们在前端的学习中经常会发现DOM这个高频词，那么什么是DOM呢？
DOM是文档对象模型（Document Object Model）的缩写。 是 W3C（万维网联盟）的标准。是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
HTML DOM 节点
在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
2.编程接口
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
方法是您能够执行的动作（比如添加或修改元素）。
属性是您能够获取或设置的值（比如节点的名称或内容）。
3. 查找元素
document.getElementById("apple"); //找到id为appel的标签，因为id是唯一的，所以是element(ID选择器)
document.getElementsByTagName("like"); //找到like标签的所有元素的节点列表(标签选择器)
document.getElementsByClassName("pdd"); //找到class为pdd的标签的所有元素的节点列表(class选择器)
4.HTML DOM 属性
innerHTML 属性（获取）
获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
//获取 id="intro" 的
元素的 innerHTML：
Hello World!
innerHTML 属性（替换）
Hello World!
上面的段落被一段脚本改变了。
nodeName 属性
nodeName 属性规定节点的名称。
nodeName 是只读的元素节点的 nodeName 与标签名相同(、、等都是元素节点，即标签)
属性节点的 nodeName 与属性名相同(元素属性，如标签的链接属性href=“http://www.imooc.com”)文本节点的 nodeName 始终是 #text(向用户展示的内容，如li…li中的JavaScript、DOM、CSS等文本)文档节点的 nodeName 始终是 #document
nodeName 始终包含 HTML 元素的大写字母标签名。
请点击按钮来获得 body 元素子节点的节点名。
注释：元素中的空格被视作文本，而文本被视作文本节点。
P #text BUTTON #text SCRIPT //因为空隔，返回为#text #text P #text
childNodes 属性
childNodes 属性返回节点的子节点集合，以 NodeList 对象。 可以使用 length 属性来确定子节点的数量，然后遍历所有的子节点并提取需要的信息。
nodeValue 属性
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null文本节点的 nodeValue 是文本本身属性节点的 nodeValue 是属性值
Hello World!
nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。 元素类型 NodeType 元素 1 属性 2 文本 3 注释 8 文档 9
5.操作文本内容
document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的；
1. 获取标签中间文本内容: innerText：
设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)
2. 获取标签中间内容: innerHTML
设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）
创建新的 HTML 元素 - appendChild()
如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。(将新元素作为父元素的最后一个子元素进行添加)。
This is a paragraph.
This is another paragraph.
创建新的 HTML 元素 - insertBefore()
在指定的已有子节点之前插入新的子节点。
This is a paragraph.
This is another paragraph.
删除已有的 HTML 元素-removeChild()
如需删除 HTML 元素，您必须清楚该元素的父元素：
This is a paragraph.
This is another paragraph.
不能在不引用父元素的情况下删除某个元素，可以找到需要删除的子元素，然后使用 parentNode 属性来查找其父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
替换 HTML 元素-replaceChild()
This is a paragraph.
This is another paragraph.
6. 事件
当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。 如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：
onclick=JavaScript
示例：当用户点击时，会改变 h1元素的内容：
请点击这段文本!
示例2：在本例中，会从事件处理程序中调用函数：
//点击oclick调用changtext函数
请点击这段文本!
HTML 事件属性
如需向 HTML 元素分配事件，可以使用事件属性。
实例 向 button 元素分配一个 onclick 事件：
点击按钮来执行 displayDate() 函数。
//点击调用displayDate函数
使用 HTML DOM 来分配事件
HTML DOM 允许使用 JavaScript 向 HTML 元素分配事件：
实例 为 button 元素分配 onclick 事件：
点击按钮来执行 displayDate() 函数。
onload 和 onunload 事件
当用户进入或离开页面时，会触发 onload 和 onunload 事件。 onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。 (onload 和 onunload 事件可用于处理 cookies。)
示例：
弹出的提示框会告诉你浏览器是否已启用 cookie。
onchange 事件
用于输入字段的验证
请输入你的英文名：
当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。
onmouseover 和 onmouseout 事件
可用于在鼠标指针移动到或离开元素时触发函数
//鼠标移到目标上 onmouseover="mOver(this)" //鼠标离开目标 onmouseout="mOut(this)" style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;"> Mouse Over Me