JavaScript中的DOM解析

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

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

 看一些例子,先看效果: 

<script language="javascript" > 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; } </script>

分析具体的代码:

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 >