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