Js Dom节点树理解及动态创建标记

最新推荐文章于 2022-11-29 10:03:33 发布

MMRS

最新推荐文章于 2022-11-29 10:03:33 发布

阅读量1.1k

点赞数

分类专栏： javascript-DOM

本文链接：https://blog.csdn.net/mmrsdym/article/details/21223111

版权

javascript-DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以下总结参考来自《javascript Dom编程艺术》

 具有实用价值的元素节点类型（nodeType）可总结为以下3种： 
   
   （1）元素节点，其nodeType值为1； 
   
     （2）属性节点，其nodeType值为2； 
    
   
     （3）文本节点，其nodeType值为3。 
    
   
      更多节点类型可查看 
    http://www.w3school.com.cn/htmldom/dom_nodes_info.asp 或 《javascript高级程序设计第三版》。 
    
   
      以文字描述节点类型比较抽象，下面结合一个例子及节点树图反映什么是元素节点、属性节点及文本节点，以及节点之间的关系。 
    
   
     eg： 
    
    
     
      
     <div id="test">
    <p>this is<em>my</em> content</p>
</div> 
      
      
      
      
       
        
        
       
      
     
       用Dom节点树来理解上面这小段代码，剖析其结构可表示为： 
      
      
       
      
 
      
 
      
     
       对Dom树节点有一定理解过后，下面来动态创建标记，需要用到DOM方法：createElement方法、createTextNode方法、appendChild方法： 
      
      
      
 
      
     
       test.html 
      
      
      
 
      
      
       
      <!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8" />
     <title>test</title>
</head>
<body>
<div id="test"></div>
</body>
</html> 
      



 
      
     
       任务是在 
      
 
      <div id="test"></div> 
      
     
       中插入 
      
      
      <p>this is<em>my</em> content</p> 
      
 
      
     
          完成上面任务需要写的js代码如下： 
      
     
       test.js 
      
      
       
        
        window.onload = function(){
		var divElem = document.createElement('div');
		var pElem = document.createElement('p');
		var emElem = document.createElement('em');
		var text1 = document.createTextNode('this is ');
		var text2 = document.createTextNode('my');
		var text3 = document.createTextNode(' content');
		emElem.appendChild(text2);
		pElem.appendChild(text1);
		pElem.appendChild(emElem);
		pElem.appendChild(text3);
		divElem.appendChild(pElem);
		document.getElementById('test').appendChild(divElem);
	} 
        
       
      
     
       在浏览器运行后的输出结果是“this is my content” 
      
      
      
  
      
      
      总 结 
      
 
      
     
       动态创建标记步骤： 
      
     
       （1）创建新节点； 
      
     
            创建元素节点并保存到变量中,例如： var divElem = document_createElement_x('div'); 
      
     
            创建文本节点并保存到变量中,例如： var text1 = document_createTextNode('this is '); 
      
     
       （2）将节点插入节点树。 
      
     
            例如： document.getElementById_x('test').a(divElem); 
      
     
       注意：分析节点之间的关系，主要是父子节点的关系，这样就会很轻松将节点插入节点树，对于节点树间关系一目了然，按从下往上（叶子节点到根节点）将节点插入节点树。