js节点操作

标签：

# 节点操作 #

## 获取节点方法 ##

         var body = document.body;   //直接通过元素获取
         var d1 = document.getElementById("d1");    //通过ID获取
         var ps = document.getElementsByTagName("p");    //通过元素名称获取
         var attrs = d1.attributes;        //访问元素的属性
         console.log(["属性节点:",attrs["id"].nodeType]);    //访问id元素的节点类型
         console.log(["访问属性：",d1.id]);
         console.log(["访问属性：",d1.getAttribute("id")]);
         console.log(["文本节点：",ps[0].firstChild.nodeType]);
         console.log(["元素节点：",body.nodeType]);
         console.log(ps);

         console.log(d1.firstChild.nextSibling.nextSibling.nextSibling.previousSibling);
         var nodes = d1.childNodes;        //访问d1的所有子节点，得到一个类似数组的集合
         console.log(nodes);
         console.log(d1.parentNode);


## 增加节点 ##

        addNode.onclick = function(){
            var p = document.createElement("p");    //创建子元素
            var text = document.createTextNode("段落");   //创建元素的文本内容
            p.appendChild(text);    //将文本添加到创建的元素中
            document.body.appendChild(p);     //为制定的父节点添加子节点

        }

*d1.childNodes//所有节点集合*

*d1.parentNodes//父节点*

## 插入节点 ##

        var insertNode = document.getElementById("insertNode");
        insertNode.onclick = function(){
            var p = document.createElement("p");
            var text = document.createTextNode("段落");
            p.appendChild(text);
            
            var d1 = document.getElementById("d1");
            document.body.insertBefore(p,d1);
            
            //document.插入节点的父节点.insertBefore(新插入阶段,被插入节点);

        }

## 删除节点 ##

        var delNode = document.getElementById("delNode");
        delNode.onclick = function(){
        document.body.removeChild(document.body.lastChild);
        
        //document.移除节点的父节点.removeChild(移除节点);;

        }

## 替换节点 ##

        var replaceNode = document.getElementById("replaceNode");
        replaceNode.onclick = function(){
            var h1 = document.createElement("h1");
            var text = document.createTextNode("标题");
            h1.appendChild(text);
            document.body.replaceChild(h1,document.body.lastChild);

            //document.替换节点的父节点.replaceChild(替换的节点,被替换的节点);

        }

*`d1.innerHTML += "<p>innerHTML添加</p>";`原内容会被新内容替换，但是效率低*

*innerHTML中有两个元素不能被替换：1.table中的td和tr；2.select中option*

*innerText原样显示“”中的内容，可用在需要显示源代码的网页中，保证标签不被解析*

js节点操作

标签：

原文地址：http://www.cnblogs.com/yuanlinl/p/5540915.html