一、DOM简介
通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
1、当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
对象的 HTML DOM 树
2、DOM 标准被分为 3 个不同的部分：Core DOM - 所有文档类型的标准模型、XML DOM - XML 文档的标准模型、HTML DOM - HTML 文档的标准模型
3、什么是 HTML DOM？
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：作为对象的 HTML 元素、所有 HTML 元素的属性、访问所有 HTML 元素的方法、所有 HTML 元素的事件。
二、HTML DOM 方法
HTML DOM 方法是能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值。
DOM 编程界面：通过 JavaScript 进行访问，是每个对象（所有 HTML 元素都被定义为对象）的属性和方法。
<script>document.getElementById("demo").innerHTML = "Hello World!";</script> //getElementById 是方法，innerHTML 是属性。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。
三、HTML DOM 应用
HTML DOM 文档对象是网页中所有其他对象的拥有者。
1、HTML DOM Document 对象
文档对象代表网页，访问 HTML 页面中的任何元素是从访问 document 对象开始。
使用 document 对象访问和操作 HTML元素。
2、如何查找 HTML 元素？
五种方法：
①通过 id 查找 HTML 元素
var myElement = document.getElementById("demo"); //元素被找到会以对象返回在 myElement 中，未找到返回null。
②通过标签名查找 HTML 元素
getElementsByTagName方法
③通过类名查找 HTML 元素
getElementsByClassName方法
④通过 CSS 选择器查找 HTML 元素
querySelectorAll() 方法用于 查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素。
括号内为css选择器
⑤通过 HTML 对象集合查找 HTML 元素
还有诸多
3、如何改变 HTML 元素？
①改变 HTML 输出流
document.write(Date()); //创建动态 HTML 内容，document.write() 可用于直接写入 HTML 输出流
②改变 HTML 内容
document.getElementById(id).innerHTML =new text
使用 innerHTML 属性修改 HTML 文档内容
③改变属性的值
document.getElementById(id).attribute=new value
4、如何 改变 HTML元素样式（CSS）？
①改变 HTML 样式
document.getElementById(id).style.property=new style
document.getElementById("p2").style.color = "blue";
②使用事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。
事件对象：https://www.w3school.com.cn/jsref/dom_obj_event.asp
事件属性：用于向 HTML 元素分配事件。
使用 HTML DOM 分配事件：document.getElementById("myBtn").onclick = displayDate; //名为 displayDate 的函数被分配到 id="myBtn" 的 HTML 元素。
5、创建 HTML 动画
①创建容器
动画应该与容器元素关联。
②设置样式
style = "position: relative" 创建容器元素
style = "position: absolute" 创建动画元素
③创建动画
通过对元素样式进行渐进式变化编程，这种变化通过一个计数器来调用。当计数器间隔很小时，动画看上去就是连贯的。
setInterval(code，millisec) 方法：按照指定的周期（以毫秒计）来调用函数或计算表达式。会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
四、JavaScript HTML DOM 事件监听器
1、addEventListener() 方法
①语法
element.addEventListener(event,function,useCapture);
event：表示事件类型，如click或mousedown。勿对事件使用 "on" 前缀：使用 "click" 代替 "onclick"。
function：当事件发生时我们需要调用的函数，可以直接是函数表达式，也可以是外部命名函数。
useCapture：是布尔值，指定使用事件冒泡还是事件捕获。可选。默认值是 false，使用冒泡传播， true表示事件使用捕获传播。
②事件冒泡还是事件捕获？
事件传播：定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“click”事件？HTML DOM 中有冒泡和捕获两种事件传播的方法。
冒泡：由内向外。先处理p，再处理div。
捕获：由外向内。
③作用
为指定元素 指定事件处理程序：为元素附加事件处理程序而不会覆盖已有的事件处理程序。因此可向相同元素添加不同类型的事件。
向一个元素添加多个（可相同类型）事件处理程序。
更容易控制事件如何对冒泡作出反应。
addEventListener() 允许将事件监听器添加到任何 HTML DOM 对象上：如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象（xmlHttpRequest 对象 ）。
④参数传递
当传递参数值时，需要以参数形式调用指定函数的“匿名函数”：
此处传递的是一个匿名函数，里面包含函数运行结果，但是该匿名函数需等click事件发生后执行
错误情况：
此处参数为函数运行的结果，无关click是否执行
2、removeEventListener() 方法
removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序
语法：element.removeEventListener("mousemove", myFunction);
IE 8、Opera 6.0 及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。使用 attachEvent() 方法向元素添加事件处理程序，并由 detachEvent() 方法删除。element.attachEvent(event,function);
element.detachEvent(event,function);
五、JavaScript HTML DOM 导航
使用节点关系来导航节点树
1、DOM 节点
HTML 文档中的所有事物都是节点：整个文档是文档节点；每个 HTML 元素是元素节点；HTML 元素内的文本是文本节点；每个 HTML 属性是属性节点；所有注释是注释节点。
JavaScript可创建新节点、修改和删除所有节点。
2、节点关系
父、子和同胞，parent、child 以及 sibling
<html> 是根节点，没有父，是 <head> 和 <body> 的父。<head> 是 <html> 的第一个子。<body> 是 <html> 的最后一个子
3、在节点之间导航
使用节点属性在节点之间导航：parentNode、childNodes[nodenumber]、firstChild、lastChild、nextSibling、previousSibling
①nodeName 属性：规定节点的名称，只读，包含 HTML 元素的大写标签名
元素节点的 nodeName 等同于标签名
属性节点的 nodeName 是属性名称
文本节点的 nodeName 总是 #text
文档节点的 nodeName 总是 #document
②nodeValue 属性：规定节点的值
元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本文本
属性节点的 nodeValue 是属性值
③nodeType 属性：返回节点的类型，只读
4、子节点和节点值
<title id="demo">DOM 教程</title>
常见错误：认为元素节点中包含文本。————正解：元素节点 <title> 不包含文本，包含了值为 "DOM 教程" 的文本节点。
文本节点的值能够通过节点的 innerHTML 属性进行访问。
var myTitle = document.getElementById("demo").innerHTML;
访问 innerHTML 属性等同于访问首个子节点的 nodeValue。
var myTitle = document.getElementById("demo").firstChild.nodeValue;
等同于：var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
5、DOM 根节点
有两个特殊属性允许访问完整文档：
document.body - 文档的 body
document.documentElement - 完整文档（包含head部分）
6、创建新 HTML 元素（节点）
①流程
创建创建元素（元素节点p）：var para = document.createElement("p");
创建文本节点：var node = document.createTextNode("这是一个新段落。");
向 <p> 元素追加文本节点：para.appendChild(node);
②appendChild（）方法
向节点添加最后一个子节点（添加至末尾）
node.appendChild(node) node为希望添加的节点对象
③insertBefore()方法
在指定的已有子节点之前插入新的子节点。
node.insertBefore(newnode,existingnode)
newnode：需要插入的节点对象。
existingnode：在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。
7、删除和替换已有 HTML 元素
①removeChild() 方法
删除指定元素的某个指定的子节点。需找到父元素（利用其 parentNode 属性找到父）
node.removeChild(node)
以 Node 对象返回被删除的节点，如果节点不存在则返回 null。
从父元素中删除子元素：parent.removeChild(child);
②replaceChild() 方法
用新节点（已存在或者新创建）替换某个子节点。
node.replaceChild(newnode,oldnode)
newnode：希望插入的新节点对象
oldnode：希望被代替的节点对象。
六、JavaScript HTML DOM 集合
1、getElementsByTagName() 方法
返回 HTMLCollection 对象。集合对象是类数组的 HTML 元素列表（集合）。并非数组。
例：var x = document.getElementsByTagName("p"); //选取文档中的所有 <p> 元素，该集合中的元素可通过索引号进行访问。
y = x[1]; //访问第二个 <p> 元素
2、length 属性
定义了HTMLCollection 中元素的数量，适用于遍历集合中的元素时。
七、JavaScript HTML DOM 节点列表
1、NodeList 对象
NodeList 对象是从文档中提取的节点列表（集合），与 HTMLCollection 对象几乎相同。
①getElementsByClassName() 方法
某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。
②childNodes 属性
全部浏览器返回 NodeList 对象
③querySelectorAll() 方法
大多数浏览器返回 NodeList 对象。
NodeList 中的元素可通过索引号进行访问。
2、length 属性
定义节点列表中的节点数，遍历节点列表中的节点时很有用。
3、HTMLCollection 与 NodeList 的区别
HTMLCollection是 HTML 元素的集合，NodeList 是文档节点的集合。
二者都是类数组的对象列表（集合），都有定义列表（集合）中项目数的 length 属性，通过索引访问每个项目。
访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。访问 NodeList 项目，只能通过它们的索引号。
只有 NodeList 对象能包含属性节点和文本节点。
网友评论