DOM结点/动态创建元素

childNodes获取子节点集合(包含元素结点,文本-空白结点,注释结点)
可以根据NodeType属性进行区分
parentNode  获取父节点 只有一个
*通过父节点.children 可以获取全部子元素(纯子元素节点)
设置奇偶行颜色不同
<ul id="mv">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script type="text/javascript">
var mv = document.getElementById('mv');
if (mv.hasChildNodes()) {
    for (var i = 0; i < mv.children.length; i++) {
        var li = mv.children[i];
        if (i % 2 === 0) {
            li.style.backgroundColor = 'red';
        } else {
            li.style.backgroundColor = 'green';
        }
    }
}
</script>
获取第一个子节点 firstChild;  只读,不能修改
获取第一个子元素 firstElementChild;  有兼容性问题
解决兼容性问题:
function getFirstElement(element) {
	var node,nodes=element.childNodes,i=0;
	while (node = nodes[i++]) {
		if (node.nodeType===1) {
			return node;
		}
	}
	return null;
}
兄弟节点:
上一个兄弟节点:previousSibling
下一个兄弟节点:nextSibling
上一个兄弟元素:previousElementSibling
下一个兄弟元素:nextElementSibling
解决兼容性:
function getNextElementSibling(element) {
    var el=element;
    while (el=el.nextSibling) {
      if (el.nodeType ===1 ) {
           return el;
      }
    }
    return null;
}
动态创建元素:
document.write()    会覆盖页面全部内容
element.innerHTML=    可以把带有标签的字符串给元素,但是画这些会耗时
element.innerHTML+=    每一次都会重新绘制 ,字符串是不可变的重新开辟内存

优化:使用数组的方法,往数组里面push,最后转换成字符串.join('');
当动态创建元素还同时添加属性,采用第三种方法
document.createElement()  

var p=document.createElement('p');
p.innerText='hello';
p.style.color='red';
//把p放进div中,也可以先放进去后设置样式。
var box=document.getElementById('box');
box.appendChild(p);  //放进最后面
父级.removeChild()  //移除元素
insertBefore()   //元素插入到页面指定位置
父级.insertBefore(插入的元素,在谁前边)
replaceChild()    //替换元素
父级.replaceChild(替换的元素,替换谁)

可以将页面上已经有的元素移动到想要移动的其他位置,原来元素消失。

补充:
select.innerHTML=all.innerHTML这种方法移动元素的话会丢失元素事件
all.innerHTML=''; 这种方法清空元素的话如果元素绑定了事件,那么会发生内存泄漏

发表评论

邮箱地址不会被公开。 必填项已用*标注