js中的节点操作

！#77

于 2023-03-25 09:15:00 发布

阅读量355

点赞数

文章标签： html servlet 前端

本文链接：https://blog.csdn.net/weixin_48961014/article/details/129757029

版权

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

摘要由CSDN通过智能技术生成

从节点的角度来理解，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获取标签的六种方法

fortune丶的blog

08-06

2万+

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

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

12-09

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

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

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

weixin_53428952的博客

01-18

492

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

JS的dom操作基础——获取元素

m0_59345890的博客

07-14

5465

2、getElementsByClassName("目标元素的class属性值")通过标签的class类名获取，获取的元素放在的类数组中返回，如果没找到返回空的类数组。4、getElementsByName("目标元素的name属性值")通过标签的name属性的值获取获取的元素放在的类数组中返回，如果没找到返回空的类数组。3、getElementsByTagName("目标元素的标签")通过标签名获取获取的元素放在的类数组中返回，如果没找到返回空的类数组。......

64. python高级------javaScript(2)

qq_40455733的博客

04-20

386

文章目录64. python高级------javaScript(2)python修炼第二十天2019年 4月19日晴1.变量的作用域(1)局部变量(2) 全局变量2.条件语句3.获取标签元素 64. python高级------javaScript(2) python修炼第二十天 2019年 4月19日晴 1.变量的作用域 (1)局部变量局部变量就是在函数内使用的变量，只能在函...

如何用JS获取当前标签的索引值

九天翔龙的技术博客

11-28

1万+

有时候，我们需要点击标签的时候，知道当前的索引值。这样好利用索引值去获取另一个标签，进行样式更改。最典型的运用就是图片轮播。比如这种：点击对应点，就要显示对应的图片和文字内容。如何把点跟图片及文字对应起来呢？靠的就是索引。有如下结构： <ul id="myul"> <li>你好1</li> <li>你好2...

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

10-18

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

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

11-28

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

Js中节点的遍历和操作

11-22

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

JavaScript HTML DOM元素节点操作汇总

10-16

本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。首先，理解DOM的基本概念至关重要。DOM（Document Object Model）是一种标准，它将HTML或XML文档表示为一个树形结构，其中每个部分都...

js获取元素下的第一级子元素的方法(推荐)

12-01

js childnodes获取的是所有的子元素，而我们实际要获取第一级子元素。 function getChildren(obj){ var objChild = [] ; var objs = obj.getElementsByTagName('*'); for(var i=0,j=objs.length; i<j;++i){ if(objs[i].nodeType != 1){alert(objs[i].nodeType); continue ; } var temp = objs[i][removed]; if(temp.no

原生js及jquery获取标签的几种方式——为什么id不能重复

qq_43285335的博客

09-28

6022

1. 原生js获取标签 DOM（document object model）文本对象模型我们在用原生js获取标签都离不开DOM 用原生js获取标签的几种常用方法 1. 获取标签id document.getElementById(‘id’) 参数是id的字符，返回值是这个元素的对象 var div = document.getElementById('first') ...

JQ获取当前标签下第一个子元素的值

kelly921011的博客

03-16

6125

<ul id="city"> <li>上海</li> <li>重庆</li> <li>武汉</li> <li>杭州</li> </ul> var city=$("#city").find(&

在JS中获取父标签的id

Up was the only direction your compass navigate.

02-08

1万+

在HTML中拼接了一个单选框，它分为一个按钮和一个文本框，但是我需要获取他们的父标签，也就是包含着他们的div标签。使用parentElement属性可以返回指定元素的上级元素节点。 parentElement属性与parentNode属性的区别： document.documentElement.parentNode;获取文档层次的父节点 document.do...

jquery 之 select 默认选择第一个元素。

孤芳不自赏

08-24

1万+

$('#id option:first').prop('selected', 'selected');

js获取子级元素

王百林的博客

08-25

1486

var a = docuemnt.getElementById("test").getElementsByTagName("div");

Jquery 获取第一个子元素