学习DOM笔记
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM树
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
一、查找HTML元素
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
var x=document.getElementById("idName");
var y=x.getElementsByTagName("p");
var x=document.getElementsByClassName("className");
二、改变HTML
- 改变输出流
- 改变内容
- 改变属性
document.write(内容) //写在HTML最后
document.getElementById(id).innerHTML=新的 HTML
document.getElementById(id).attribute=新属性值
三、改变CSS
document.getElementById(id).style.property=新样式
四、HTML DOM 事件
1.使用事件
HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件：
- 元素被点击。
- 页面加载完成。
- 输入框被修改。
- ……
使用事件的两种方法：
-
HTML 事件属性
如需向 HTML 元素分配 事件，您可以使用事件属性。
实例
向 button 元素分配 onclick 事件：
<button onclick="displayDate()">点这里</button>
-
使用 HTML DOM 来分配事件
HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：
实例
向 button 元素分配 onclick 事件：
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
2.对事件做出反应
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
例如点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript
3.各种事件
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
实例
<body onload="checkCookies()">
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
实例
<input type="text" id="fname" onchange="upperCase()">
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
实例
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;
width:120px;height:20px;padding:40px;">Mouse Over Me</div>
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
实例
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()"
src="bulboff.gif" width="100" height="180" />
onload
当页面完成加载时执行。
<body onload="mymessage()"></body>
onfocus
当输入字段获得焦点时执行
<input type="text" onfocus="myFunction(this)">
所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
五、DOM EventListener
addEventListener() 方法
addEventListener() 方法用于向指定元素添加事件句柄。
语法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件
removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
实例
element.removeEventListener("mousemove", myFunction);
兼容性详见(https://www.jianshu.com/p/a40e492a016d)
和(http://www.runoob.com/js/js-htmldom-eventlistener.html)
六、DOM 元素 (节点)
1.创建新的 HTML 元素 (节点) - appendChild()
element.appendChild(para); //添加到已存在的元素中:
2.创建新的 HTML 元素 (节点) - insertBefore()
element.insertBefore(para, child);
appendChild(a) 方法，它用于添加新元素a到尾部;
insertBefore(a,b) 方法，将新元素a添加到b开始位置。
3.移除已存在的元素 - removeChild()
要移除一个元素，你需要知道该元素的父元素。
parent.removeChild(child);
4.替换 HTML 元素 - replaceChild()
我们可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。
parent.replaceChild(para, child);
七、DOM 集合(Collection)
HTMLCollection 对象
getElementsByTagName() 方法返回 HTMLCollection 对象。
HTMLCollection 对象类似 HTML 元素的一个数组。
HTMLCollection 对象的 length 属性定义了集合中元素的数量
注意：
HTMLCollection 不是一个数组！
HTMLCollection 看起来可能是一个数组，但其实不是。
你可以像数组一样，使用索引来获取元素。
HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。
八、DOM 节点列表
NodeList 对象是一个从文档中获取的节点列表 (集合) 。
NodeList 对象类似 HTMLCollection 对象。
一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。
NodeList 对象 length 属性定义了节点列表中元素的数量。
HTMLCollection 与 NodeList 的区别
| HTMLCollection | NodeList |
|---|---|
| 是 HTML 元素的集合。 | 是一个文档节点的集合。 |
| HTMLCollection 元素可以通过 name，id 或索引来获取。 | NodeList 只能通过索引来获取。 |
| 只有 NodeList 对象有包含属性节点和文本节点。 |
NodeList 与 HTMLCollection 有很多类似的地方。
- NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
- NodeList 与 HTMLCollection 都有 length 属性。
节点列表不是一个数组！
节点列表看起来可能是一个数组，但其实不是。
你可以像数组一样，使用索引来获取元素。
节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。
网友评论