js Dom节点树

最新推荐文章于 2024-09-30 13:14:49 发布
最新推荐文章于 2024-09-30 13:14:49 发布
阅读量1.1k 收藏 6
点赞数 2
分类专栏： javascript 文章标签： js Dom js 获取节点 父、子、兄、弟节点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29590623/article/details/87349827
版权
本文详细介绍了JavaScript中DOM节点树的相关知识，包括节点类型、节点关系、元素节点的关系，以及如何通过js获取、创建、插入和删除元素节点的方法。重点讲解了getElementById、getElementsByTagName等常用方法，以及appendChild、insertBefore等操作节点的方法。
摘要由CSDN通过智能技术生成

js Dom节点树

1、节点类型（nodeType）

document.getElementById(‘id’).nodeType
可以通过节点元素的nodeType属性得到节点类型
element 1 元素节点
text 3 文本节点（空白行也是文本节点）
comment 8 注释节点
HTMLdocument 9 document.nodeType=9

<div>
        文本节点
        <p id='paragraph'>我是个段落啊</p>
        <ul>
            <!--list列表-->
            <li class="list">11111111111</li>
            <li class="list">22222222222</li>
        </ul>
    </div>

问：div有几个子节点？分别是什么？类型几何？
document.getElementsByTagName(‘div’)[0].childNodes 获取div的所有子节点
dom节点树childNodes
其中

    </ul>
</div> 
<
最低0.47元/天 解锁文章
前端不弃
关注
专栏目录
JavaScript之DOM树
憧憬是碎了满地凉凉的宝石
07-03 1812
一、什么是DOM树？ DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 DOM树是结构，所谓层级结构是指元素和元素之间的关系：父子，兄弟。 文档：DOM中的"D" 如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生了。它把你编写的网页文档转换成为一个文档对象。 对象：DOM中的"O" 对象（object）是一种非常重要的数据类型。对象是自包含的数据集合，包含在对
DOM 节点树遍历的 JS 实现
weixin_34112900的博客
03-02 295
分享 DOM 节点树深度遍历、广度遍历代码。 假定我仅遍历 body 且其结构如下： <body> <section class="container"> <div class="left"> <div class="menu"></di...
前端——DOM与BOM总结
最新发布
qq_53256193的博客
09-30 1982
DOM全称为 “Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。当网页加载时，浏览器就会自动创建当前页面的文档对象模型（DOM）。在DOM中，文档的所有部分（例如元素、属性、文本等）都会被组织成一个树结构（类似于族谱），树中每一个分支的终点称为一个节点，每个节点都是一个对象。
JavaScript操作dom树
goddreamyyh的博客
08-30 430
操作dom树 *appendChild方法 添加子节点到末尾   父节点 调用此方法 特点：类似于剪切的效果 代码： &lt;div id = "div1"&gt;                   &lt;ul id = "ulid"&gt;                           &lt;li&gt;first&lt;/li&gt;                ...
获取节点操作DOM树
zhangshengsky的博客
05-26 495
Title #div1{ width: 150px; height: 160px; border: 1px solid red; } #div2{
js dom - 元素选择、节点树、元素节点树、节点属性
记录点滴
05-05 510
1、document document 整个文档（document节点） html标签是 document的根标签 2、元素选择 （1）根据id选择： let dom = document.getElementById('id') // 根据id选择元素 - 一个 （2）根据标签名选择元素 - 选出是一组元素 （类数组 ）无兼容问题 let dom =...
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
以上知识点涵盖了文件提供的关于JavaScript中DOM节点插入操作的主要概念和技术细节。掌握这些知识点，能够帮助开发者更有效地在Web页面上动态地添加、删除和修改节点，从而实现更丰富的用户交互和更动态的内容展示。
利用vue.js插入dom节点的方法
10-20
本篇文章将详细讲解如何在Vue.js中插入DOM节点，并探讨其与jQuery操作DOM的不同之处。 首先，Vue.js 提供了 `$mount` 方法用于创建组件实例并挂载到DOM中。例如，在给定的示例中，我们创建了四个组件：MyComponent...
JavaScript DOM节点添加示例
10-25
JavaScript DOM节点添加是指在使用JavaScript操作网页DOM（文档对象模型）时，向页面文档中动态添加新的节点元素。DOM是一种以树形结构表示HTML文档的编程接口，它允许JavaScript访问和修改HTML的结构、样式和内容。...
JSTree(js写的树形菜单，支持加载10000节点以上)
12-23
js树形菜单组件，主要解决大数据加载节点卡死问题。
jsDom树简介
成长日记的博客
07-02 1605
Dom树的原型 获得元素： document.getElementByld() document.getElementsByTagName() document.getElementByClassName() <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
纯js的树形菜单(添加删除节点)
02-10
纯js的树形菜单(添加删除节点)动态添加父节点子节点。jquery实现
js代码-12.1 二叉搜索树-查找指定节点
07-14
js代码-12.1 二叉搜索树-查找指定节点
javascript 节点,节点树,节点类型节点属性
fanfan
02-13 268
节点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>节点</title> </head> <body> <div> <p><span></span>...
【JsTree3.3学习笔记】动态加载树节点
小屁孩大帅-保密的博客
08-10 1434
【JsTree3.3学习笔记】动态加载树节点 https://blog.csdn.net/viper2046/article/details/54923418 https://blog.csdn.net/viper2046/article/details/54923418 Jstree介绍 jsTree是jQuery的插件，具有交互性的树。它是免费的、开源的、容易扩展、主题化和可配置的，它...
javascript之DOM节点与节点树初步理解
差不少的博客
06-12 579
DOM节点与节点树初步理解 DOM是由节点构成的。 节点： Document： 整个节点树的顶层节点，代表整个文档 Document Type： 文档节点声明头 Element： 网页的各种标签 Atrribute： 网页元素的属性，例如：id，class等等 Text： 标签之间或标签包含的文本 Comment： 注释 Docment Fragment： 文档片段 浏览器提供了一个原生的节点No...
前端节点原理
weixin_43707560的博客
03-20 1666
1、什么是DOM DOM就是文档对象模型，什么是文档对象模型？这就需要好好说说了。HTML的文档document页面是一切的基础，没有它dom就无从谈起。当创建好一个页面并加载到浏览器时，DOM就悄然而生，它会把网页文档转换为一个文档对象，主要功能是处理网页内容。在这个文档对象里，所有的元素呈现出一种层次结构，就是说除了顶级元素html外，其他所有元素都被包含在另外的元素中。假如有这么一段html...
JS——DOM
weixin_56941647的博客
11-01 1066
1.DOM对象简介2.HTML元素操作3.DOM节点操作
【JavaScript】DOM节点树操作总结
汪小穆的博客
06-01 4312
前言：打开一个页面，加载完html文件后，浏览器首先做的就是解析html代码并开始绘制节点树，也就是说，我们删除标签元素，添加标签元素，改变标签元素的大小，改变标签元素的内容，其实就是在删除DOM节点，添加DOM节点，改变DOM节点的大小，也就是说在DOM节点树上进行操作。 一、节点树 （画工技术一般般，哈哈..儿童节快乐） 这是一个很简单的节点树，<!DOCTYPE htm...
JS DOM基础：操作与节点树详解
2. **节点树** DOM树是一个层次结构，每个节点代表文档中的一个元素、属性、文本或者注释。顶层节点通常是`document`，其他节点按层次关系依次为子节点。例如，通过`document.body`可以获取到页面的主体部分，`body...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值