l创建DOM元素
•createElement(标签名)  创建一个节点
•appendChild(节点)  追加一个节点
–例子：为ul插入li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>创建li</title>

<script>

window.onload=function()

{

    //获取按钮

    var oBtn=document.getElementById('btn1');

    //获取文本

    var oTxt=document.getElementById('txt1');

    //获取ul

    var oUl=document.getElementById('ul1');

    oBtn.onclick=function()

    {

        //在do里创建li

        var oLi=document.createElement('li');

        //文本框的值赋予oli

        oLi.innerHTML=oTxt.value;

        //父类添加子节点

        oUl.appendChild(oLi);

        //清空txt里的值

        oTxt.value='';

        }

    }

</script>

</head>

<body>

<input id="txt1" type="text" />

<input id="btn1" type="button" value="创建Li"/>

<ul id="ul1">

    <li>aaa</li>

</ul>

</body>

</html>
l插入元素
•insertBefore(节点, 原有节点)  在已有元素前插入
–例子：倒序插入li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>父.insertBefore(子节点，谁之前)</title>

<script>

window.onload=function()

{

    var oBtn=document.getElementById('btn1');

    var oTxt=document.getElementById('txt1');

    var oUl=document.getElementById('ul1');

    oBtn.onclick=function()

    {    //创建个li

        var oLi=document.createElement('li');

        //获取ul里的li

        var aLi=oUl.getElementsByTagName('li');

        //把otxt的值赋予oli

        oLi.innerHTML=oTxt.value;

        //插入到oul里ali[0]坐标之前；

        oUl.insertBefore(oLi, aLi[0]);

        oTxt.value='';

        }

    }

</script>

</head>
l删除DOM元素
•removeChild(节点)  删除一个节点
–例子：删除li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>删除节点</title>

<script>

window.onload=function()

{

    var aA=document.getElementsByTagName('a');

    var oUl=document.getElementById('ul1');

    var i=0;

    for(i=0; i<aA.length; i++)

    {

        //点击a标签执行函数

        aA[i].onclick=function()

        {

            //删除oul的父级；

            oUl.removeChild(this.parentNode);

            }

        }

    }

</script>

</head>

<body>

<ul id="ul1">

    <li>sdfsdf <a href="javascript:;">删除</a></li>

    <li>3432 <a href="javascript:;">删除</a></li>

    <li>tttt <a href="javascript:;">删除</a></li>

    <li>ww <a href="javascript:;">删除</a></li>

</ul>
l文档碎片
•文档碎片可以提高DOM操作性能(理论上)
•文档碎片原理

document.createDocumentFragment

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>测试文档碎片</title>

<script>

window.onload=function()

{

    var oBtn1=document.getElementById('btn1');

    var oUl=document.getElementById('ul1');

    var oBtn2=document.getElementById('btn2');

     oBtn1.onclick=function(){

         //获取时间

        var iStart=new Date().getTime();

        var i=0;

        for(i=0; i<10000; i++)

        {         //创建个li

            var oLi=document.createElement('li');

              //  添加li到ul

            oUl.appendChild(oLi);

            }

            //减去刚才使用时间

            alert(new Date().getTime()-iStart);

        }

     oBtn2.onclick=function()

     {

         var iStart=new Date().getTime();

         //创建文本对象片段

         var oFrag=document.createDocumentFragment();        var i=0;

         for(i=0; i<10000; i++)

         {

             //利用文本碎片创建li

             var oLi=document.createElement('li');

             //添加到文本

             oFrag.appendChild(oLi);

             }

             //获取当前时间减去程序开始时间

             alert(new Date().getTime()-iStart);

         }

}

</script>

</head>

<body>

<input id="btn1" type="button" value="普通"/>

<input id="btn2" type="button" value="碎片">

<ul id="ul1">

</ul>

</body>

</html>
 

Dom终的更多相关文章

  1. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  2. 在没有DOM操作的日子里，我是怎么熬过来的（终结篇）

    前言 在我写终结篇的日子里,Vue版本稳定在2.9.1.当我摸清Vue的脉络之后,以一个爬坑无数的亲历者的身份,谈谈我在MVVM时代里遇到的那些事儿. 接下来,正文从这开始~ 好多童鞋学习Vue都有灯 ...

  3. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  4. jacascript DOM节点——节点关系与操作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...

  5. 纯CSS菜单样式，及其Shadow DOM，Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...

  6. BugPhobia终章篇章：学霸在线系统Beta阶段展示

    0x00 :序言 1 universe, 9 planets, 204 countries,809 islands, 7 seas, and i had the privilege to meet y ...

  7. JavaScript高级程序设计学习笔记第十章--DOM

    1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个 ...

  8. HTML DOM 学习

    HTML DOM 学习 By: Mirror王宇阳 E-mail:2821319009@qq.com 博客主页:https://www.cnblogs.com/wangyuyang1016/ DOM ...

  9. javascript之DOM(四其他类型)

    一.Text类型 文本节点由Text类型表示,指的是可以以字面意思解释的纯文本内容,其中包含HTML代码. nodeType=3 nodeName=#text nodeValue=文本内容 paren ...

随机推荐

  1. [webgrid] – selecterow - (Get Selected Row from ASP.NET MVC 3 WebGrid)

    Get Selected Row from ASP.NET MVC 3 WebGrid Abstract: The following article demonstrates how to get ...

  2. 用C语言将搜狗输入法词库转换成QQ拼音输入法词库

    搜狗输入法词库格式: 'ni'kan'xia 你看下 'ni'kan'xia'gai'hou 你看下改后 'ni'kan'xing'ma 你看行吗 'ni'kan'zen'me'yang 你看怎么样 ...

  3. 将图片部署在tomcat/iportWork/uploadFiles中

    将图片部署在tomcat/iportWork/uploadFiles中 1.在将运行的tomcat目录下创建个二级目录iportWork\uploadFiles,如下图:

  4. System.nanoTime与System.currentTimeMillis的区别

    平时产生随机数时我们经常拿时间做种子,比如用 System.currentTimeMillis的结果,但是在执行一些循环中使用了System.currentTimeMillis,那么每次的结 果将会差 ...

  5. 多线程 GET

    iOS中多线程的实现 方案 简介 语言 线程生命周期 使用频率 pthread 一套通用的多线程API 适用于 Unix / Linux / Windows 等系统 跨平台\可移植 使用难度大 C 程 ...

  6. android控件库(1)-带删除功能的EditText

    DJEditText.java /** * Created by xp.chen on 2016/11/25. */ public class DJEditText extends AppCompat ...

  7. linux下如何使用sftp命令【转】

    linux下如何使用sftp命令 from:   http://www.cnblogs.com/chen1987lei/archive/2010/11/26/1888391.html sftp 是一个 ...

  8. Apache中，同一IP使用多域名对应多个网站的方法

    首先dns中确定有相应的A记录, abc  IN A   211.154.2.5 mail IN A   211.154.2.5 这个讲的是在windows下面配置apache虚拟主机: 一.配置虚拟 ...

  9. 输入三个数a,b,c，要示按由小到大的顺序输出

    #include<stdio.h>int main(){       double a,b,c,t;       scanf("%lf %lf %lf",&a, ...

  10. [福利]非认证公众帐号也能申请微信连Wi-Fi了

    年初3月份时,拥有线下经营场所且开通微信认证的公众号可以开通微信连Wi-Fi接入,现在微信团队进一步开放了权限,非认证公众帐号也能申请微信连Wi-Fi了. 微信连Wi-Fi团队宣布,降低微信连Wi-F ...