总结一下用js操作DOM元素
创建
document.createElement()
查找
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document.getElementByName() 返回带有指定名称的对象集合。
document.getElementByTagName() 返回带有指定标签名的对象集合。
document.getElementsByClassName() 返回文档中所有指定类名的元素集合。存在兼容性问题,IE6/7/8不支持
这里,重新实现一个函数myGetElementsByClassName,兼容IE6/7/8
function myGetElementByClassName(classname) {
var ele = [];
if (!document.getElementsByClassName) {
console.log("这是IE6/7/8吧");
var dom = document.all ? document.all : document.getElementsByTagName('*');
for (var i = 0; i < dom.length; i++) {
// if (dom[i].className == classname)
// ele.push(dom[i]);
var reg=new RegExp('\\b'+classname+'\\b','g');
if (reg.test(dom[i].className)) {
ele.push(dom[i]);
}
}
} else {
ele = document.getElementsByClassName(classname);
console.log('不是IE6/7/8 bro');
}
return ele;
}
添加
appendChild(),返回新增的节点
如果传入到appendChild中的已经是文档的一部分,则把该节点移动到新的位置
还有一种是insertBefore(),这种方法可以插入到指定位置。接收两个参数,第一个是要插入的节点,第二个是作为参照的元素。要插入的节点会成为作为参照的节点的previousSibling。
替换
replaceChild() 接收两个参数,第一个是要插入的节点,第二个是要替换的节点。
在使用replaceChild()插入一个节点时,该节点的关系指针都会从被它替换的节点复制过来。
移除
removeChild() 接收一个参数,要移除的节点。
复制
cloneNode() 用于创建调用这个方法的节点的一个完全相同的副本。
接收一个布尔值参数,如果为true则执行深复制,也就是复制节点以及整个子节点树;如果为false则执行浅复制,也就是只复制节点本身。
复制后返回的节点副本属于文档所有,但是并没有为它指定父节点,需要其他方法来添加到文档中。
移动
移动元素一般是移动有的节点,三种方法:
第一种,使用appendChild()
第二种,使用insertBefore()
第三种,先复制要移动的节点,移除原来这个节点,然后把新得到的节点添加到文档中。
<div id="div1">11111111</div>
<div id="div2">22222222</div>
<div id="div3">33333333</div>
<script type="text/javascript">
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
//第一种方法
document.body.appendChild(div1);
//第二种方法
document.body.insertBefore(div1,div3);
//第三种方法
var newNode = div1.cloneNode(true);
document.body.removeChild(div1);
document.body.insertBefore(newNode,div3);
</script>