DOM基础2

于 2018-09-06 20:28:17 发布
阅读量159 收藏
点赞数
分类专栏： ĴS 智能社_js 文章标签： createElement appendChild insertBefore removeChild 文档碎片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40512519/article/details/82466766
版权

创建、插入和删除元素：

创建DOM元素：

  • createElement(标签名)
  • appendChild(节点)

插入元素：

  • insertBefore(节点,原有节点)   在已有元素前插入

删除DOM元素：

  • removeChild(节点)

创建元素：li

    <script>
        window.onload=function(){
            var obtn=document.getElementById('btn1');
            var oUl=document.getElementById("ul1");
          
            obtn.onclick=function(){
                var oLi=document.createElement('li');

                oUl.appendChild(oLi);
            }
        }
    </script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="button" id="btn1" value="创建li"/>
<ul id="ul1">

</ul>
</body>

 创建元素：li+txt里的东西。


    <script>
        window.onload=function(){
            var obtn=document.getElementById('btn1');
            var oUl=document.getElementById("ul1");
            var txt1=document.getElementById('txt1');
            obtn.onclick=function(){
                var oLi=document.createElement('li');
                oLi.innerHTML=txt1.value;
                oUl.appendChild(oLi);
            }
        }
    </script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="button" id="btn1" value="创建li"/>
<ul id="ul1">

</ul>
</body>

把元素插末尾：

appendChild实际是添加到末尾。

父级.appendChild(子节点)

父级.insertBefore(子节点，在谁之前)


    <script>
        window.onload=function(){
            var obtn=document.getElementById('btn1');
            var oUl=document.getElementById("ul1");
            var aLi=oUl.getElementsByTagName('li');
            var txt1=document.getElementById('txt1');
            obtn.onclick=function(){
                var oLi=document.createElement('li');
                oLi.innerHTML=txt1.value;
                oUl.insertBefore(oLi,aLi[0]);
            }
        }
    </script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="button" id="btn1" value="创建li"/>
<ul id="ul1">

</ul>

但是上面这段代码在IE下出错了，因为一开始ul下就没有li,那么更没有li[0]。

         obtn.onclick=function(){
                var oLi=document.createElement('li');
                oLi.innerHTML=txt1.value;
                if(aLi.length>0){
                    oUl.insertBefore(oLi,aLi[0]);
                }else{
                    oUl.appendChild(oLi);
                }
              
            }

父级.removeChild(子节点)

 <script>
        window.onload=function(){
            var oUl=document.getElementById('ul1');
            var aA=document.getElementsByTagName('a');
            var aLi=oUl.getElementsByTagName('li');

            for(var i=0;i<aA.length;i++){
                aA[i].onclick=function(){
                    oUl.removeChild(/*aLi[i]*/this.parentNode);
             }

            }
        }
    </script>
</head>
<body>
<ul id="ul1">
    <li>nfjksandja <a href="javascript:;">删除</a></li>
    <li>csffwdf<a href="javascript:;">删除</a></li>
    <li>grhtrere<a href="javascript:;">删除</a></li>
    <li>fdwwfewde<a href="javascript:;">删除</a></li>
    <li>214325433<a href="javascript:;">删除</a></li>
</ul>

</body>

文档碎片：

  • 可以提高DOM操作性能（理论上）
  • 文档碎片原理
  • document.createDocumentFragment();

在对高级浏览器上对性能没有改变有的时候还会降低。

<script>
    window.onload=function(){
        var oUl=document.getElementById('ul1');
        var oFrag=document.createDocumentFragment();
        for(var i=0;i<1000;i++){
            var oLi=document.createElement('li');
            oFrag.appendChild(oLi);
        }
        oUl.appendChild(oFrag)
    }
</script>
<body>
<ul id="ul1">

</ul>

 

蔡蔡动起来
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM基础
xieixnxia的博客
06-14 174
DOM对象 DOM，全称Document Object Model（文档对象模型），它是由W3C定义的一个标准。 一句话总结：DOM操作，可以简单li
DOM基础----DOM（一）
weixin_30709635的博客
08-23 109
DOM（Document Object Model），中文名称为文档对象模型，是处理可扩展标识语言的标准编程接口，主要针对HTML和XML。DOM描绘了一个层次化的节点树，开发人员可以添加、修改和移除页面的某一部分，也就说改变文编的内容和呈现方式。 D（Document）：可以理解为整个Web加载的网页文档。 O（Object）：...
Dom基础
chenqingmiaomiao的专栏
02-14 462
Dom基础 dom简介： dom中文名称为文档对象模型，它是由w3c制定的标准。 Node类型： node接口由所有的节点类型实现，其中有一些常用的属性也是所有的节点共有的如：nodeType:节点的类型，nodeName:文档名称，nodeValue:文档值 节点关系： 纵所周知文档整个就是一个树形的结构，理所当然其中的节点之间肯定会有着关系，这种关系由下列属性来维持着，childN
JavaScript DOM基础
01-19
 DOM描绘了一个层次化的节点树,运行开发人员可以添加/移除和修改页面的某一部分; 一 DOM介绍  D(文档):可以理解为整个Web加载的网页文档;  O(对象):可以理解为类似window对象之类的东西,可以调用属性和方法,这里...
JavaScript学习笔记之DOM基础操作实例小结
10-17
主要介绍了JavaScript学习笔记之DOM基础操作,结合实例形式总结分析了javascript针对dom元素节点、属性的相关获取、设置等操作技巧,需要的朋友可以参考下
html.rar_dom基础学习
09-21
html 基础学习 关于dom对象的运用和教程 详细代码
JvavScript之dom基础（源代码）
05-31
JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源...
JavaScript高级程序设计（第3版）学习笔记15——DOM基础
a540010的博客
10-22 134
　　从这篇笔记开始整理JavaScript的第三部分：文档对象模型DOM（Document Object Model）。DOM是针对HTML和XML文档的一个API，脱胎于DHTML，由W3C负责制定相关标准，现在已经成为表现和操作页面标记的真正的跨平台、语言中立的一种标准，除了JavaScript外，其它一些语言比如SVG、MathML等也不同程度的实现了各自的DOM。 1、DOM组...
dom基础
wllwpeng的博客
01-18 196
DOM查找方法语法：doucment。getElemengtById（“id”）功能返回对拥有指定Id的第一个对象的引用返回值：DOM对象说明：id喂DOM元素上ID属性的值语法：doucment.getElementsByTagName（“tag”）功能：返回一个对所有tag标签引用的集合返回值：数组】说明：tag为要获取的标签名称设置元素样式语法：ele.style.styleName=sty
浅谈DOM基础
那么好,
02-10 2512
DOM：文档对象模型(Document Object Model)，实际上是以面向对象方式描述的文档模型。 概念：          表示和处理一个HTML或者XML文档的常用方法。DOM的设计是以对象 管理者组织的规约为基础的，因此可以用于任何编程语言。          D：文档可以理解为整个Web加载的网页文档；          O：对象调用属性和方法（do
vue2入门基础教程
最新发布
09-09
要学习Vue2的入门基础知识，您可以按照以下步骤进行： 1. 下载和安装Vue.js：您可以从官方网站上下载并引入Vue.js脚本文件，或者使用CDN链接进行引用。 2. 创建HTML文件：创建一个HTML文件，其中包含被Vue控制的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值