JavaScript HTML DOM
HTML DOM
通过HTML DOM (文档对象模型)，可访问 JavaScript HTML 文档的所有元素。连同它们所包含的文本和属性。
当网页被加载时，浏览器会创建页面的文档对象模型。HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
查找 HTML 元素
通过ID查找HTML元素：document.getElementById("ID")
通过标签名查找HTML元素：var x=document.getElementById("main"); var y=x.getElementsByTagName("p");
通过类名查找HTML元素：document.getElementsByClassName("class");
css中很多带-的属性，js中不能使用-，用首字母大写 替代！
HTML DOM 改变 HTML 内容
改变 HTML 输出流
docoument.write();可用于直接向 HTML 输出流写内容。 document.write(Date()); //输出日期
绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档！！！
改变 HTML 内容
修改 HTML 内容的最简单的方法是使用 innerHTML属性。document.getElementById(id).innerHTML=new HTML；
改变 HTML 属性
document.getElementById(id).属性=new value；
HTML DOM 改变 CSS
改变 HTML 样式
document.getElementById(id).style.样式=“new style“”； 新样式必须带双引号或者单引号！！！
HTML DOM 事件
对事件做出反应
onclick：用户点击HTML元素
onchangge：HTML元素发生改变时 常结合对输入字段的验证来使用。
onmouseover：移动鼠标到某个点
onmouseout：鼠标移出某个点
onkeydown：按下鼠标按键
onload：浏览器完成页面加载
onunload ：当用户离开页面时发生的事件(通过点击一个连接，提交表单，关闭浏览器窗口等等。) 同样触发了页面载入事件。
onmousedown：鼠标点击时
onmouseup：鼠标松开时
onfoucs：获得焦点时。
HTML 事件属性
onclick="displayDate()"
使用 HTML DOM 来分配事件
向 button 元素分配 onclick 事件： document.getElementById("myBtn").onclick=function(){displayDate()};
JavaScript HTML DOM EventListener
addEventListener() 方法
当用户点击按钮时触发监听事件：事件名加双引号！！！ document.getElementById("ID").addEventListener("事件名", 函数名); 相当于在HTML中添加onclick=“函数名（）”
document.getElementById("ID").addEventListener("事件名", 函数名); function 函数名（）{} //这样可以引用外函数
document.getElementById("ID").addEventListener("事件名", function （）{}); //这样不需要写函数名。
addEventListener()向指定元素添加事件句柄。添加的事件句柄不会覆盖已存在的事件句柄。可以向一个元素添加多个同类型或不同类型事件句柄。
document.getElementById("ID").addEventListener("click”, 函数名);
document.getElementById("ID").addEventListener("mouseover", 函数名); //添加多个就写两次。
当使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
事件冒泡或事件捕获
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素,
false ：默认的 在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
true ：在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
removeEventListener() 方法移除事件的监听。
document.getElementById("ID").addEventListener(事件名, 函数名, 布尔值);
第一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函数。 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
向 Window 对象添加事件句柄
在监听之前添加window。例：
window.addEventListener("resize",function（）{document.getElementById("id").innerHTML = Math.random( ); } ); 当窗口大小改变时添加监听。随机数
传递参数
当传递参数值时，使用"匿名函数"调用带参数的函数：
跨浏览器解决方法:
兼容IE8：addEventListener换为attachEvent 事件名 加上on
if (x.addEventListener) { // 所有主流浏览器，除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}
HTML DOM 元素
JavaScript HTML DOM 元素(节点)
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性，分别是：
nodeName:节点的名称 nodeValue ：节点的值 nodeType:节点的类型
创建新的 HTML 元素
必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
var para=document.createElement("p"); //这段代码创建新的<p> 元素
var node=document.createTextNode("这是一个新段落。"); //如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
para.appendChild(node); //向 <p> 元素追加这个文本节点：
var element=document.getElementById("div1"); //向一个已有的元素追加这个新元素。这段代码找到一个已有的元素：
element.appendChild(para); //代码在已存在的元素后添加新元素
删除已有的 HTML 元素
var parent=document.getElementById("div1"); //找到 id="div1" 的元 素：
var child=document.getElementById("p1"); //找到 id="p1" 的 <p> 元素：
parent.removeChild(child); //从父元素中删除子元素
DOM 需要清楚您需要删除的元素，以及它的父元素。
解决方案：
找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
child.parentNode.removeChild(child);
