DOM节点Node类型
节点的属性：
（node只能获取当前节点的东西，不能获取里面的东西）（文本节点不等于文本内容）
nodeName 节点元素的标签名，和tagName等价
nodeType 元素节点的类型值，
nodeValue 元素节点的值，元素节点本身没有内容，输出null
node本身把节点指针放在元素中，本身没有value
层次节点
childNodes 返回当前元素节点所有的子节点列表
例如：<div id = "hello"> hello!!<em>xiexei</em> end </div>
第一个子节点是hello!! 文本节点
第二个子节点是<em>xiexei</em> 元素节点
第三个子节点是end 文本节点
alert(box.childNodes[0].nodeValue); 获取文本子节点的文本内容
不能在文本子节点中使用innerHTML
innerHTML可以解析HTML，nodeValue只能直接输出文本
firstChild 和 lastChild
alert(box.firstChild.nodeValue);
alert(box.lastChild.nodeValue);
ownerDocument
返回HTMLDocument文档对象，整个文档的根节点，相当于 alert(document)
parentNode，previousSibling，nextSibling
分别返回父节点，前节点，后节点
属性节点
attributes属性 返回该节点的属性节点集合
alert（box.attributes); 返回NamedNodeMap，集合数组，保存着元素节点的属性列表
alert（box.attributes.length); 返回属性列表的长度
alert（box.attributes[0].nodeType); 遍历时从后往前，最后一个属性的类型
alert（box.attributes['title'].nodeValue); 可直接写入属性名称
相关方法：
getNamedItem(name)
removeNamedItem(name)
setNamedItem(node)
item(pos) 返回位于数字pos位置处的节点
忽略空白文本节点
function filterWhiteNode(node){
var ret = [];
for(var i = 0; i < node.length; i++){
if(node[i].nodeType ===3 && /^\s+$/.test(node[i].nodeValue)){
continue;
}else{
ret.push(node[i]); //将非空白节点取出来放在一个新的数组并返回
}
}
return ret;
}
移除空白文本节点
function removeWhiteNode(node){
for(var i = 0; i < node.length; i++){
if(node[i].nodeType ===3 && /^\s+$/.test(node[i].nodeValue)){
node[i].parentNode.removeChild(node[i]); 先回到父节点
}
}
return node;
}
操作节点
write() 将任意字符串插入到文档中，一般用于测试，会覆盖原来的html内容
document.createElement() 创建一个元素节点
parent.appendChild() 将新节点追加到子节点列表的末尾
parent.createTextNode() 创建一个文本节点
insertBefore() 将新节点插入在前面
box.parentNode.insertBefore(p,box); 要先回到父节点
旧节点 .parentNode.replaceChild() 将新节点替换旧节点，第一个参数是新，第二个参数是旧
copy.cloneNode() 复制节点，括号里面放true或者false，true表示复制内容
旧节点 .parentNode.removeChild() 移除节点，括号放原节点
DOM查找元素的方法
getElementById() 获取特定ID元素的节点
getElementsByTagName() 获取相同元素的节点列表
getElementByName() 获取相同名称的节点列表
getAttribute() 获取特定元素节点属性的值
setAttribute() 设置特定元素节点属性的值
removeAttribute() 移除特定元素节点属性
1，getElementById()
等html加载完以后再执行onload里面的js
window.onload = function(){
if (document.getElementById) {
var box = document.getElementById("hello");
alert(box);
} else{
alert('不兼容');
}
};
输出： [object HTMLhelloElement] 获取该元素
相关属性的直接调用：
alert(box.tagName); //获取元素节点的标签名称
alert(box.innerHTML); //获取标签之间的文本
HTML属性的属性
<div id = "hello" title = "标题" class= "pox" style = "color:red;"> hello!! </div>
alert(box.id);
alert(box.title);
alert(box.style.color);
alert(box.className);
box.innerHTML = 'hahahaha'; //赋值，可以解析HTML，不是单纯的纯文本，包含HTML
2，getElementsByTagName()
window.onload = function(){
var li = document.getElementsByTagName('li'); //参数传递一个标签名
alert(li); //返回一个数组集合，HTMLCollection
alert(li.length); //返回数组的数量
alert(li.item(0)); //HTMLLIElement对象，获取第一个li的节点对象
alert(li[0].
tagName); // LI
alert(li[0]
.innerHTML); // 输出标签中的文本内容
};
var all = document.getElementsByTagName('
*'); //获取全部元素
3，getElementByName()
只有HTMLDocument类型才有的方法,一般用于表单上
<input>类型有合法的name属性
4，getAttribute() 可以获取自定义属性
5，setAttribute()
box.setAttribute('title','标题'); 创建一个属性和属性值
box.setAttribute('align','center'); 居中属性
box.setAttribute('style','color:green'); ie可能没效果，尽量避免
DOM的技术
呈现模式（区分标准模式和混杂模式）（有doctype则为标准模式）
document.compatMode 标准则返回CSS1Compat，否则返回BackCompat
documentElement.clientWidth 只对IE有效
滚动
document.getElementById('hello').scrollIntoView(); 将指定的节点设置到可见范围内
children属性（非标准）
获取有效子节点列表，可忽略空白
contains()方法
alert(box.contains(box.firstChild)); 判断一个节点是不是另一个节点的后代
alert(box.
compareDocumentPosition(box.firstChild)); 火狐DOM3中实现了替代方法