JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】

最新推荐文章于 2023-01-23 11:32:12 发布
最新推荐文章于 2023-01-23 11:32:12 发布
阅读量584 收藏 3
点赞数
分类专栏： JavaScript

本文实例讲述了JS常见DOM节点操作。分享给大家供大家参考，具体如下：

DOM含义：DOM是文档对象模型(Document Object Model，是基于浏览器编程的一套API接口，是W3C出台的推荐标准。其赋予了JS操作节点的能力。当网页被加载时，浏览器就会创建页面的文档对象模型。

节点：根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

1、整个文档时一个文档节点。
2、每个HTML元素是元素节点。
3、HTML元素内的文本是文本节点。
4、每个HTML属性是属性节点。
5、每个注释是注释节点。

所以HTML DOM 将 HTML 文档视作树结构，这种结构被称为节点树。通过 HTML DOM，节点树中的所有节点都可以通过 JS 进行访问。所有 HTML 元素（节点）均可被修改。

一、创建节点、追加节点

1、createElement（标签名）创建一个元素节点（具体的一个元素）。
2、appendChild（节点）追加一个节点。
3、createTextNode（节点文本内容）创建一个文本节点

1

2

3

4

5

var oDiv = document.createElement("div");//创建一个div元素，因为是document对象的方法。

var oDivText = document.createTextNode("666");//创建一个文本节点内容是“666”，因为是document对象的方法。

oDiv.appendChild(oDivText);//父级.appendChild(子节点);在div元素中添加“666”

document.body.appendChild(oDiv);//父级.appendChild(子节点);;document.body是指向<body>元素

document.documentElement.appendChild(createNode);//父级.appendChild(子节点);;document.documentElement是指向<html>元素

二、插入节点

1、appendChild（节点）也是一种插入节点的方式，还可以添加已经存在的元素，会将其元素从原来的位置移到新的位置。
2、insertBefore（a,b）是参照节点，意思是a节点会插入b节点的前面。

1

2

3

4

var oDiv = document.createElement("div");//创建一个div元素，因为是document对象的方法。

var oDiv1 = document.getElementById("div1");

document.body.insertBefore(oDiv,oDiv1);//在oDiv1节点前插入新创建的元素节点

ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

三、删除、移除节点

1、removeChild(节点) 删除一个节点，用于移除删除一个参数（节点）。其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了。

1

var removeChild = document.body.removeChild(div1);//移除document对象的方法div1

四、替换节点

1、replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。

1

var replaceChild= document.body.replaceChild(div1,div2); //将div1替换div2

五、查找节点

1、childNodes 包含文本节点和元素节点的子节点。

1

2

3

4

5

6

7

8

for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的对象。

//nodeType是节点的类型，利用nodeType来判断节点类型，再去控制子节点

//nodeType==1 是元素节点

//nodeType==3 是文本节点

  if (oList.childNodes[i].nodeType == 1) {//查找到oList内的元素节点

    console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点

  }

}

2、

A、children也可以获取子节点，而且兼容各种浏览器。包括IE6-8

B、parentNode：获取父节点

1

2

3

4

5

6

var oList = document.getElementById('list');//oList是做的ul的对象

var oChild=document.getElementById('child');//oChild是做的ul中的一个li的对象

//通过子节点查找父节点//parentNode：获取父节点

console.log(oChild.parentNode);//在控制器日志中显示父节点

console.log(oList.children);//在控制器日志中显示oList子节点

console.log(children.length)//子节点的个数

3、

A、firstChild ; firstElementChild查找第一个子节点。此存在浏览器兼容问题：firstChild是IE兼容，firstElementChild是非IE兼容。

1

2

3

4

5

6

7

8

9

//查找第一个子节点的封装函数

function firstChild(ele) {

  if (ele.firstElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容

    return ele.firstElementChild;

  } else {

    return ele.firstChild;

  }

}

firstChild(oList).style.background = 'red';//将获得的节点的背景变成红色

