DOM节点

最新推荐文章于 2023-12-20 10:30:50 发布
最新推荐文章于 2023-12-20 10:30:50 发布
阅读量1.5k 收藏 4
点赞数
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiaLuoCXY/article/details/121959408
版权

1.1-DOM节点介绍

  • 1.什么是节点：在HTML文档中，一切皆节点（HTML文档本身、标签、属性、注释内容、文本）

  • 2.什么是元素：元素在HTML中叫做标签，在JS的dom对象中称为元素（可以理解为标签的面向对象的叫法）

  • 3.HTML标签属于节点的一种，叫做元素节点

  • 4.节点三要素：

    • 节点类型：标签、属性、注释、文本

    • 节点名称：p、div、class（标签名）

    • 节点的值：one（属性的值）

    • .DOM节点操作重点记住： 元素节点

1.2-查找节点：子节点

获取子节点子元素

1.获取子节点 :  父元素.childNodes
 2.获取子元素节点（重点）:   父元素.children

1.3-查找节点：兄弟节点

获取兄弟元素
            1.获取上一个元素节点 : 元素.previousElementSibling，大哥
            2.获取下一个元素节点 : 元素.nextElementSibling，小弟

1.4-查找节点：父节点

获取父节点 
            子元素.parentNode

1.6-新增节点

