JavaScript中的DOM解析

 获取页面中的元素的方法:
 Document.getElementById(id);
 Document.getElementsByTagName(tagName);
 创建元素
 Docuemnt.createElement();
 
 获取/设置元素的属性
 Element.getAttribute(attributeName);
 Element.setAttribute(attributeName,value);

 给容器追加元素.从Document中继承而来.
 Element.appendChild(Element);

 看一些例子,先看效果: 

分析具体的代码:

function load()...{
    for(var i=0;i<10;i++)...{
        var div = document.createElement("div");
        //设置属性
        div.setAttribute("id","div_"+i);
        div.setAttribute("innerText","div_innerText_"+i);
        
        //为新创建的元素添加事件处理函数
        div.onmouseover = over;
        div.onmouseout = out;
        div.onclick = click;

        //获取body结点
        document.getElementById("test").appendChild(div);
    }
}

function over()...{
    var src = window.event.srcElement;
    src.style.backgroundColor = "#ffc330";
}

function out()...{
        var src = window.event.srcElement;
    src.style.backgroundColor = "#ffffff";
}

function click()...{
    var src = window.event.srcElement;
    var txt = document.getElementById("txt");
    txt.value = src.innerText;
}

HTML代码:

<div id="test"></div>
<div>
    <input type="text" id="txt" value="txt" />
    <input type="button" id="test1" value=" test " onclick="load();" />
</div>