JavaScript（节点的基础知识和相关操作）

最新推荐文章于 2022-05-18 08:24:02 发布
最新推荐文章于 2022-05-18 08:24:02 发布
阅读量798 收藏 4
点赞数 2
文章标签： js es6 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Han_Zhou_Z/article/details/121677182
版权
本文详细介绍了JavaScript中节点的基础知识，包括节点类型、节点的层级，以及如何获取和操作父节点、子节点、兄弟节点，如创建、添加、删除和克隆节点。并提供了一个实际案例，演示了文本框内容的添加和删除操作。
摘要由CSDN通过智能技术生成

目录

一、节点基础

1、节点类型

2、节点的层级

二、节点操作

1、获取父节点

2、获取子节点

3、获取兄弟节点

4、创建节点

5、添加和删除节点

6、克隆节点

案例

一、节点基础

定义：html文档可以看做是一个节点树，页面中的所有内容都是节点。

1、节点类型

节点至少拥有nodeType（节点类型），nodeName（节点名称），nodeValue（节点值）三个基础属性

（1）元素节点---nodeType为1

（2）属性节点---nodeName为2

（3）文本节点---nodeValue为3   （文本节点包含文字、空格、换行等）

2、节点的层级

DOM根据HTML中各节点的不同作用，可将其分别划分为标签节点（元素节点）、文本节点和属性节点

（1）根节点：<html>就是根节点，有且只有一个

（2）父节点：一个节点的上级节点

（3）子节点：一个节点的下级节点

（4）兄弟节点：具有相同父节点的节点

二、节点操作

1、获取父节点

element.parentNode

2、获取子节点

（1）element.childNodes：获得的是当前元素的所有子节点的集合（所有类型的子节点）

（2）element.children：是一个可读的属性，返回所有子元素节点

（3）firstChild：获取第一个子节点

（4）lastChild：获取最后一个子节点

（5）firstElementChild：获取第一个元素子节点

（6）lastElementChild：获取最后一个子元素节点

3、获

