js学习笔记-DOM节点层次-node类型--节点关系、操作节点

最新推荐文章于 2024-05-06 02:35:52 发布
最新推荐文章于 2024-05-06 02:35:52 发布
阅读量366 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunxiaolinlinx/article/details/107764161
版权

1、节点层次
DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。
节点分为不同类型，
每个节点都有：特点、数据、方法。
文档节点是每个文档的根节点

<html>
<head></head>
<body></body>
</html>

这个例子，HTML元素就是文档的子节点，称为文档元素，每个文档只能有一个文档元素。
1.1、Node类型
Dom1级定义了一个Node接口，在js中是通过Node类型实现。
除IE外，其他浏览器都可以访问这个类型。
js节点类型—>继承自：Node类型。
因此所有节点类型都共享相同的基本属性和方法。
每个节点都有一个NodeType属性，用来表明节点的类型。
节点类型由：Node类型中定义的12个数值常量 表示

常量名常量值描述
Node.ELEMENT_NODE1代表元素节点，各种标签
Node.ATTRIBUTE_NODE2代表属性
Node.TEXT_NODE3代表元素或属性中的文本内容，标签内部文字
Node.CDATA_SECTION_NODE4代表文档中的 CDATA 部（不会由解析器解析的文本）
Node.ENTITY_REFERENCE_NODE5代表实体引用
Node.ENTITY_NODE6代表实体
Node.PROCESSING_INSTRUCTION_NODE7代表处理指令
Node.COMMENT_NODE8代表注释节点
Node.DOCUMENT_NODE9代表整个文档（DOM 树的根节点），document
Node.DOCUMENT_TYPE_NODE10向为文档定义的实体提供接口
Node.DOCUMENT_FRAGMENT_NODE11代表轻量级的 Document 对象（文档的某个部分）
Node.NOTATION_NODE12代表 DTD 中声明的符号

通过这些常量，可以确定节点类型，如：

if(somenode.nodeType == 1){      //适用于所有浏览器
alert("node is an element")}

（1）、了解节点信息
nodename:
nodevalue:
值取决于节点类型
（2）、节点关系
childNodes属性：子节点，每个节点都有，保存着一个nodeList对象
nodeList对象：类数组，可以用方括号语法，length属性，基于DOM动态查询。

somenode.childNodes[0]//获取第一个节点
somenode.childNodes.item(0)//同上

parentNode：父节点。
previousSibling：上一个兄弟节点。
nextSibling：下一个兄弟节点。
firstChild:父节点的第一个子节点。
lastChild:父节点的最后一个子节点。
hasChildNodes():是否含有子节点，如果有返回true。
ownerDocument:–>指向表示整个文档的节点，直接访问文档节点。
图片来自书上，照的书上
（3）、操作节点

  • appendChild():在末尾添加节点。如果传入的节点已经是文档的一部分，结果是：将节点从原来位置转移到新位置。
somenode.appendChild(newnode)//如果newnode已经有了，会将其挪过来。
  • insertBefore():把节点放在特定位置，（要插入的节点，作为参照的节点）
//插入后成为最后一个子节点
somenode.insertBefore(newnode,null)
//插入后成为第一个子节点
somenode.insertBefore(newnode,somenode.firstChild)
//插入到最后一个子节点前面
somenode.insertBefore(newnode,somenode.lastChild)
  • replaceChild:替换节点。（要插入的节点，要替换的节点）要替换的节点将有方法返回并移除，同时由新节点占据其位置。
  • removeChild():删除节点。（要删除的节点）
  • cloneNode():创建完全相同的副本，潜复制：只复制节点本身，false，深复制：true，复制节点及子节点树
  • normalize():处理文本节点。
