一、js HTML DOM
（一）DOM简介
1.通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：
HTML DOM 是：
• HTML 的标准对象模型
• HTML 的标准编程接口
• W3C 标准
W3C DOM 标准被分为 3 个不同的部分：
·Core DOM - 所有文档类型的标准模型
·XML DOM - XML 文档的标准模型
·HTML DOM - HTML 文档的标准模型
总之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
2. 创建动态 HTML DOM一般用法
• 改变 HTML 元素的内容
• 改变 HTML 元素的样式（CSS）
• 对 HTML DOM 事件作出反应
• 添加和删除 HTML 元素
3. javascript 有三部分构成，ECMAScript，DOM和BOM
（二）DOM方法
1.在 DOM 中，所有 HTML 元素都被定义为对象。
HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值。
document.getElementById("demo").innerHTML = "Hello World!";
getElementById 是方法，而 innerHTML 是属性。
2. getElementById 方法
访问 HTML 元素最常用的方法是使用元素的 id。
在上面的例子中，getElementById 方法使用 id=“demo” 来查找元素。
3. innerHTML 属性
获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。
4.
（三）DOM文档、元素
1.HTML DOM Document 对象
文档对象代表您的网页。
如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。
2. 查找 HTML 元素
（1）通过 id 查找 HTML 元素
DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。
var myElement = document.getElementById("intro");
如果元素被找到，此方法会以对象返回该元素（在 myElement 中）。
如果未找到元素，myElement 将包含 null。
（2）通过标签名查找 HTML 元素
查找 id=“main” 的元素，然后查找 “main” 中所有
元素，返回对象数组
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
（3）通过类名查找 HTML 元素
如果您需要找到拥有相同类名的所有 HTML 元素，请使用 getElementsByClassName()
返回包含 class=“intro” 的所有元素的列表，返回对象数组
var x = document.getElementsByClassName("intro");
（4）通过 CSS 选择器查找 HTML 元素
如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。
返回 class=“intro” 的所有 <p> 元素列表
var x = document.querySelectorAll("p.intro");
（5）通过 HTML 对象选择器查找 HTML 对象
本例查找 id=“frm1” 的 form 元素，在 forms 集合中，然后显示所有元素值
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
以下 HTML 对象（和对象集合）也是可访问的：
• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
• document.links
• document.scripts
• document.title
3.改变 HTML 元素
（1）改变 HTML 输出流
document.write() 可用于直接写入 HTML 输出流：
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
千万不要在文档加载后使用 document.write()。这么做会覆盖文档。
（2）改变 HTML 内容
修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性。
document.getElementById(id).innerHTML = new text
（3）改变属性的值
document.getElementById(id).attribute = new value
例如
document.getElementById("myImage").src = "landscape.jpg";
（4）改变元素css
需更改 HTML 元素的样式，请使用此语法：
document.getElementById(id).style.property = new style
例如
document.getElementById('p1').style.visibility="hidden";
更多style对象见HTML DOM Style 对象参考手册。https://www.w3school.com.cn/jsref/dom_obj_style.asp
4. 添加和删除元素
5. 添加事件处理程序
6. 查找 HTML 对象
（三）DOM动画
1.步骤：
（1）基础页面
（2）创建动画容器：所有动画都应该与容器元素关联
（3）为元素添加样式
应该通过 style = "position: relative" 创建容器元素。（相对定位）
应该通过 style = "position: absolute" 创建动画元素。（绝对定位）
·static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
position解释：
·fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
·relative（相对定位）：生成相对定位的元素（相对于他原来应该在的位置），通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
·absolute（绝对定位）：生成绝对定位的元素（会脱离文档流），相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
（4）使用 JavaScript 创建动画
<!Doctype html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
</style>
<body>
<h1>我的第一个 JavaScript 动画</h1>
<div id="container">
<div id="animate"></div>
</div>
</body>
<script>
window.onload=function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
</html>
红色块从左上角移动到右下角
（四）DOM事件和监听
1.JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。
HTML 事件的例子：
• 当用户点击鼠标时
• 当网页加载后
• 当图像加载后
• 当鼠标移至元素上时
• 当输入字段被改变时
• 当 HTML 表单被提交时
• 当用户敲击按键时
在本例中，从事件处理程序调用函数，通过this传递对象参数：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">点击此文本！</h1>
<script>
function changeText(id) {
id.innerHTML = "Hello:)";
}
</script>
</body>
</html>
2.HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
3.当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onload 和 onunload 事件可用于处理 cookie。
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookie 已启用";
} else {
text = "Cookie 未启用";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
4.onchange 事件经常与输入字段验证结合使用。
5. onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数
onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
点击鼠标</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "松开鼠标";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="谢谢您";
}
</script>
HTML DOM Event 对象手册
https://www.w3school.com.cn/jsref/dom_obj_event.asp
6. addEventListener() 方法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型（比如 “click” 或 “mousedown”）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。一般用false使用事件冒泡形式。冒泡指从叶节点向外出发，捕获是从根节点向里触发
注意：请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。
添加当用户点击按钮时触发的事件监听器：
document.getElementById("myBtn").addEventListener("click", displayDate);
也可以直接写一个匿名function(参数){代码}代替disolayDate的位置
·addEventListener() 方法为指定元素指定事件处理程序。
·addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
·您能够向一个元素添加多个事件处理程序。
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
·您能够向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件。
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
·您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上，比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。
例如添加当用户调整窗口大小时触发的事件监听器：
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
·addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。
在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。
事件传播是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“click”事件？
在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。
在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。
·当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。
·您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。
element.removeEventListener("mousemove", myFunction);
（五）DOM导航与节点、集合、节点列表
1.通过 HTML DOM，您能够使用节点关系来导航节点树。
根据 W3C HTML DOM 标准，HTML 文档中的所有事物都是节点：
• 整个文档是文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 所有注释是注释节点
2.节点关系
• 术语（父、子和同胞，parent、child 以及 sibling）用于描述这些关系。
• 在节点树中，顶端节点被称为根（根节点）。
• 每个节点都有父节点，除了根（根节点没有父节点）。
• 节点能够拥有一定数量的子
• 同胞（兄弟或姐妹）指的是拥有相同父的节点。
3. 在节点之间导航
通过 JavaScript，您可以使用以下节点属性在节点之间导航：
• 父节点parentNode
• 子节点childNodes[nodenumber]
• 第一个孩子firstChild
• 最后一个孩子lastChild
• 下一个同胞nextSibling
• 上一个同胞previousSibling
4. 子节点和节点值
DOM 处理中的一种常见错误是认为元素节点中包含文本。
var myTitle = document.getElementById("demo").innerHTML;
访问 innerHTML 属性等同于访问首个子节点的 nodeValue：
var myTitle = document.getElementById("demo").firstChild.nodeValue;
也可以这样访问第一个子节点：
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
5.nnerHTML
用来读写HTML DOM元素内容
6. DOM 根节点
有两个特殊属性允许访问完整文档：
• document.body - 文档的 body
• document.documentElement - 完整文档，包括head、body、script
7. nodeName 属性规定节点的名称。
• nodeName 是只读的
• 元素节点的 nodeName 等同于标签名
• 属性节点的 nodeName 是属性名称
• 文本节点的 nodeName 总是 #text
• 文档节点的 nodeName 总是 #document
8. nodeValue 属性规定节点的值。
• 元素节点的 nodeValue 是 undefined
• 文本节点的 nodeValue 是文本文本
• 属性节点的 nodeValue 是属性值
9. nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
最重要的 nodeType 属性是：
10.创建新节点
（1）element.appendChild（）追加作为最后一个子
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
（2）insertBefore()插入到指定节点后
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
在element节点下面的child后面插入para。即div1中的p1后面
11. 删除某个 HTML 元素，您需要知晓该元素的父
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
注意：方法 node.remove() 是在 DOM 4 规范中实现的。但是由于糟糕的浏览器支持，不应该使用该方法。
上面的比较繁琐，一种常见的解决方法：找到你想要删除的子，并利用其 parentNode 属性找到父：
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
12.如需替换元素的，请使用 replaceChild() 方法
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
替换parent下的child，即div1下的p1换成自定义的p
13. 集合HTMLCollection 对象
getElementsByTagName()、getElementsByClassName() 方法返回 HTMLCollection 对象。
HTMLCollection 对象是类数组的 HTML 元素列表（集合）
length 属性定义了 HTMLCollection 中元素的数量
14. 集合HTMLCollection不是数组，但是可以遍历
HTMLCollection 也许看起来像数组，但并非数组。
您能够遍历列表并通过数字引用元素（就像数组那样）。
不过，您无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push() 或 join()。
15. 节点列表NodeList 对象是从文档中提取的节点列表（集合）。
NodeList 对象与 HTMLCollection 对象几乎相同。
返回节点列表的情况：
·如使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。
·所有浏览器都会为 childNodes 属性返回 NodeList 对象。
·大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。
但是querySelectorAll没有实时性，返回静态的元素集合。
var myNodeList = document.querySelectorAll("p");
y = myNodeList[1];
length 属性定义节点列表中的节点数
16.节点列表不是数组！
节点数组看起来像数组，但并不是。
您能够遍历节点列表并像数组那样引用其节点。
不过，您无法对节点列表使用数组方法，比如 valueOf()、push()、pop() 或 join()
17.NodeList 对象与 HTMLCollection 对象的区别
·HTMLCollection是 HTML 元素的集合。NodeList 是文档节点的集合，既可以有元素又可以有节点。（元素是元素节点，是节点中的一种，但元素节点中可以包含很多的节点。）
·HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。
·它们都有定义列表（集合）中项目数的 length 属性。
·它们都可以通过索引 (0, 1, 2, 3, 4, …) 像数组那样访问每个项目。
·访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。
·访问 NodeList 项目，只能通过它们的索引号。
·只有 NodeList 对象能包含属性节点和文本节点。
·它们看起来像一个数组但是不是数组，可以叫类数组，无法使用数组的方法： valueOf(), pop(), push(), 或 join()。
