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() 移除事件的监听

示例：

<!--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>