最低0.47元/天 解锁文章
Han_Zhou_Z
关注
JS之节点知识点
G_072625的博客
07-12 189
var strong =document.getElementsByTagName('strong')[0]; var div =document.getElementsByTagName('div')[0]; var span=document.getElementsByTagName('span')[0];1.遍历节点树 var strong1=strong.parentNod...
JavaScript——DOM
s310040799的博客
09-03 258
今天分享的是JavaScript中的重要组成部分DOM DOM 在浏览器标签中当前载入的文档用文档对象模型来表示。这是一个由浏览器生成的“树结构”，使编程语言可以很容易的访问HTML结构 — 例如浏览器自己在呈现页面时，使用它将样式和其他信息应用于正确的元素，而页面呈现完成以后，开发人员可以用JavaScript操作DOM。 文档中每个元素和文本在树中都有它们自己的入口 — 称之为节点。 元素节点: 一个元素，存在于DOM中。 根节点: 树中顶层节点，在HTML的情况下，总是一个HTML节点（其他标记词
Javascript中的节点
Shirley_0513的博客
01-14 287
一，节点 DOM将所有的文档中的内容都定义为节点 根据不同的类型分为12种节点。 需要记住的有： 1 元素 2 属性 3 文本 8 注释 9 文档 // 节点属性 节点值 节点名 节点类型 var box1 = document.getElementById("box1"); // 获取节点集合 var nodeList = box1.childNodes; // 获取不同的节...
Javascript节点
mengfanshaoxia的博客
02-16 1668
目录 Javascript节点 一、节点概述 二、节点属性 三、获取节点 3.1、获取父节点parentNode 3.2、获取子节点 3.2.1、所有子节点childNodes 3.2.2、子元素节点children 3.2.3、第一个节点firstChild 3.2.4、最后一个节点lastChild 3.3、获取兄弟节点 四、节点操作 4.1、创建节点 4.2、添加节点 4.3、复制节点 4.4、删除节点 4.5、修改节点 五、下拉菜单案例 六、动态生成表格案例 .
js基础之节点
时光清浅处，一步一安然
08-10 138
js基础之节点 一、node节点 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点。元素是节点的别称，节点包含元素，当然节点还有好多细化的种类。根节点：root >>>> HTML没有父节点 。 以下表格中，带*获取的节点都包含空白文本节点。 属性 描述 *childNodes 获取当前元素的所有子节点 *previousSibling 获取当前节点的前一个同级节点 *nextSibling 获取当前节点的后一个同级节点
javascript DOM 操作基础知识小结
12-11
理解DOM的基础知识和操作技巧是JavaScript Web开发的关键。通过DOM，开发者可以动态创建、修改和删除HTML元素，实现丰富的交互效果和数据绑定。无论是简单的文本更新还是复杂的页面重构，DOM都是实现这些功能的基石...
JavaScript DOM节点操作方法总结
10-21
JavaScript DOM（文档对象模型）是Web开发中一个非常重要的概念。...以上就是JavaScript中有关DOM节点操作的一些基础知识。理解并熟练运用这些方法，可以使我们在Web开发中对页面结构进行更加灵活和动态的控制。
JavaScript原生节点操作小结
10-20
在Web开发中，JavaScript用于操作DOM（文档对象模型）提供了丰富的API，原生节点操作是其中的基础。原生节点操作允许开发者直接对HTML文档中的元素节点进行创建、插入、删除和查询等操作。这种能力是动态网页交互...
javascript 节点
09-06
### JavaScript 节点入门教程 #### 一、引言 在前端开发中，JavaScript 是一种广泛使用的编程语言，主要用于实现网页的动态效果与交互功能。...希望本教程能帮助初学者更好地理解和掌握JavaScript中的节点知识。
SpriteKit基础知识：节点
代码教主
06-16 431
SpriteKit是Apple的2D游戏引擎，它是基于OpenGL构建的渲染引擎。 它是在iOS 7中引入的，每个后续发行版都为框架带来了许多补充。 通过使用带纹理的精灵，内置的物理引擎和功能非常强大的SKAction类，您可以非常快速地构建实用的2D游戏。 SpriteKit具有用于场景和粒子的内置编辑器，自iOS9发行以来的相机节点以及自iOS 10发行以来对图块的内置支持。有了这些新...
javascript中节点的介绍
qq_37771631的博客
06-21 636
1.文档-------&gt;document2.元素-------&gt;页面中所有的标签，元素（element）根元素：html标签3.节点-------&gt;页面中所有的内容（标签、属性、文本（文字、换行、空格、回车）），Node节点的属性：nodeType:节点的类型：1=====》标签,     2=======》属性，   3======》文本nodeName:节点的名字：标签节点-...
javascript中的节点操作
weixin_44698566的博客
06-26 432
一、javascript javascript这门语言是由DOM、BOM、ECMAScript组成 其中DOM指的是: document object model 文档对象模型 体现在代码中是document BOM指的是: browser object model 浏览器对象模型 体现在代码中 window ECMAScript: 核心语法 里面包含的是如何定义变量、运算符、表达式、流程控制语句、数据类型 二、DOM 我们可以通过dom的onclick、onmousedown、onmouseup来添加事件
JS 节点
qq_42650983的博客
09-03 166
节点基础 节点类型 元素节点：node.element_node() 属性节点：node.attribute_node() 文本节点：node.text_node() 节点属性 节点类型 nodeName nodeValue nodeType 元素节点 元素名 null 1 属性节点 属性名 属性值 2 文本节点 ...
节点的相关知识
qq_45852515的博客
04-12 320
节点至少拥有nodeType(节点类型)nodeName(节点节名称)nodeValue(节点值)这三个基本属性。 元素节点：nodeType为1 属性节点：nodeType为2 文本节点：nodeType为3(包含文字，空格，换行等) a.nodeType 判断a节点类型 获取父节点： var section = document.querySelector('section'); console.log(section.parentNode); ...
Javascript——节点及获取节点
mintsolace的博客
07-05 199
节点的属性： 可以使用标签——元素. 可以使用属性节点. 文本节点. nodeType: 节点的类型：1——标签，2——属性，3——文本 nodeName: 节点名字：标签节点——大写标签名字，属性节点——小写属性名字，文本节点——#text nodeValue: 节点的值：标签节点——null，属性节点——属性值，文本节点——文本内容 <div> <p>&lt...
JavaScript中节点的相关操作
秦哥的博客
09-16 313
目录 0.码仙励志 1.节点的介绍 1.解释 2.节点的属性 1.解释 2.nodeType  节点的类型 3.nodeName  节点的名字 4.nodeValue  节点的值 3.获取相关的节点 4.节点的兼容代码  1.获取任意一个父级元素的第一个子级元素 2.获取任意一个父级元素的最后一个子级元素 0.码仙励志 精彩的人生没有彩排，每天都是现场直播 1.节点的...
JavaScript-----详细讲解js节点以及节点操作
weixin_45904557的博客
05-18 3562
获取元素通常使用两种方式: 利用DOM提供的方法获取元素 document.querySelector() document.getElementsByClassName() document.getElementsByTagName() document.getElementById() 利用节点层级关系获取元素 利用父子兄弟节点关系获取元素 逻辑性强,但兼容性较差 🍓. 🐇. 网页中的所有内容都是节点(标签,属性,文本,注释等),在DOM中,节点用node表示...
DOM节点操作知识点简要总结
HTMl5自由者
05-01 1314
1、什么是DOM？    Document Object Model （文档对象模型）DOM是针对文档的一个API接口    Dom描绘了一个层次化的节点树，允许开发人员添加，移除和修改页面的某一部分 2、DOM树       ① 标签属于节点的一种   ② 节点包含了标签，注释，文本，doctype等在内的多种组合 ③ 在文档中出现的空格，回车，也属于节点
javascript学习笔记：基础操作与节点获取技巧
总结来说，这个JavaScript学习笔记涵盖了从事件处理、DOM元素获取到修改属性和节点遍历的重要知识点，有助于初学者理解如何在网页中实现动态交互和数据绑定。熟练掌握这些基础技能，将为进一步学习更复杂的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值