dom

1.文檔對象模型 DOM

　　DOM 是 W3C 的標準，DOM 定義了訪問 HTML & XML 文檔的標準。在 DOM 標準裏，HTML 文檔中的全部內容都是節點：

    ★整個文檔是一個文檔節點

    ★每一個 HTML 元素是元素節點

    ★HTML 元素內的文本是文本節點

    ★每一個 HTML 屬性是屬性節點

    ★註釋是註釋節點

     這種結構被稱爲節點樹

經過 HTML DOM，樹中的全部節點都可經過 javascript 進行訪問。全部 HTML 元素都可被修改，也能夠建立或刪除。

2.DOM方法、屬性

2.1.找到標籤

2.1.1.找到某個標籤的方法：

　　★document.getElementById('header')  方法返回帶有指定 ID 的元素

　　★document.getElementsByTagName('a')  獲取多個元素（列表）

　　★document.getElementsByClassName('footer')  由獲取多個元素

var element = document.getElementById("header");
var site = document.getElementsByTagName('a')
site[0].innerText
"baidu"
site[1].innerText
"qq"
site[2].innerText
"aliyun"
site.length
3

2.1.2.找到某個標籤的屬性：

　　★parentElement  父節點標籤元素

　　★children  子節點標籤元素

　　★firstElementChild  頭一個子標籤

　　★lastElementChild  最後一個子標籤

　　★nextElementSibling  下一個兄弟標籤

　　★previousElementSubling  上一個兄弟標籤

2.2.標籤屬性

　　修改屬性，改變標籤內容

　　★innerText

　　★innerHTML

.hidden{    <!-- 測試示例 -->
    display: none;
}

.webSite{
    line-height: normal;
}

<div id='web' class="webSite">正文內容摘要    <!-- 測試示例 -->
    <p>baidu</p>
    <p>qq</p>
    <p>aliyun</p>
</div>

　　實例

site[1].innerHTML
"<p>qq</p>"
site[1].innerText
"qq"

web = document.getElementsByClassName('webSite')
HTMLCollection [ <div.webSite> ]
web[0].firstElementChild
<p>
web[0].firstElementChild.innerText
"baidu"
web[0].firstElementChild.nextElementSibling.innerText
"qq"
web[0].firstElementChild.nextElementSibling.nextElementSibling.innerText
"aliyun"

　　

　　★className 

　　★classList 

web[0].className
"webSite"
web[0].classList
DOMTokenList [ "webSite" ]

web.className = "big"
"big"
web.className
"big"
web.classList
DOMTokenList [ "big" ]
web
<div id="web" class="big">

　　★classList.add('hidden')

　　★remove('hidden')

　　刷新網頁，添加 class

web.className
"webSite"
web.classList
DOMTokenList [ "webSite" ]
web.classList.add('hidden')
undefined
web.classList
DOMTokenList [ "webSite", "hidden" ]
web.classList.remove('hidden')
undefined