JavaScript HTML DOM

JavaScript-HTML DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
通过HTML DOM，可访问JavaScript HTML文档的所有元素;通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的
HTML。
（1）改变页面的所有HTML元素
（2）改变页面的所有HTML属性
（3）改变页面的所有CSS样式
（4）对页面中的所有时间做出反应

1.查找HTML元素
（1）通过id查找HTML元素document.getElementById("");
（2）通过标签名查找HTML元素document.getElementsByTagName("");
（3）通过类名查找HTML元素document.getElementsByClassName("intro");
2.改变HTML
（1）改变HTML输出流document.write(Date());
说明：绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。
（2）改变HTML内容document.getElementById(id).innerHTML=新的 HTML
（3）改变HTML属性document.getElementById(id).attribute=新属性值
例如：document.getElementById("image").src="landscape.jpg";
3.改变CSS
（1）改变HTML样式document.getElementById(id).style.property=新样式
例如：document.getElementById("p2").style.color="blue";
4.对事件作出反应
我们可以使用HTML事件属性
如：<button οnclick="displayDate()">点这里</button>
也可以使用HTML DOM来分配事件
例如：
<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
</script>
5.JavaScript  HTML DOM EventListener
（1）addEventListener()方法：该方法用于指定元素添加事件句柄，它添加的事件句柄不会覆盖已存在的事件句柄；
可以向一个元素添加多个事件句柄，也可以向同个元素添加多个同类型的事件句柄，如：两个click事件；
可以向任何DOM对象添加事件监听，不仅仅是HTML元素，如Window对象；
该方法可以更简单的控制事件（冒泡与捕获）
语法：element.addEventListener(event,function,userCapture);
例如：document.getElementById("myBtn").addEventListener("click", displayDate);
第一个参数是事件类型（click或mousedown）,第二个参数是事件触发后调用的函数，第三个是Boolean值
用于描述事件是冒泡还是捕获，该参数是可选的，默认为false，即为冒泡传递。
（2）事件传递有两种方式：冒泡与捕获【冒泡：内部元素先触发，再触发外部元素，捕获相反】
（3）removeEventListener()方法：removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
用法：element.removeEventListener("mousemove", myFunction);
6.JavaScript HTML DOM元素（节点）
（1）appendChild():在某个节点的尾部追加新节点；
例如：
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);
（2）insertBefore():将新元素添加到开始位置
例如：
element.insertBefore(para, child);其中para为新创建的元素，child是已存在的元素，该语句是将para添加到child之前
（3）removeChild():移除一个元素，【说明需要知道该元素的父元素】
例子：parent.removeChild(child);其中parent为父元素，child为需要移除的元素
（4）replaceChild():替换DOM中的元素
例子：parent.replaceChild(para,child);其中parent为父元素，para新元素，child为将被替换的元素
7.JavaScript HTML DOM集合（Collection）
说明：getElementsByTagName()方法返回HTMLCollection对象，HTMLCollection对象类似HTML元素的一个数组，
集合中的元素可以通过索引（以0为起始位置）来访问，但是不可以使用数组方法：valueOf()、pop()、push()或join()
实例：
var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}
8.JavaScript HTML DOM节点列表（NodeList）
说明：所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

HTMLCollection与NodeList的区别
HTMLCollection 是 HTML 元素的集合。它的元素可以通过name，id，索引来获取；
NodeList 是一个文档节点的集合。它的元素只能通过索引来获取，只有NodeList对象有包含属性节点和文本节点。
NodeList 中的元素可以通过索引（以0为起始位置）来访问，但是不可以使用数组方法：valueOf()、pop()、push()或join()
实例：
var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}