最低0.47元/天 解锁文章
XiaLuoCXY
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
初学JavaScript：HTML DOM
lalala_dxf的博客
04-16 1117
DOM 简介 DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）（可以理解为对一个网页节点进行增删操作，一个节点可以是一对html标签，也可以是一对span标签）。 拆分理解下： • 文档 – 文档表示的就是整个的HTML网页文档，也就做结构树 • 对象 – 对象表示将网页中的每一个部分都转换为了一个对象。 • 模型 – 使用模型来表示对象之间的关系，这样方便我们获取对象 文档对象
Dom 节点和 元素 有啥区别？好家伙，我弄懂了！
最新发布
2401_84091628的博客
05-05 760
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
DOM之12种节点
weixin_47075145的博客
07-21 3055
DOM是javascript操作网页的接口，全称为文档对象模型(DocumentObjectModel)。，从而可以使用javascript对网页进行各种操作(比如增删内容)。。DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。本文将主要说明DOM节点类型。...
DOM节点详解
weixin_44691513的博客
06-20 955
DOM节点之Node详解 定义 DOM(文档对象模型) 是针对HTML和XML文档的一个API(应用程序编程接口) DOM描绘的是一个层次化的节点树，允许开发人员添加，修改和移除页面的某一部分 Node类型 属性：1、nodeType ， 表示节点类型 规则： 1 -->Element类型 3 -->Text类型 8 -->Comment类型 9 -->Document类型 2、 childNodes ，表示子节点集合，可以使用slice方法将NodeL
前端（十四）——DOM节点操作手册：你需要了解的一切
杜永康的博客
08-24 3398
DOM（文档对象模型）是一种用于表示和操作HTML、XML和SVG文档的编程接口。它将网页文档解析为一个由节点组成的树形结构，每个节点代表文档中的一个元素、属性、文本或其他内容。DOM是很重要的，因为它让我们能够使用JavaScript等脚本语言直接操控网页内容，实现动态、交互性强的网页效果。通过DOM，我们可以改变网页的样式和结构，响应用户的操作，并且实现数据的动态加载和更新。这样就能够让网页更加生动有趣，提升用户体验。同时，DOM的标准化也保证了开发者在不同浏览器下的兼容性，使得开发更加便捷和可靠。
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
Vue Render函数创建DOM节点代码实例
10-15
在Vue中，`render` 函数接收一个参数 `createElement`，这个函数是用于创建虚拟DOM节点的。在上述代码实例中，我们可以看到如何使用 `createElement` 创建DOM元素： 1. **属性传递**：`createElement` 接受一个标签...
JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】
10-18
以下是一些关于DOM节点操作的关键知识点： 1. **创建节点**： - `createElement(tagName)`：这个方法用于创建一个新的HTML元素节点，例如`document.createElement('div')`将创建一个`<div>`元素。 - `...
React如何将组件渲染到指定DOM节点详解
08-29
React 如何将组件渲染到指定 DOM 节点详解 React 框架是一个基于组件的框架，它提供了一种简单的方式来构建用户界面。但是，在某些情况下，我们需要将组件渲染到指定的 DOM 节点中，而不是默认的根节点。这篇文章将...
DOM- 节点操作
qq_40832034的博客
07-19 1223
节点可以让我们更好的理清标签元素之间的关系 parentNode 属性，子元素.parentElement 返回的是一个对象  返回最近一级的父节点 找不到返回为null 需求：多个二维码，点击谁，谁关闭 （3）兄弟节点查找 下一个兄弟节点 nextElementSibling 属性 上一个兄弟节点 previousElementSibling 属性 3、增加节点 很多情况下，我们需要在页面中增加元素  比如，点击发布按钮，可以新增一条信息 一般情况下，我们新增节点，按照如下操作： 
节点和元素的区别
一杯咖啡
04-01 1766
dom文档本身就是1个节点（document）。节点包括文档节点、元素节点、文本节点、属性节点、注释节点。 元素之一是节点的其中部分之一
节点之间的关系
m0_67901663的博客
03-24 361
节点之间的关系
DOM之节点操作总结（附实例、图解）
weixin_45135068的博客
08-02 2546
目录 获取元素的两种方式 节点的概述 节点层级 3.1 父级节点 3.2 父子节点 3.3 兄弟节点 创建节点 删除节点 复制节点（克隆节点） 三种创建元素的区别 正文 1. 获取元素的两种方式 （1）利用DOM提供的方法获取元素 document.getElementById() document.getElementsByTagName() document.querSelector等 逻辑性不强、繁琐 （2）利用节点层级关系获取元素 利用父子兄弟节点关系获取元素 逻辑性强，但兼容性差 2.
【DOM笔记三】节点操作（节点概述、节点层级、添加 / 删除 / 复制节点、DOM基本语法总结！
waski的博客
12-20 1054
文章目录5 节点操作5.1 节点概述5.2 节点层级5.2.1 父子节点5.2.2 兄弟节点5.3 添加元素5.4 删除节点5.5 复制节点5.6 三种动态创建元素的区别6 DOM小结 5 节点操作 获取元素的方式： 比较发现，用节点层级关系来获取元素更简单（DOM方法相当于绝对路径，节点方法相当于相对路径）。 5.1 节点概述 **概念：**网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。 **基本组成：**nodeType(节点类型) 、nodeName(节点
前端学习（十八）webAPI基础1
whitefish520的博客
08-31 8189
web API Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ) DOM 文档对象模型（Document Object Model）：是W3C组织推荐的处理可拓展标记语言的标准编程接口，所有的浏览器都遵循这套规范 通过DOM接口，可以改变网页的内容、结构、样式 DOM树 DOM树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前页面 文档：一个页面就是一个文档，DOM中使用document表示 节点：网页中的所有内容，
在JS中什么是DOM，DOM的节点有哪些
soap_guan的博客
07-04 5757
 DOM DOM是Javascript操作网页的接口，全称叫文档对象模型（Document Object Model）。它的作用是将网页转化为一个Javascript对象，从而用Javascript脚本进行各种操作（比如增删元素等）。 浏览器会根据DOM模型，将结构化文档（比如Html或者xml等）解析成一系列的节点，再由这些节点解析成树状结构（Dom Tree），所有的节点和最终的
DOM的作用
candy的专栏
11-17 1995
什么是DOM ？ DOM即“文档对象模型”。基于语义的逻辑结构，DOM将网页内的元素与内容呈现为一个清晰、易读的树状模型。在这个理想化的树状模型中，任何一个元素或是内容，都只有自己唯一的一个节点。即便这个文档拥有巨量的内容与繁复的结构，只要它本身语义逻辑没有错误，那么用DOM都可以轻易地将这个文档中的任意一个元素或内容检索出来。简言之，对于网页前端开发人员而言，DOM就是一个用于检索网页
react获取dom节点
05-19
在 React 中获取 DOM 节点有多种方法，以下是其中的一些： 1. 使用 ref 属性 可以在组件中通过 ref 属性获取 DOM 节点。例如，可以在 render 方法中创建一个 div 元素，并将其保存到组件的 ref 属性中： ``` class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } componentDidMount() { console.log(this.myRef.current); } render() { return <div ref={this.myRef}>Hello, world!</div>; } } ``` 在 componentDidMount 方法中，可以使用 this.myRef.current 获取到这个 div 元素。 2. 使用回调函数 可以将一个回调函数传递给组件，当组件挂载时，这个函数会被调用并传递组件的 DOM 节点作为参数： ``` class MyComponent extends React.Component { componentDidMount() { console.log(this.myNode); } render() { return <div ref={node => this.myNode = node}>Hello, world!</div>; } } ``` 在 componentDidMount 方法中，可以使用 this.myNode 获取到这个 div 元素。 需要注意的是，使用回调函数的方法在 React 16.3 版本之前是唯一的可靠方法，但是在 React 16.3 版本之后，ref 属性提供了更好的方式来获取 DOM 节点。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值