DOM节点操作

TIP：对于添加事件来说，可以脚本中编写添加事件循环，减少代码量，增加效率

if ( window . getComputedStyle )

// 通过属性的有无进行判断

console . log ( window . getComputedStyle ( a ). fontSize );

// ie 不支持

else

console . log ( a . currentStyle . color );

// 低版本 ie 支持，高版本浏览器不支持。

新建节点并且插入：

var text2 = document . createElement ( "p" );

text2 . innerHTML = "lalalallalalla" ;

var a = document . getElementById ( "div" );

a . appendChild ( text2 );

// 把一个子元素追加到父元素后面

console . log ( text2 );

var text1 = document . getElementById ( "text1" );

var text3 = text1 . cloneNode ( true );

// 克隆方法

// a.appendChild(text3);

a . insertBefore ( text2 , text1 );

// 加到前面，属性：新增的元素和在哪个元素前

获取节点：

用document.body来对body进行操作

console. log ( ul . firstElementChild );

// 只获取元素节点

console. log ( ul . firstChild );

// 空格和换行也默认为一个元素，会出错

var li2 = document . getElementById ( "li2" );

console. log ( li2 . parentNode );

console. log ( ul . childNodes );

console. log ( ul . children );

console. log ( li2 . ownerDocument );

console. log ( ul . ownerDocument );

// 同级

console. log ( li2 . previousSibling );

console. log ( li2 . previousElementSibling );

console. log ( li2 . nextSibling );

console. log ( li2 . nextElementSibling );

console. log ( ul . attributes );

删除节点和替换：

function remove () {

text = document . getElementById ( "text" );

document . body . removeChild ( text );

}

var n = document . createElement ( "p" );

n . innerText = " 替换 " ;

document . body . replaceChild ( n , text );