DOM（文档对象模型）
1>查找 HTML 元素
找到HTML元素方法：
- 通过 id 找到 HTML 元素 document.getElementById([idName])
- 通过标签名找到 HTML 元素 document.getElementByNames([tagName])
- 通过类名找到 HTML 元素 getElementsByClassName([className])
2>改变HTML
- document.write() 可用于直接向 HTML 输出流写内容
- 修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
- 改变 HTML 元素的属性时使用.attribute
3>改变样式
需改变 HTML 元素的样式使用.style.property
4>对事件做出反应
HTML事件：
- 当用户点击鼠标时 onclick()
- 当网页已加载时 onload() 和 onunload()
- 当鼠标移动到元素上时onmouseover() 和 离开元素时onmouseout()
- 当按下鼠标和释放鼠标onmousedown()、onmouseup()
5>添加和删除节点
- .创建结点createElement()
- 创建结点createTextNode()
- 向元素追加结点appendChild 新创建的元素需向原有元素追加
- 删除已有元素 removeChild() 需清楚所要删除的元素以及其父元素
6>添加监听事件
- addEventListener() 用于向指定元素添加事件句柄、添加的事件句柄不会覆盖已存在的事件句柄
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
- 可以向一个元素添加多个事件，同类型的事件句柄。
可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
可以更简单的控制事件（冒泡与捕获）。
JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
removeEventListener() 移除事件的监听
更多
(参考)http://www.runoob.com/jsref/dom-obj-event.html
示例：
<!--HTML-->
<h4>DOM（文档对象模型）基本操作</h4>
<ol id="parent">
<li id="list1" onclick = "getInfo()">点击获取HTML元素</li>
<li id="list2" onclick = "changeInfo()">点击改变HTML内容</li>
<li id="list3" style = "background-color: #00CCFF;font-size: 15px" onclick = "changeStyle()">点击改变样式</li>
<li id="list4" onclick = "addNode()">点击添加节点</li>
<li id="list5" onclick = "deletNode()">点击删除节点</li>
</ol>
<p> 对事件做出反应</p>
<div id="block1" style="background-color: indianred;height: 100px;width: 100px;margin-top: 50px" onmouseover="mOver(this)" onmouseout="mOut(this)">我是第一块</div>
<div id="block2" style="background-color: darkseagreen;height: 100px;width: 100px;margin-top: 50px" onmousedown="mDown(this)" onmouseup="mUp(this)">我是第二块</div>
<!--script-->
<script>
function getInfo() {
var node = document.getElementById("list1");
alert(node.nodeName);
}
function changeInfo() {
var element = document.getElementById("list2");
element.innerHTML = "这是改变之后的内容";
}
function changeStyle() {
var cNode = document.getElementById("list3");
cNode.style.height = "50px";
}
function addNode(){
var fNode = document.getElementById("parent");
var newNode = document.createElement("li");
var text = document.createTextNode("这是新的");
newNode.appendChild(text);
fNode.appendChild(newNode);
}
function deletNode() {
var fNode = document.getElementById("parent");
var child = document.getElementById("list5");
fNode.removeChild(child);
}
function mOver(obj){
obj.innerHTML = "鼠标移上来的时候是这样的嘿嘿嘿";
}
function mOut(obj) {
obj.innerHTML = "我是第一块";
}
function mDown(obj) {
obj.innerHTML = "鼠标按下我是这样的嘿嘿嘿";
}
function mUp(obj) {
obj.innerHTML = "我是第二块";
}
</script>
