javascript动态创建元素原理之节点操作

来源：javascript动态创建元素原理之节点操作

对于一个好的页面，为了让用户体验做到极致，动态创建页面元素是必不可少的。下面就来讲讲动态创建元素的核心技术：

DOM模型和事件处理---节点操作

parentNode属性

element.firstChild 返回当前对像的父结点，即上级容器，

var element = document.getElementsByTagName('ul');
var oElement = element[0].parentNode;
for(var i = 0;i<oElement.length;i++){
    console.log(typeof oElement);
}

childNodes 属性

element.childNodes 返回一个数组，这个数组包含给定元素节点的全体子元素

var element = document.getElementsByTagName('ul');
var oElement = element[0].childNodes;
for(var i = 0;i<oElement.length;i++){
    console.log(typeof oElement);
}

nodeType 属性

node.nodeType 返回一个数值
nodeType 属性总共有12种可取值，但其中仅有3种具有使用价值：元素节点、属性节点、文本节点的 nodeType 的属性值分别是 1、2、3。
元素节点的 nodeType 属性值是 1。
属性节点的 nodeType 属性值是 2。
文本节点的 nodeType 属性值是 3。

var element = document.getElementsByTagName('ul');
var oElement = element[0].childNodes;
for(var i=0;i<oElement.length;i++){
    console.log(oElement.nodeType);
}

nodeValue 属性

node.nodeValue 检索或设置节点的值

var text = document.getElementsByTagName('p');
console.log(text[0].childNode[0].nodeValue);
text[0].childNodes[0].nodeValue = 'value';
console.log(text[0].childNode[0].nodeValue);

nodeName 属性

node.nodeName 返回一个大写字符串（节点名）

var name = document.getElementsByTagName("p");
console.log(name[0].nodeName);

firstChild 属性

node.firstChild 直接访问childNodes[]数组的第一个元素

var parent = document.getElementsByTagName('p');
var child = parent[0].firstchild;
console.log(child.nodeValue);

lastChild 属性

node.firstChild 直接访问childNodes[]数组的最后一个元素

var parent = document.getElementsByTagName('p');
var child = parent[0].lastchild;
console.log(child.nodeValue);

createElement 属性

作用：建立并返回一个TAGS（标签）对像

var li = document.createElement("li");

将会得到一个LI，和常用的LI对象一样，可以给ID，INNERHTML之类的属性。




insertBefore 属性

作用：把oNewNode 结点加进object容器作为firstChild，并返回新结点对像
oChildNode是指在哪个旧结点之前，在IE里，oChildNode可以省略，在其它浏览就不可省略了


var ul = $('list');//容器
   var li = document.createElement("li");
   if(!preObj){//第一次点击
    if($('vv0')){//列表没有内容
     newli = $('vv0');
    }else{//如果有，li0为最顶
     preObj = $('li0');
     var newli = ul.insertBefore(li,preObj);
    }
   }else{
    var newli = ul.insertBefore(li,preObj);
   }
   preObj = newli;


newli.innerHTML = "我是新的LI。";


如果需要插入到容器的最后面时，用：appendChild