JavaScript

DOM

当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model),如下图所示:

DOM 操作 HTML

改变 HTML 输出流:
注意: 绝对不要在文档加载完成后使用 document.write()。这会覆盖该文档
查找元素:
通过id: document.getElementById("id_name");

通过标签: document.getElementByTagName("p");//相同元素的第一个

改变 HTML 内容:

使用属性: innerHTML

function demo(){
    var nv = document.getElementById("id_name");
    nv.innerHTML = "world";
}

 <script>
var i = 0;
function switchP() {
    i++;
    f = document.getElementById("swPhoto");
    g = document.getElementById("btn");
    if(i%2==0){
        f.src = "../../IMAGE/bugirl1.gif";
        g.style.background = "#5d7492";
    }else{
        f.src = "../../IMAGE/bugirl2.gif";
        g.style.background = "#192965";
    }
}
</script>

方法:

方法	描述
getElementByName()	获取 name
getElementByTagName()	获取元素
getAttribute()	获取元素属性
setAttribute()	设置元素属性
childNodes	访问子节点
parentNode	访问父节点
createElement()	创建元素节点
createTextNode	创建文本节点
insertBefore()	插入节点
removeChild()	删除节点
offsetHeight	网页尺寸
scrollHeight	网页尺寸

实例

<div id="Div"></div>
<script>
    function createNodeA() {
        var div = document.getElementById("Div");
        var input = document.createElement("input");
        input.type = "button";
        input.value = "newBTN";
        input.id = "btnt";
        div.appendChild(input);
    }
    function addNodeB() {
        var div = document.getElementById("Div");
        var bt = document.getElementById("btnt");
        var newNode = document.createElement("p");
        newNode.innerHTML = "button 前面的段落";
        div.insertBefore(newNode,bt);
    }
    /*删除子节点*/
    function removeNode() {
        var div = document.getElementById("Div");
        //document.write(div.childNodes.length);//子节点长度，后面的空格也会算
        div.removeChild(div.childNodes[1]);

    }
    /*获取网页尺寸*/
    function getSize() {
        var width = document.body.offsetWidth||document.documentElement.offsetWidth; /*为了兼容性*/
        var height = document.documentElement.offsetHeight;
        alert(width+" , "+height);
    }
    createNodeA();
    addNodeB();
    //removeNode();
    //getSize();
</script>

DOM EventListener

DOM EventListener 方法:
addEventListener(): 用于指定元素添加事件句柄

removeEventListener(): 移除方法添加的事件句柄

<button id="jb_btn">句柄测试</button>
<script>
    var j = document.getElementById("jb_btn");
    j.addEventListener("click",function () {alert("How are you?");});
    j.addEventListener("click",jb_f1);
    <!--j.removeEventListener("click",jb_f1);-->
    function jb_f1() {
        alert("I am fine.");
    }
</script>