zoukankan      html  css  js  c++  java
  • DOM节点的创建

    1、createAttribute() 创建一个属性节点 => 接收参数为string类型的属性名称

    var a=document.getElementsByClassName('name1')[0];
    var d=document.createAttribute('div');//创建	
      a.setAttributeNode(d);//添加
      a.setAttribute('div','100')//设置

    2、 createTextNode() 创建一个文本节点 => 接收参数为string类型的text内容

    var a=document.getElementsByClassName('name1')[0];
    var d=document.createTextNode('div');//创建
      a.appendChild(d)//添加 

    3、createElement() 创建一个元素节点 => 接收参数为string类型的nodename

    var a=document.getElementsByClassName('name1')[0];
    var d=document.createElement('div');//创建
    	a.appendChild(d)//添加
    

    4、createComment()创建一个注释节点 => 接收参数为string类型的注释文本

    var a=document.getElementsByClassName('name1')[0];
    var d=document.createComment('div');//创建
    	a.appendChild(d)//添加
    

    5、DocumentFragment()

    创建一个虚拟的节点对象,或者说,是用来创建文档碎片节点。它可以包含各种类型的节点,在创建之初是空的。

    DocumentFragment节点不属于文档树,继承的parentNode属性总是null。它有一个很实用的特点,当请求把一个DocumentFragment节点插入文档树时,插入的不是DocumentFragment自身,而是它的所有子孙节点。这个特性使得DocumentFragment成了占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。 
    另外,当需要添加多个dom元素时,如果先将这些元素添加到DocumentFragment中,再统一将DocumentFragment添加到页面,会减少页面渲染dom的次数,效率会明显提升

    ps:使用appendChid方法将原dom树中的节点添加到DocumentFragment中时,会删除原来的节点。 

    <body>
    	<ul>
    		<li>Alice</li>
    		<li>Bob</li>
    	</ul>
    	<button onclick="test()">测试</button>
    </body>
    <script type="text/javascript">
    	function test() {
    		var li =document.getElementsByTagName('li')[0]; //ul中的第一个li节点
    		var newFrag = document.createDocumentFragment();
    		newFrag.appendChild(li);
    		newFrag.childNodes[0].childNodes[0].nodeValue = 'Candy';//获取子节点的text并修改
    		document.getElementsByTagName('ul')[0].appendChild(newFrag);
    		} 
    </script>
    

     

    只能操作一次
    var p = document.createElement('p');
     p.innerHTML = '测试DocumentFragment';
     var fragment = document.createDocumentFragment();
     fragment.appendChild(p);
    fragment.innerHTML = '<p>测试DocumentFragment</p>';
    fragment.innerHTML = '<span>测试DocumentFragfffffment</span>';//只能操作一次
     document.body.appendChild(fragment);
    

      

  • 相关阅读:
    iOS学习笔记(六)——ViewController
    IOS学习笔记(五)——UI基础UIWindow、UIView
    iOS学习笔记(四)——iOS应用程序生命周期
    iOS学习笔记(三)——iOS系统架构
    iOS学习笔记(二)——Hello iOS
    iOS学习笔记(一)——ios搭建开发环境
    Android UI开发第三十篇——使用Fragment构建灵活的桌面
    android实现卸载提示
    Android UI开发第二十六篇——Fragment间的通信
    Android UI开发第二十九篇——Android中五种常用的menu(菜单)
  • 原文地址:https://www.cnblogs.com/yiyi17/p/8638304.html
Copyright © 2011-2022 走看看