关于dom节点

最新推荐文章于 2023-03-31 10:17:26 发布
最新推荐文章于 2023-03-31 10:17:26 发布
阅读量181 收藏
点赞数
文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56266471/article/details/126253734
版权
本文详细介绍了DOM中的节点类型，包括父节点、子节点和同胞节点的关系，以及如何通过nodeType属性获取节点类型。此外，还列举了DOM元素的方法，如创建、插入、替换和删除节点，以及属性的相关操作，包括getAttribute、setAttribute和removeAttribute。最后讨论了cloneNode和removeChild的功能及其用法。
摘要由CSDN通过智能技术生成

                       

 

说明：

父节点、子节点和同胞节点

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）

每个节点都有父节点、除了根（它没有父节点）

一个节点可拥有任意数量的子

同胞是拥有相同父节点的节点

注:为保证兼容性,书写html的时候必须写成一行

1、 nodeType属性 

  nodeType 属性返回节点的类型。nodeType 是只读的。

   比较重要的节点类型有：

                        

 

 如:

       Var div=document.getElementById(“div”);                     

       div.nodeType                                  节点的类型

   div.nodeName /div.tagName                      节点的名字

   *div.firstchild.nodeValue*             先获取节点的子节点后再求值（文本）                    

      div.parentNode.nodeType/nodeName/nodeValue        父节点的……       

   div.childNodes[0].nodeType/nodeName/nodeValue     第一个子节点的……   

      div. firstChild. nodeType/nodeName/nodeValue        第一个节点的……    

      div.lastChild.nodeType/nodeName/nodeValue       

最低0.47元/天 解锁文章
BUG使我疯狂
关注
DOM节点
XiaLuoCXY的博客
12-15 1567
1.1-DOM节点介绍 1.什么是节点：在HTML文档中，一切皆节点（HTML文档本身、标签、属性、注释内容、文本） 2.什么是元素：元素在HTML中叫做标签，在JS的dom对象中称为元素（可以理解为标签的面向对象的叫法） 3.HTML标签属于节点的一种，叫做元素节点 4.节点三要素： 节点类型：标签、属性、注释、文本 节点名称：p、div、class（标签名） 节点的值：one（属性的值） .DOM节点操作重点记
React如何将组件渲染到指定DOM节点详解
08-29
React 如何将组件渲染到指定 DOM 节点详解 React 框架是一个基于组件的框架，它提供了一种简单的方式来构建用户界面。但是，在某些情况下，我们需要将组件渲染到指定的 DOM 节点中，而不是默认的根节点。这篇文章将...
js dom操作
m0_71858591的博客
08-09 214
关于js中dom的运用
js的DOM操作
qq_43335204的博客
10-06 573
1.三种常用查看方式 标签名 类名 元素id 注：document代表整个文档，name选择器对部分标签不生效，.querySelector()非实时。 2.创建元素节点 3.创建文本节点 4.复制节点 注：true时克隆整个节点；false只克隆该节点，不克隆子节点。 5.插入节点 （1）在末尾插入子节点 （2）在已有节点之前插入子节点 注：已有节点的插入操作会产生剪切效果 6....
DOM基础
qq_38636998的博客
10-25 456
DOM基础 一、DOM概述 1.1 DOM概念 1、DOM（Document Object Model 文档对象模型）是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。 2、W3C DOM标准分为3部分： core DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的...
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
利用vue.js插入dom节点的方法
10-20
然而，有时我们确实需要在特定场景下插入DOM节点。本篇文章将详细讲解如何在Vue.js中插入DOM节点，并探讨其与jQuery操作DOM的不同之处。 首先，Vue.js 提供了 `$mount` 方法用于创建组件实例并挂载到DOM中。例如，...
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
以上知识点涵盖了文件提供的关于JavaScript中DOM节点插入操作的主要概念和技术细节。掌握这些知识点，能够帮助开发者更有效地在Web页面上动态地添加、删除和修改节点，从而实现更丰富的用户交互和更动态的内容展示。
JavaScript DOM操作
好好学习天天向上
03-27 5177
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
js_dom
yoyo的专栏
10-22 476
1，    创建节点。createElement():var a  = document.createElement(“p”);它创建的是一个元素节点，所以 nodeType 等于 1 。a.nodeName 将返回 p ;注意；createElement()方法创建出来的新元素节点不会被自动添加到文档里，既然没添加到文档里，说明它还是一个游离的状态。所以它也没有nodeParent属性。如果想把
JS dom操作
qq_41624344的博客
11-20 218
最近用到了一些js对dom的操作，来做个总结： 1、获取节点 document.getElementById()//通过ID获取节点，返回一个元素对象 ducoment.getElementByName()//通过Name属性获取节点，返回一个对象数组 document.getElementByTagName()//通过表现名获取节点，返回一个对象数组 document.getElementByC...
js的dom操作
m0_61596847的博客
12-07 850
事件执行的步骤 1、获取事件源 2、注册事件（绑定事件） 3、添加事件处理程序 操作元素 1、改变元素内容 1.element.innerText………………空格和换行都会删除（非标准） element.innerHTML……………空格和换行保留（识别HTML标签 W3C标准，标签照样给你现实，对input里面的内容没有效果） 2. src、href 3. id、alt、title 2、修改表单属性 1.value 这里不用innerHTML，他对于普通盒子起效果 inp...
JS-操作DOM
软工二班秦同学的博客
03-31 1878
js操作DOM
js_DOM操作
weixin_30568715的博客
01-31 46
嗯，大过年的上次更新应该还是在，大年30前一天，说好的一天更一篇，感觉食言了，虽然没有更，但是，每天还是坚持在学习的，所以今天的任务就是把这几天学的都发上来。 博客，我觉得不仅仅是交流知识的地方，我宁愿把它写成我的生活日记。有差的，欢迎拍砖。 好了，进入正题吧。 DOM操作，我觉得可以归结成三个，一个标签节点，一个属性节点，一个文本节点。 这里的 li 就是标签节点； alt就是属...
js DOM操作
onepunchmen00的博客
12-02 494
DOM节点操作：增删改查 问： document.write()创建节点的不足 页面加载完成之后，使用document.write()这种方式会将页面重写，所以会覆盖掉页面中原有的元素。 creat创建节点
DOM基础（节点）
weixin_57920269的博客
03-01 1096
节点获取、创建并添加节点、删除节点、克隆节点、节点创建最优
原生js获取document_原生js获取DOM对象的几种方法
weixin_39553458的博客
12-20 782
获取DOM元素的方法：1.通过id获取let box= document.getElementById("box");1234注意：getElementById()括号中的不需要在前面加“#”，因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。2. 通过class获取let boxCollection= document.getElementsByClassName("box...
dom 节点转dom对象
最新发布
05-30
在 JavaScript 中，DOM 节点本身就是 DOM 对象，因此不需要进行节点到对象的转换。DOM 节点是指 HTML 或 XML 文档中的元素、属性、文本等组成部分，在 JavaScript 中可以通过访问这些节点进行操作。 如果你是在使用 jQuery 这样的库，可以通过包装 DOM 节点来获取对应的 jQuery 对象，例如： ```javascript var node = document.getElementById("myDiv"); // 获取节点 var $node = $(node); // 包装为 jQuery 对象 ``` 这样就可以使用 jQuery 提供的 API 来操作节点了。但需要注意的是，这种方式仅适用于使用了 jQuery 或其他类库的情况。如果你直接使用原生 JavaScript 操作 DOM 节点，则不需要进行任何转换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值