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;
}

正文内容摘要    
    
baidu
    
qq
    
aliyun

　　实例

site[1].innerHTML
"
qq
"
site[1].innerText
"qq"

web = document.getElementsByClassName('webSite')
HTMLCollection [  ]
web[0].firstElementChild

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

　　★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