js中的节点操作

于 2023-03-25 09:15:00 发布 · 406 阅读

文章标签：

#html #servlet #前端

本文介绍了从节点角度理解HTML结构，如ul的组成部分，并详细阐述了使用JavaScript进行DOM操作的方法，包括获取子标签、添加、插入、替换和删除标签，以及标签的复制。

从节点的角度来理解，ul由7个部分组成：

文本 + 标签 + 文本 + 注释 + 文本 + 标签 + 文本

根据标签之间的关系获取标签

获取所有子标签 - 父标签.children

获取第一个子标签 - 父.firstElementChild

获取最后一个子标签 - 父.lastElementChild

获取父标签 - 子.parentElement

获取a标签上一个标签 - a标签.previousElementSibling

获取a标签下一个标签 - a标签.nextElementSibling

创建标签

语法：document.createElement('标签名')

插入

给父标签追加一个子标签 - 将这个标签作为某个父标签的最后一个儿子

语法：父.appendChild(子)

将标签放在某个父标签的某个子标签的前面

语法：父.insertBefore(新标签，子标签)

替换标签

语法：父.replaceChild(新，旧)

删除

语法：父.removeChild(子)

复制

语法：标签.cloneNode( ) - 复制空壳

标签.cloneNode(true) - 带内容复制

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

！#77

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

JavaScript DOM—节点操作

最新发布

Jin_Xiang123的博客

01-04

1786

文档对象模型（Document Object Model，简称DOM）是一种基于树状结构的编程接口，用于操作HTML、XML和SVG等文档。它将文档表示为一个树状结构，其中每个节点代表文档中的一个元素、属性、文本或其他类型的内容。DOM提供了一组标准的对象和方法，可以通过JavaScript等编程语言来访问和操作文档的各个部分。通过DOM，开发者可以使用JavaScript来读取、修改、添加和删除文档的元素、属性和内容。DOM树是由节点组成的。文档节点是DOM树的根节点，它是整个文档的入口点。

参与评论您还未登录，请先登录后发表或查看评论

JS实现的DOM插入节点操作示例

11-28

`insertBefore()`方法是JavaScript DOM中的一个重要函数，它允许我们在已有子节点的前面插入一个新的子节点。方法的基本语法如下： ```javascript node.insertBefore(newNode, refNode); ``` - `newNode`：表示要...

前端js通过选择器获取标签

个人笔记

03-19

1223

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="one"></div> <div class="c1"></div> <h1 class="c1"></h1> <a

用原生js或者jquery获取上下级元素

z1112345的博客

02-17

1305

js或者上下级

javascript中怎么找父级标签和子级标签

专注于C#/.NET/.NET Core学习、工作、面试干货和实战教程分享。这里聚焦了大量的C#/.NET/.NET Core优质文章、开源项目、实用工具和学习、工作、面试心得。

07-16

7800

JS中查找父标签的方法：1、利用parentNode属性，语法“子元素对象.parentNode”；2、借助Jquery中的parent()或parents()方法，语法“子元素对象.parent()”或“子元素对象.parents()”。

节点的获取操作(原生JS节点的各种获取方式)

weixin_53428952的博客

01-18

564

本文简略介绍了一些DOM节点获取的操作,适合新手快速了解DOM节点的获取操作

js的元素节点选取一

05-18

485

1、querySelectorAll <script> const nodeList = document.querySelectorAll(".example"); for (let i = 0; i < nodeList.length; i++) { nodeList[i].style.backgroundColor = "red"; } </script> 2、querySelector 使用 class="example" 获取第一个 <p> 元素.

JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

10-18

以上知识点涵盖了文件提供的关于JavaScript中DOM节点插入操作的主要概念和技术细节。掌握这些知识点，能够帮助开发者更有效地在Web页面上动态地添加、删除和修改节点，从而实现更丰富的用户交互和更动态的内容展示。

学习JS中的DOM节点以及操作

12-09

6. **层次节点操作**： - **childNodes**：获取包含所有子节点（包括元素和文本节点）的NodeList。 - **children**：仅获取元素子节点的NodeList，不包含文本节点。 - **parentNode**：获取当前节点的父节点。 -...

Js中节点的遍历和操作

11-22

节点操作主要涉及以下几个方面： 1. 访问节点： - `firstChild`：返回节点的第一个子节点，可以是元素或文本节点。 - `lastChild`：返回节点的最后一个子节点，同样可能是元素或文本节点。 - `nextSibling`：...

DOM详解-下

yfyukf的博客

03-24

186

DOM详细介绍下

获取该元素的第一个子节点_js获取某元素下第一个子元素的标签名

weixin_39534149的博客

12-24

2854

js: document.getElementById(‘id’).firstChild.tagName;jQuery: $(‘#id’).children().first().prop(“tagName”);示例：//点击span等标签里面的内容后变成可编辑的输入框function edit(obj, name, id) {var that = $(obj);//var tag = obj.fi...

java怎么取子标签_java – 如何在jsoup中获取元素的第一级子元素

weixin_29380121的博客

02-27

1509

Element.children()仅返回直接子项.既然你把它们绑在一棵树上,它们也有孩子.如果您需要没有底层树结构的直接子元素,则需要按如下方式创建它们public static void main(String... args) {Document document = Jsoup.parse("1122pppsp");Element div = document.select("div")....

JavaScript获取标签的六种方法

热门推荐

fortune丶的blog

08-06

2万+

1.利用document.getElementById('id名')； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> &am

获取dom下第一个a标签中的内容_JavaScript学习笔记（十四） DOM(下）

weixin_28839439的博客

01-22

1238

DOM(下)DOM 就是我们 html 结构中一个一个的节点构成的不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点DOM节点DOM 的节点我们一般分为常用的三大类元素节点/文本节点/属性节点什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点(标签节点)比如我们标签里面写的文字，那么就是文本节点写在每一个标签上的属性，就是属性...

JavaScript——DOM

m0_56783154的博客

03-05

545

目录JavaScript——DOM1. DOM简介1.1 什么是DOM1.2 DOM树2. 获取元素2.1 如何获取元素 JavaScript——DOM 1. DOM简介 1.1 什么是DOM 1.2 DOM树 2. 获取元素 2.1 如何获取元素根据 ID 获取通过getElementById方法根据标签名获取通过getElementByTagName方法 1. 该函数返回的是获取的元素对象的集合，以伪数组的形式存储 2. 如果页面中只有一个元素，返回的还是伪元素的形式 3. 如果

JavaScript中DOM操作获取标签对象

qq_45799465的博客

02-01

558

var 变量 = document.querySelector('条件') 获取整个HTML文档中第一个符合条件的标签对象，是一个独立的标签对象可以直接进行DOM操作，如果没有符合条件的对象执行结果是null <body> <div></div> <div></div> <div></div> <div></div> <script>

js获取标签的6种方法

weixin_45894479的博客

04-05

1万+

1.利用document.getElementById(‘id名’)； <body> <div id="box"></div> <script> var div = document.getElementById('box');\\获取到了div </script> </body> 2.利用document.getElementsByName(‘name名’); <body> <

jquery获取父节点、子节点、兄弟节点

云泽的博客

10-10

1039

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲test").parent(e…(“span”).parent()或者$(“span”).parent(".class") $("#test").parents(expr)，类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素 $("#test...