B、lastChild ; lastElementChild查找最后一个子节点。此存在浏览器兼容问题：lastChild 是IE兼容，lastElementChild是非IE兼容。

1

2

3

4

5

6

7

8

9

//查找最后一个子节点的封装函数

function lastChild(ele) {

  if (ele.lastElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容

    return ele.lastElementChild;

  } else {

    return ele.lastChild;

  }

}

lastChild(oList).style.background = 'red';//将获得的节点的背景变成红色

C、nextSibling ; nextElementSibling查找下一个兄弟节点。也是存在兼容性问题。

1

2

3

4

5

6

7

8

9

//查找下一个兄弟节点的封装函数

function nextSibling(ele) {

  if (ele.nextElementSibling) {

    return ele.nextElementSibling;

  } else {

    return ele.nextSibling;

  }

}

nextSibling(oMid).style.background = 'red';

D、previousSibling ; previousElementSibling查找上一个兄弟节点。也是存在兼容性问题。

1

2

3

4

5

6

7

8

9

//查找上一个兄弟节点的封装函数

function previousSibling(ele) {

  if (ele.nextElementSibling) {

    return ele.previousElementSibling;

  } else {

    return ele.previousSibling;

  }

}

previousSibling(oMid).style.background = 'red';

ClearLoveQ
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript常用方法集合
日常笔记/总结/系列知识梳理
02-25 5920
JavaScript是一种广泛使用的编程语言，主要用于Web开发。它是一种脚本语言，这意味着它不需要像编译语言那样预先编译，而是在运行时解释和执行。JavaScript可以直接在浏览器中运行，这使得它在前端开发中特别重要，可以用于动态生成和更改网页内容、响应用户交互、发送和接收数据等。
js DOM节点操作：增删改查复制
weixin_44440256的博客
01-22 2592
DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： “W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” DOM 是 Document Object Model（文档对象模型）的缩写。 节点：根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： ...
JS DOM节点操作详解
qq_49900295的博客
04-16 3175
这里写目录标题一、获取元素的两种方式🍀1.利用DOM提供的方法获取元素2.利用层级关系获取元素二、节点概述💨三、节点层级🔥1.父级节点2.子节点3.第一个子元素和最后一个子元素4.小案例（新浪下拉菜单）5.兄弟节点6.创建添加节点7.删除节点8.复制节点 一、获取元素的两种方式🍀 我们获取元素通常用两种方式： 1.利用DOM提供的方法获取元素 1.document.getElementByld() 2.document.getElementsByTagName 3.document.querySelecto
js DOM节点操作之创建、添加、删除和克隆节点
RayShyy的博客
03-21 4349
1. 创建节点 document.createElement(“tagName”)：tagName为HTML标签名，创建一个标签名为tagName的元素节点。 <body> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> </body> <script>
【JS】Dom节点操作常用方法
m0_48982503的博客
01-14 1569
目录 1.访问/获取节点 1.1 通过顶层document节点获取： 1.2 通过父节点获取： 1.3 通过子节点获取： 1.4 通过兄弟节点获取： 2.创建节点/属性 3.添加节点 4.复制节点 5.删除节点 6.添加文本 1.访问/获取节点 1.1 通过顶层document节点获取： document.getElementById(id);　　　　　 //返回对拥有指定id的第一个对象 document.getEle...
JS实现的DOM插入节点操作示例
11-28
1. **DOM操作**：JavaScript可以使用DOM API操作HTML元素，包括创建、查找、修改和删除元素。 2. **元素创建**：`createElement`方法用于创建新的HTML元素。 3. **文本节点创建**：`createTextNode`方法用于创建包含...
JavaScript HTML DOM元素 节点操作汇总
10-16
总之，JavaScript的DOM节点操作提供了强大的能力，使我们能够动态地更新页面内容，实现丰富的用户交互。通过熟练掌握这些基本操作，开发者可以轻松地创建动态、响应式的Web应用。在实际开发中，结合事件监听、CSS...
第06章 DOM节点操作（上）
08-11
在本章“第06章 DOM节点操作（上）”中，我们将深入探讨Document Object Model（DOM）在JavaScript中的应用，以及如何通过DOM接口来操纵HTML或XML文档的结构、内容和样式。DOM是一种标准，它允许编程语言与网页内容...
数据结构--知识点16--搜索算法(二叉树)
ANingL的博客
09-06 2951
文章目录一、树的概念1、特点2、树的术语3、树的种类4、树的存储与表示5、常见的树的应用场景二、二叉树1、概念2、性质 一、树的概念 树是一种抽象数据类型(ADT)或是视作这种抽象数据类型的数据结构 1、特点 每个节点有零个或多个子节点 没有父节点的节点称为根节点 每一个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为**多个不相交(因为都只有一个父节点)**的子树 2、树的术语 节点的度：一个节点含有的子树的个数称为该节点的度 树的度：一棵树中，最大的节点的度称为树的度 叶节点或终端节点
Javascript的各种节点操作实例演示代码
10-28
实例演示对javascript的节点的各种操作。包括hasChildNodes()，removeChild()，appendChild()，replaceChild()，insertBefore()，cloneNode()等
JS——DOM节点操作
chihuomiao的博客
05-13 1225
主要包括 创建添加插入替换删除克隆 创建：document.createElement（'标签名'） 创造一个指定标签元素，返回的是一个创建好的元素节点、 如果浏览器无法识别标签名就会生成一个未知HTML元素 一般流程---- 1创建空对象（只能用document调用） 2为空元素添加关键属性和内容 3将空元素加载到dom树中 添加：父节点.appendChild（子节点） 把这个子节点追加到父节点下所有子元素的末尾，如果加入的子节点已经存在DOM树中，那么就会改变该子节点的位置 .
JavaScript的节点操作 —— 增加节点
Ass12454548的博客
01-23 1424
JavaScript的节点操作 —— 增加节点
DOM节点操作
m0_74331185的博客
10-31 323
DOM节点操作
DOM- 节点操作
qq_40832034的博客
07-19 1247
节点可以让我们更好的理清标签元素之间的关系 parentNode 属性，子元素.parentElement 返回的是一个对象  返回最近一级的父节点 找不到返回为null 需求：多个二维码，点击谁，谁关闭 （3）兄弟节点查找 下一个兄弟节点 nextElementSibling 属性 上一个兄弟节点 previousElementSibling 属性 3、增加节点 很多情况下，我们需要在页面中增加元素  比如，点击发布按钮，可以新增一条信息 一般情况下，我们新增节点，按照如下操作： 
JS学习之DOM节点操作2
weixin_53317758的博客
05-21 988
删除节点 node.removeChild(child); node.removeChild(child) 方法从DOM中删除一个子节点，返回删除的节点 案例：删除留言案例 分析： 把文本与里面的值赋值给li 时候，多添加一个删除链接 需要把所有链接都获取过来，点击当前的链接时候，删除当前链接所在li 阻止链接跳转需要添加javaScript(0); 或者 javaScript:; 给li添加a链接 直接 + 即可 复制节点（克隆节点） node.clo
JS添加、删除节点
weixin_74167379的博客
11-26 2542
appendChild() insertBefore() removeChild() remove()
JavaScript文档对象模型DOM节点操作之复制节点（7）
qq_45308912的博客
11-17 399
示例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <scrip.
js操作dom节点
热门推荐
hujunsong的专栏
08-01 1万+
1.访问节点 document.getElementById(id); 返回对拥有指定id的第一个对象进行访问 document.getElementsByName(name); 返回带有指定名称的节点集合 注意:Elements document.getEl
在 DOM 操作中怎样创建、添加、移除、替换、插入和查找节点？
最新发布
03-12
1. 创建节点：使用 document.createElement() 方法创建一个新的元素节点。 2. 添加节点：使用 appendChild() 方法将一个节点添加到另一个节点的子节点列表的末尾。 3. 移除节点：使用 removeChild() 方法从父节点...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值