JavaScript_DOM

twilight0402發表於2017-02-03
JavaScript

版權宣告：本文為博主原創文章，轉載請註明出處。 https://blog.csdn.net/twilight_karl/article/details/54848178

DOM(document object model) 即文件物件模型。
DOM中共有三種型別的節點，元素節點、文字節點、屬性節點。

getElementsById()

通過ID獲取元素
一個ID只能使用一次，所以，該方法會返回一個唯一的物件
注：可以使用typeof判斷變數的型別

typedof + 變數名

以下面這段程式碼為例：

<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Shopping list</title>
    </head>
    <body>
        <h1>What to by</h1>
        <p title="a gentle reminder">Don`t forget to buy this stuff</p>
        <ul id="purchases">
            <li>A tin of beans</li>
            <li class="sale">Cheese</li>
            <li class="sale implement">Milk</li>
        </ul>

    <script src="JS/test1.js"></script>
    </body>
</html>

var temp = document.getElementById("purchases");
alert(typeof temp);

結果為object

getElementsByTagName()

根據標籤名返回一個物件陣列

使用以下JavaScript語句：

var temp = document.getElementsByTagName("li");
alert(temp.length);

結果是3 ，表示一個長度為3的陣列。也可以將函式引數改為萬用字元*，這樣表示獲取DOM中的所有標籤。

getElementsByClassName()

通過類名獲取元素，返回一個陣列。引數為類名，類名可以不唯一，多個類名錶示同時含有多個類名的元素，類名順序可以不固定
這個方法比較新，不是所有瀏覽器都支援

獲取/更改標籤中的屬性值

可以通過getAttribute(attribute)獲取元素中的屬性值，通過setAttribute(attribute,value)來更改屬性的值，如果一個元素原來沒有這個屬性，使用setAttribute會先建立這個屬性在給這個屬性賦值，雖然建立了這個屬性，但是網頁的原始碼並不會因此發生任何改變，

var temp = document.getElementsByTagName("p");
for(var i = 0 ; i < temp.length; i++){
    alert(temp[i].getAttribute("title"));
    temp[i].setAttribute("title","s");
    alert(temp[i].getAttribute("title"));
}

結果是先彈出a gentle reminder，再彈出s，因為title的值被更改為s。