#### 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';//給屬性賦值