Javascript基础——利用Dom元素对节点进行创建、插入和删除、文档碎片

亦凉 2022-07-15 07:17 201阅读 0赞

1、创建节点——createElement

（例如在ul元素后创建li元素）

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

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

2、插入节点(两种方式)

第一种——appendChild

前提是在按钮点击创建基础上，进行相对应节点的插入。

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

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

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

oBtn.οnclick=function()\{

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

//在ul后边插入节点li；

oUl.appendChild(oli);

\}

第二种——insertBefore()

例如添加元素使其永远在插入的第一个节点位置上，

做法：通过判断ul下的子节点长度，若为0，即在其后边直接添加；否则在其对应节点的前边添加，永远为第一个。

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

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

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

oBtn.οnclick=function()\{

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

var aLI=document.getElementsByTagName('li');

oLi.innerHTML=oTxt.value; //li值即为text输入框中的值；

//在ul后边插入节点li；

if(aLl.length>0)\{

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

\}

else\{

oUl.appendChild(oLi);

\}

\}；

3、删除节点

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

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

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

aA\[i\].οnclick=function()\{

oUl.removeChild(this.parentNode);    //删除ul下的父级元素，即li；

\}

\}

<ul id="ul1">

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

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

</ul>

4、文档碎片

知识点：文档碎片(仅在低级的浏览器会提高性能，在高级浏览器会降低性能，现在不怎么使用)  
1、理论上文档碎片可以提高DOM操作性能；  
2、文档碎片原理：document.createDocumentFragment();  
  
window.οnlοad=function()\{  
var oUl=document.getElementById('ul1');  
//创建一个文档碎片；  
var oFrag=document.createDocumentFragment();  
  
for(var i=0;i<1000;i++)\{  
var oLi=document.getElementsByTagName('li');  
//把节点添加到文档碎片中；  
oFrag.appendChild(oLi);  
\}  
  
oUl.appendChild(oFrag);  
\};

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关 DOM操作--创建、插入、删除元素

1、创建、插入元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

ゞ浴缸里的玫瑰/ 2024年02月17日 23:03/ 0 赞/ 44 阅读

相关利用文档碎片，改变dom元素的值

代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

系统管理员/ 2023年01月15日 12:26/ 0 赞/ 162 阅读

相关【JavaScript】文档碎片提升DOM渲染性能

前言提到前端性能优化，相信你已经听说过一个结论：`尽量少地操作 DOM`，包括 Vue 在官方文档中也提到该问题。因为 DOM 的重新渲染会重新生成页面上的

一时失言乱红尘/ 2022年10月07日 12:52/ 0 赞/ 170 阅读

相关 JavaScript HTML DOM 元素（节点）

JavaScript HTML DOM 元素（节点） -------------------- 添加和删除节点（HTML 元素）。创建新的 HTML 元素如

梦里梦外;/ 2022年09月29日 14:51/ 0 赞/ 334 阅读

相关 Javascript基础——利用Dom元素对节点进行创建、插入和删除、文档碎片

1、创建节点——createElement （例如在ul元素后创建li元素） var oUl=docuemnt.getElementById('ul1'); var oL

亦凉/ 2022年07月15日 07:17/ 0 赞/ 202 阅读

相关 JavaScript DOM 删除子节点

这些天一直在学习JavaScript，但由于工作繁忙，导致学习的兴致不高，一个对象都看了好几天视频，所以想以写博客的方式督促自己，希望能做到不管什么知识，每日一更。一个元

快来打我*/ 2022年05月21日 06:20/ 0 赞/ 530 阅读

相关 JavaScript回顾学习：利用文档碎片优化Dom性能

在浏览器中，一旦对文档DOM进行一次添加/更新/删除操作，就会引发DOM一次重排，导致DOM性能问题。利用文档碎片，一次性对DOM进行操作，减少文档多次重排，例子：

旧城等待，/ 2022年05月19日 05:50/ 0 赞/ 184 阅读

相关 JavaScript增加和删除DOM节点

创建节点 > var p = createElement(element); // 创建标签

雨点打透心脏的1/2处/ 2022年02月09日 14:43/ 0 赞/ 312 阅读

相关 JavaScript DOM创建元素节点（createElement）创建文本节点（createTextNode）创建注释节点createComment

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type

傷城~/ 2021年07月24日 17:20/ 0 赞/ 506 阅读

相关 DOM节点的创建、插入、删除等经验集合

目录 DOM节点的创建、插入、删除各种经验集合一、DOM节点的创建 1.1 JS方法 1.1.1 HTML页面中： 1.1.2 JS页面中 1.2 JQ方法

青旅半醒/ 2021年07月24日 11:31/ 0 赞/ 393 阅读