#### DOM节点
parentNode ->父节点
childNodes ->子节点们
firstChild ->第一个子节点
lastChild ->最后一个子节点
nextSibling ->后一个兄弟节点
previousSibling ->前一个兄弟节点
**节点操作**
增
crearTextNode();
creatElement();
creatComment();//增加注册
插
insertBefore(a,b);
appendChild();
删
removeChild();
child.remove();
替换
replaceChild(old,new);
例:
查找兄弟节点:
~~~
function retSibling(e, n) {
while (e && n) {
if (n > 0) {
if(e.nextElementSibling){
e=e.nextElementSibling;
}else{
for(e= e.nextSibling;e&&e.nodeType!=1;e=e.nextSibling);
}
n--;
} else {
if(e.previousElementSibling){
e=e.previousElementSibling;
}else{
for(e= e.previousSibling;e&&e.nodeType!=1;e=e.previousSibling);
}
n++;
}
}
return e;
}
~~~
#### 获取CSS属性
创建表格
~~~
var table = document.createElement("table");
table.width = 300;
table.border = 1;
table.createCaption().innerHTML = '新的表格';
var mhead = table.createTHead().insertRow(0);
mhead.insertCell(0).innerHTML = '456';
var mbody = table.createTBody().insertRow(0);
mbody.insertCell(0).innerHTML = "111";
mbody.insertCell(1).innerHTML = "222";
mbody.insertCell(2).innerHTML = "333";
document.body.appendChild(table);
~~~
var box = document.getElementById('box');
1.box.style.cssFloat || box.style.styleFloat;//非IE和IE的兼容调用
2.typeof box.style.cssFloat !='undefuned' ? box.style.cssFloat = 'right' : bpx.style.styleFloat = 'right';//给属性赋值