JavaScript+DOM編程藝術 第三章 DOM

DOM簡介

“Document Object Model”
1.HTML DOM：網頁被加載時，瀏覽器會創建文檔對象模型
2.DOM操作HTML：改變HTML的元素、屬性、CSS樣式、對所有事件作出反應

節點層次

基本方法

getElementById()
返回給定id屬性值的元素節點（唯一的）相對應的對象
getElementsByTagName()
返回一個對象數組，每個對象分別對應給定標籤的元素

//通配符（*）與乘號區分，要加""號
//想知道文檔總共有多少個元素節點
alert (document.getElementsByTagName("*").length);

getAttribute()
1.查詢元素的各種屬性
2.不能用ducument對象調用，和getElementsTagName()結合

var paras=document.getElementsByTagName("p");
for (var i=0;i<paras.length;i++){
    var title_text=paras[i].getAttribute("title");
    if(title_text)
        alert(title_text);
}

setAttribute()
1.對屬性節點的值做修改
2.與getAttribute（）一樣，只能通過元素節點對象調用的函數
3.需要傳遞兩個參數（attribute,value）

var shopping=document.getElementById("purchase");
alert(shopping.getAttribute("title"));//空白或者null
shopping.setAttribute("title","a list of goods");//相當於完成了兩個操作，創建一個不存在的"title"屬性，再設置值
/*如果屬性原來存在，則值會被覆蓋*/
alert(shopping.getAttribute("title"));//顯示“a list of goods”

DOM操作HTML

1.改變HTML輸出流
不要在文檔加載完成後使用document.write()
2.尋找元素
（1）通過id
（2）通過標籤名
3.改變HTML內容
innerHTML

<p id="pid">hello</p>
<p id="pid">hello</p>
<button onclick="demo()">按鈕</button>
<script>
    function demo(){
        var nv=document.getElementById("pid").innerHTML="HELLO";
        document.getElementByTagName("p");//同類元素中的第一個
    }
</script>

4.改變HTML屬性
attribute

<a id="aid" href="http://www.a.com">hello</a>
<button onclick="demo()">按鈕</button>
<script>
    function demo(){
        document.getElementById("aid").href="http://www.b.com";
    }
</script>

DOM操作CSS

<div class="div" id="div">Hello</div>
<button onclick="demo()">按鈕</button>
<script>
    function demo(){
        document.getElementById("div").style.background="#fff";
</script>

DOM EventListener

addEventListener():向指定元素添加事件句柄
removeEventListener()：移除方法添加的事件句柄

<button id="btn">按鈕</button>
<script>
    document.getElementById("btn").addEventListener("click",function(){
        alert("HELLO")
    });
</script>

<button id="btn">按鈕</button>
<script>
    var x=document.getElementById("btn");
    x.addEventListener("click",hello);//添加句柄
    x.addEventListener("click",world);
    x.removeEventListener("click",world);//移除句柄

    function hello(){
        alert("hello");
    }
    function world(){
        alert("world");
    }
</script>