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

阳光穿透心脏的1/2处 2022-08-06 02:10 165阅读 0赞

来源：[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*

[javascript]: http://www.17javascript.com/thread-66-1-1.html