DOM节点操作方法

只读的关系指针

　　DOM中的关系指针都是只读的

<div class="box" id="box"></div>
<script>
var oBox = document.getElementById('box');
console.log(oBox.parentNode.nodeName);//BODY
//在IE8-浏览器下会报错，在其他浏览器下忽略此条语句
oBox.parentNode = document;
console.log(oBox.parentNode.nodeName);//BODY
</script>

 

操作方法

【appendChild()】

　　appendChild()方法用于向childNodes列表的末尾添加一个节点，并返回新增节点。添加节点后，childNodes中的新增节点、父节点和以前的最后一个子节点的关系指针都会相应地得到更新。

<div class="box" id="box"></div>
<script>
var oBox = document.getElementById('box');
var newNode = document.createElement('ul');
var returnedNode = oBox.appendChild(newNode);
console.log(returnedNode.nodeName);//UL
console.log(returnedNode == newNode);//true
console.log(returnedNode == oBox.lastChild);//true
</script>

 

【insertBefore()】

　　insertBefore()方法接收两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个兄弟节点(previousSibling)，同时被方法返回。如果参照节点是null，则insertBefore()与appendChild()方法执行相同的操作。

<ul class="list" id="list">
    <li class="in">1</li>
    <li class="in">2</li>
    <li class="in">3</li>
    <li class="in">4</li>
    <li class="in">5</li>
    <li class="in">6</li>        
</ul>
<script>
var oList = document.getElementById('list');
//新增一个li元素
var oAdd = document.createElement('li');
//设置新增元素的css样式
oAdd.className = "in";
oAdd.style.cssText = 'background-color:red;border-radius:50%';
//添加到oList中
oList.insertBefore(oAdd,null);
var num = -1;
var max = oList.children.length;
function incrementNumber(){
    num++;
    //oList.getElementsByTagName('li')[max]相当于null，所以不报错
    oList.insertBefore(oAdd,oList.getElementsByTagName('li')[num]);    
    if(num == max){
        num = -1;
    }    
    if(num == 0){
        num = 1;
    }
    setTimeout(incrementNumber,1000);
}
setTimeout(incrementNumber,1000);
</script>

 

【insertAfter()封装】

　　原生JavaScript中并没有insertAfter()方法，但是可以用insertBefore()和appendChild()封装方法

function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling)
    }
}

<ul class="list" id="list">
    <li class="in">1</li>
    <li class="in">2</li>
</ul>
<script>
function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling)
    }
}
var oList = document.getElementById('list');
var oLi2 = oList.getElementsByTagName("li")[1];
var newElement = document.createElement("li");
insertAfter(newElement,oLi2);
console.log(oList.childNodes);//在标准浏览器下返回[text, li.in, text, li.in, li, text],在IE8-浏览器下不包含空白文本节点
</script>

 

【replaceChild()】

　　replaceChild()接收的两个参数是要插入的节点和要替换的节点，要替换的节点将由这个方法返回并从文档树中移除，同时由要插入的节点占据其位置

<ul class="list" id="list">
    <li class="in">1</li>
    <li class="in">2</li>
    <li class="in">3</li>
    <li class="in">4</li>
    <li class="in">5</li>
    <li class="in">6</li>        
</ul>
<script>
var oList = document.getElementById('list');
function incrementNumber(){
    //获取oList中子元素的个数
    var len = oList.getElementsByTagName('li').length;
    //如果长度不为0
    if(len){
        //删除最后一个子元素
        oList.removeChild(oList.getElementsByTagName('li')[len-1]);
        //再次调用计时器
        setTimeout(incrementNumber,1000);    
    }
}
//1s后执行函数incrementNumber
setTimeout(incrementNumber,1000);
</script>

 

【removeChild()】

　　removeChild()方法接收一个参数，即要移除的节点，被移除的节点成为方法的返回值。

<ul class="list" id="list">
    <li class="in">1</li>
    <li class="in">2</li>
    <li class="in">3</li>
    <li class="in">4</li>
    <li class="in">5</li>
    <li class="in">6</li>        
</ul>
<script>
var oList = document.getElementById('list');
function incrementNumber(){
    //获取oList中子元素的个数
    var len = oList.getElementsByTagName('li').length;
    //如果长度不为0
    if(len){
        //删除最后一个子元素
        oList.removeChild(oList.getElementsByTagName('li')[len-1]);
        //再次调用计时器
        setTimeout(incrementNumber,1000);    
    }
}
//1s后执行函数incrementNumber
setTimeout(incrementNumber,1000);
</script>

 

