一、文档树
HTML -> DOM
二、节点
1) 节点遍历
以 p 标签为例
node.parentNode // 父节点 --body
.firstChild // 第一个子节点 --hello,
.lastChild // 最后一个子节点 -- img
.previousSibling // 前一个兄弟节点 -- null
.nextSibling // 下一个兄弟节点 -- div
//返回对象
.childNodes //子节点, 返回NodeList 对象
.children
注：element.childrenIE低版本不支持
2) 节点类型
ELEMENT_NODE // 元素节点(重点)
TEXT_NODE // 文本节点
...
3) 元素遍历
以 p 标签为例
p.firstElementChild // 第一个元素子节点--span
.lastElementChild // 最后一个元素节点--img
.nextElementSibling // 下一个元素兄弟节点
.previousElementSibling // 上一个元素兄弟节点
三、节点操作
1) 获取节点
// 从document文档中获取 指定Id元素 ，返回是节点对象(包含属性和接口)
document.getElementById(id)
// 通过元素调用！ 指定标签名称 返回集合Array() 返回值是动态的，后期的修改会动态的显示出来
element.getElementsByTagName(id)
// 返回元素的数组
element.getElementsByName(name)
// 获取所有的后代元素
element.getElementsByTagName('*')
// 通过类名获取元素
element.getElementsByClassName(ClassName)
// 相当于 element.user.last同时具有多个类名 与顺序无关
element.getElementsByClassName('user last')
/**
*通过选择器 ie9+
*querySelector 第一个符合条件的元素
*All 所有符合条件的元素 返回list(列表) list不是动态的！
*/
element.querySelector('.class')
element.querySelectorAll('#id')
注：IE 6、7、8不支持getElementsByClassName querySelector/All
兼容getElementsByClassName:
function getElementsByClassName(root, className){
if(root.getElementsByClassName) { // 特性侦测
return root.getElementsByClassName(className); // 优先使用W3C规范
}else {
var elements = root.getElementsByTagName('*'); // 获取所有的后代元素
var result = [];
var element,
classNameStr,
flag;
names = names.split(' ');
for(var i = 0; element = elements[i]; i++){
classNameStr = ' ' + element.className + ' ';
flag = true;
// 选择包含类名的元素
for (var j = 0, name; name = names[j]; j++) {
if (classNameStr.indexOf(' ' + name + ' ') == -1) {
flag = false;
break;
}
}
if (flag){
result.push(element);
}
}
return result;
}
}
//
var users = getElementsByClassName(document, 'className');
2) 创建节点
document.createElement(tagName);
3) 修改节点
// 节点及其后代节点的文本内容
element.textContent // ie9+
element.innerText // 不规范 ff不支持
// 节点的HTML内容(新的节点)！ 清除掉原来节点上的click方法等 内存泄漏 安全问题(不检查插入的内容)
element.innerHTML
兼容innerText:
if (!('innerText' in document.body)) {
HTMLElement.prototype._defineGetter_('innerText', function(){
return this.textContent;
});
HTMLElement.prototype._defineSetter_('innerText', function(s){
return this.textContent = s;
});
}
4) 插入节点
element.appendChild(achild)
// 在指定元素的前面添加
element.insertBefore(achild, referenceChild)
5) 删除节点
element.removeChild()
