第1章.基础篇(上)
DOM (Document Object Model) - 文档对象模型
以对象的方式来表示对应的html，它有一系列的规范
i.e.
在浏览器中，DOM是通过JS实现的。
DOM:
DOM Core：核心结构、API的定义
DOM HTML： 定义HTML如何转化成对象（HTML对应的对象）-- 操作节点
DOM Style：样式转换成对象 -- 操作样式
DOM Event：事件对象的模型 -- 响应用户的操作
文档树
HTML -> DOM树
节点遍历
node.parentNode
.firstChild
.lastChild
.previousSibling
.nextSibling
.firstElementChild
.lastElementChild
.nextElementSibling
.previousElementSibling
i.e.
p.parentNode是body
p.firstChild是hello,
p.firstElementChild是span
p.lastElementChild是img
p.lastChild是img
p.previousSibling没有，则返回null
p.nextSibling是div
节点类型：
ELEMENT_NODE：元素节点 （如上body, p, div, span, img）
TEXT_NODE：文本节点（如上hello,, 微专业, mooc）
COMMENT_NODE
DOCUMENT_TYPE_NODE
课堂交流：如何实现浏览器兼容版的element.child
element.children能够获取元素的元素子节点，但是低版本的ie不支持，如何在低版本的ie上兼容类似的功能。
http://www.jianshu.com/p/b7e111015c48
节点操作
Abstract: getElementById, getElementsByClassName, getElementsByTagName, querySelector(All), createElement, innerText, appendChild, insertBefore, removeChild, innerHTML
浏览器读取HTML渲染出页面结构以后，还可以通过JS改变页面的结构
获取节点:
通过节点关系可以获取节点（父子关系、兄弟关系）
缺点：可维护性差，如果一个节点的位置发生了变化，则关系也可能会被打乱
所以，一般使用接口来获取节点（获得的是节点对象：
getElementById：
element = document.getElementById(id)：id在document中是唯一标识
getElementsByTagName：
collection = element.getElementsByTagName(tagName)：通过元素来调用来获取元素内的节点
若tagName为"*", 则会获取指定元素element包含的所有的后代元素节点
注：collection是动态的集合
getElementsByClassName：
collection = element.getElementsByClassName(className)
通过空格分割，可以指定多个类名（无序），获取同时具有多个类名的元素
但是IE 6/7/8不兼容getElementsByClassName
function getElementsByClassName(element, classNames) {
if (element.getElementsByClassName) {
// 特性侦测，如果兼容则优先使用W3C规范的方式
return element.getElementsByClassName(classNames);
} else {
var elements = element.getElementsByTagName("*"); // 所有后代元素
var result = [];
var element,
classNameStr,
flag;
classNames = classNames.split(‘ ‘);
for (var i = 0; element = elements[i]; i++) {
classNameStr = ‘ ‘ + element.className + ‘ ‘;
flag = true;
for (var j = 0, className; className = classNames[j]; j++) {
if (classNameStr.indexOf(‘ ‘ + className + ‘ ‘) == -1) {
flag = false;
break;
}
}
if (flag) {
result.push(element);
}
}
return result;
}
}
querySelector：
element = element.querySelector(selector)
返回第一个符合的元素
querySelectorAll：
list = element.querySelectorAll(selector)
i.e.
<div id="users">
<h2>....</h2>
<ul>
<li class="user">Satoshi</li>
<li class="user">春来草青</li>
<li class="user last">Kash</li>
</ul>
</div>
var users = document.querySelector(#users"); // 获取到元素div#users
users.querySelectorAll(".user"); // 获取到 [ li.user li.user li.user.last ]
document.querySelectorAll("#users .user"); // 获取到同上 [ li.user li.user li.user.last ]
创建节点
修改节点
插入节点
删除节点
innerHTML