【cloneNode()】

　　cloneNode方法用于创建调用这个方法的节点的一个完全相同的副本，该方法接收一个布尔值参数，表示是否执行深复制。在参数为true时，执行深复制，也就是复制节点及整个子节点树。在参数为false的情况下，执行浅复制，即复制节点本身。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。若参数为空，也相当于false

　　[注意]cloneNode()方法不会复制添加到DOM节点中的JavaScript属性，例如事件处理程序等。这个方法只复制特性、(在明确指定的情况下复制)子节点，其他一切都不会复制。

<ul class="list" id="list">
    <li class="in">1</li>
    <li class="in">2</li>
    <li class="in">3</li>
    <li class="in">4</li>
    <li class="in">5</li>
    <li class="in">6</li>        
</ul>
<script>
var oList = document.getElementById('list');
var deepList = oList.cloneNode(true);
/*IE8-与其他浏览器在处理空白字符的方式不一样，IE8-不会为空白符创建节点*/
console.log(deepList.childNodes.length);//IE8-为6，其他浏览器为11
document.body.insertBefore(deepList,oList);
var shallowList = oList.cloneNode();
console.log(shallowList.childNodes.length);//0
</script>

 

【insertAdjacentHTML()】

　　insertAdjacentHTML()方法接收两个参数:插入的位置和要插入的HTML文本。

　　第一个参数必须是下列值之一，且这些值都必须是小写形式:
　（1）    beforeBegin: 插入到标签开始前

   （2）afterBegin:插入到标签开始标记之后

   （3）    beforeEnd:插入到标签结束标记前

  （4）    afterEnd:插入到标签结束标记后

　　第二个参数是一个HTML字符串，如果浏览器无法解析字符串，就会抛出错误

<div class="box" id="box">我是初始元素</div>
<script>
var oBox = document.getElementById('box');
oBox.insertAdjacentHTML("beforebegin","<p>我是新的前兄弟元素</p>")
oBox.insertAdjacentHTML("afterbegin","<p>我是新的前子元素</p>")
oBox.insertAdjacentHTML("beforeend","<p>我是新的后子元素</p>")
oBox.insertAdjacentHTML("afterend","<p>我是新的后兄弟元素</p>")
</script>

/*
屏幕结果显示为
  
我是新的前兄弟元素
我是新的前子元素
我是初始元素
我是新的后子元素
我是新的后兄弟元素
*/

 

注意事项

【注意事项1】如果传入到appendChild()、replaceChild()、insertBefore()中的节点已经是文档的一部分了，则将该节点从原来的位置转移到新位置

<ul class="list" id="list">
    <li class="in">0</li>
    <li class="in" id="test">test</li>
    <li class="in">2</li>
</ul>
<script>
var oList = document.getElementById('list');
var oTest = document.getElementById('test');

document.onclick = function(){
    //点击document文档后，三个li的顺序从0 test 2 变成 0 2 test
    oList.appendChild(oTest);    
    setTimeout(function(){
        //1s后，三个li的顺序变成 2 0 test
        oList.insertBefore(document.getElementsByTagName('li')[0],oTest);
        
        setTimeout(function(){
            //又过1s后，只有两个li，且顺序为test 0
            oList.replaceChild(oTest,document.getElementsByTagName('li')[0]);
        },1000);
    },1000);
}
</script>    

 

【注意事项2】动态性的注意事项

　　【1】存变量的情况

<ul class="list" id="list">
    <li class="in">1</li>
    <li class="in">2</li>
    <li class="in">3</li>
</ul>
<script>
var oList = document.getElementById('list');
//oIn0指向的是第0个对象，而并不是第0个位置
var oIn0 = oList.getElementsByTagName("li")[0];
console.log(oIn0.innerHTML);//1
//oIn0指向的是原来的第0个对象，只不过从第0个位置变化到第2个位置，
oList.appendChild(oIn0);
console.log(oIn0.innerHTML);//1
</script>

 

　　【2】不存变量的情况

<ul class="list" id="list">
    <li class="in">1</li>
    <li class="in">2</li>
    <li class="in">3</li>
</ul>
<script>
var oList = document.getElementById('list');
//获取第0个位置的对象
console.log(oList.getElementsByTagName("li")[0].innerHTML);//1
//将第0个位置的对象变化到第2个位置
oList.appendChild(oList.getElementsByTagName("li")[0]);
//重新获取第0个位置的对象
console.log(oList.getElementsByTagName("li")[0].innerHTML);//2
</script>