sunxiaolinlinx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js学习笔记：DOM——节点层次
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
10-16 8083
DOM（文档对象模型）是针对HTML和XML文档的一个API，描绘了一个层次化的节点树。 DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。 节点分为几种不同的类型。文档节点是每个文档的根节点。html元素为文档元素。 文档元素是文档的最外层元素 文档中的其他所有元素都包含在文档元素中。 每个文档都只能有一个文档元素。 在html页面中，文档元素始终都是html元素。在这里用脑
JavaScript----DOM基础知识（二）——节点关系
yufanhui的博客
07-11 296
JavaScript----DOM基础知识（二）--节点我们知道DOM将HTML或XML文档描绘成了一个具有层次化的节点树，节点又分为几种不同的类型，每种类型用来记录文档中不同的信息，而每个节点又都拥有各自的特点、属性、方法，而且也与其他节点存在着关系。证实这种节点与节点之间的关系，构成了层次。文档元素是文档的外层元素，文档中的其他所有元素都包含在文档元素中。每个文 档只能有一个文档元素。在 HT...
js获取 元素 和 节点 大全
最新发布
2401_84094979的博客
05-06 687
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JS-6 : 节点层次属性，节点操作，事件
白走刀口的博客
11-22 1019
一. 元素节点的层次属性 基于层级关系获取节点（父子关系，兄弟关系） perentNode 获取父节点（只有一个） childNode 获取所有子节点（包含文本节点：文本内容 ，换行） children 获取所有直接子节点（只包含元素节点，不含文本节点） nextSibling 获取下一个兄弟节点 nextElementSibling 获取下一个兄弟元素节点 previousS...
DOM节点以及节点之间的关系
@宝藏男孩
03-15 2318
三大属性 所有的Node(元素、属性、文本)对象都是document的 子代节点 nodeType 节点类型（number） document 9 element 1 attrbute 2 text 3 节点名 (nodeName) document -> #document 标签元素 -> 全大写的标签名 属性名 -> attitude 文本节点 -> #tex...
Javascript中的Dom概念和Node类型
Welkin_qing的博客
07-31 905
一、Dom的概念和节点层次 Dom：Document Object Model 文档对象模型，可以将任何 html 文档描绘成一个由多层次节点构成的结构。换而言之，就是Dom会把文档看成一棵树，同时定义很多方法来操作这棵树中的每一个元素（节点）。 文档：html 页面 文档对象：页面中的元素 文档对象模型：为了能够让程序（js）去操作页面中的元素 文档节点：文档节点是每个...
原生js——与node有关的属性和方法：hasChilsNodes()、appendChild()、removeChild()、replaceChild()、insertBefore()等
代码小宝宝的博客
02-25 475
原生js—Node属性和方法 1.nodeType：类型为1-12； 最常用的节点类型： Node.ElEMENT_NODE：元素节点，node.type == 1； Node.ATTRIBUTE_NODE：特性节点，node.type == 2； Node.TEXT_NODE：文本节点，node.type == 3； Node.COMMENT_NODE：注释节点，node.type...
比较详细的javascript DOM 学习笔记第1/2页
12-08
本篇学习笔记主要探讨了DOM的基础知识，包括不同类型的节点以及如何访问和操作这些节点。 1. **DOM节点层次** - **Document**：作为整个文档的顶级节点，它包含了文档的全部内容。 - **DocumentType**：表示文档...
JavaScript高级程序设计 DOM学习笔记
10-28
3. **Node类型**：Node是DOM中各种节点类型的基类，其他类型的节点均继承自Node。Node类型的属性和方法被其他节点类型共享，包括以下几种： - **nodeType属性**：每个节点类型都有一个对应的常量值，如Node....
JavaScript 学习笔记（十二） dom
12-09
在JavaScript中，DOM提供了多种方法来操作页面上的元素，这些方法包括： 1. `createElement()`：此方法用于创建一个新的HTML元素。在示例中，`var oP = document.createElement("p");`创建了一个`<p>`标签。 2. `...
JS--JavaScript节点Node概述、节点类型、nodeType详解
吴声子夜歌的博客
09-25 2468
节点Node概述 DOM 1.0定义了Node接口，该接口为DOM的所有节点类型定义了原始类型。JavaScript实现了这个接口，定义所有节点类型必须继承Node类型。作为Node的子类或孙类，都拥有Node的基本属性和方法。 节点类型 DOM规定：整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点，如此等待。 每个节点都有一个n...
JavaScript高级程序设计学习笔记--DOM（一）（节点层次--Node类型--节点关系/操作节点）...
weixin_34104341的博客
03-21 117
文档对象模型（DOM，Document Object Model）是针对XML但经过扩展用于HTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构。HTML或XML页面中每个组成部分都是某种类型的节点，这些节点又包括着不同类型的数据。 通过DOM创建的这个表示文档的树形图，开发人员获得了控制页面内容和结构的主动权。借助DOM提供的API，开发人员可以轻松自如地删除、添加、替换或修改任何...
DOM节点之间的关系,与节点的基本操作
晴树的专栏
07-09 2142
1. 节点之间的关系 1.1 第一种获取方式 以下获取节点都会获取所有的节点类型,不只是包括元素节点,还有文本类型等 获取一个元素节点的所有子节点 元素节点对象.childNodes 获取到的是一个类数组 NodeList 获取一个元素节点的第一个子节点 元素节点对象.firstChild 获取一个元素节点的最后一个子节点 元素节点对象.lastChild 获取一个元素节点的下一个...
JS：节点
qq_41504815的博客
03-08 906
1、什么是节点 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 整个文档是一个文档节点 document 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 2、节点类型(nodeType) 3、节点名称(nodeName) 4、节点的值 5、常用方法 6、节点关系 节点的关系包括父子，同胞 父节点–parentNode 父元素节点–parentElement 子节点–childNodes：标签节点
JavaScript 节点及层级操作
流楚丶格念的博客
08-19 4138
节点操作 var body = document.body; var div = document.createElement('div'); body.appendChild(div); var firstEle = body.children[0]; body.insertBefore(div,firstEle); body.removeChild(firstEle); var text = document.createElement('p'); body.replaceChild(text,
JS节点的属性及方法
front_end_fan
09-18 2387
前言学习了jquery等类库，可不能”忘本“，原生js才是它的根基。 ”但是前端技术发展到今天，如果你时常关注Github上一些流行的开源JS项目，你会发现这样一种趋势：开发者们越来越倾向于使用原生代码，而不依赖与第三方库。“一、属性Attributes 存储节点的属性列表（只读）childNodes 存储节点的子节点列表（只读）dataType 返回次节点的数据类型documen
JS----DOM节点相关信息，归纳详解
weixin_47087729的博客
06-03 148
1．Dom获取节点方式 <h1 class="aaa">1</h1> <h1 id="bbb">1</h1> <p>2</p> <p>2</p> <p>2</p> <input type="text" name="ccc"> <script> var a = document.querySelector
JS获取鼠标选中的节点信息
热门推荐
吴小迪的博客
05-02 4万+
今天给大家分享一下如何在项目中获取鼠标选中的节点和其他的信息 项目实战： 项目需求：在富文本编辑器上获取选中dom节点的内容，和鼠标所在的位置。 笔者前不久在某项目开发的过程中就遇到了这个问题，全网搜，感觉总结的好的还不是很多，就算是好的也不是很全，所以笔者决定把这些东西结合着我项目的需求去把这些知识点串起来，以供后面的朋友们解决问题。 首先要有一个输入框或者富文本编辑器（没有富文本编辑器朋友可以...
js 节点
Beware beginning
08-26 196
节点包括 标签 属性 文本 而元素只是标签 nodeType: 1--标签 2--属性 3--文本 nodeName: 节点的名字 标签节点--大写的标签名字 属性节点--小写的 属性名字 文本 节点--内容 nodeValue: 节点的值 标签节点--null 属性节点--属性值 文本节点--文本内容 var i = document.getElementById('XX') i.parentNode i.parentElement i.childNode
Linux驱动与G-Sensor学习笔记
"这篇文档是关于Linux驱动程序开发和g-sensor（加速度传感器）学习的心得体会，主要涵盖了从驱动注册到输入子系统、HAL层开发以及bma250传感器的功能描述和驱动开发步骤等内容。" 在Linux驱动开发中，`module_init`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值