DOM节点层次（Node类型）

最新推荐文章于 2024-08-27 15:48:31 发布
最新推荐文章于 2024-08-27 15:48:31 发布
阅读量981 收藏 1
点赞数
分类专栏： JavaScript 文章标签： dom Node
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niexia_/article/details/77620703
版权

节点层次

DOM将任何HTML和XML文档描绘成一个由多层节点构成的结构。有几个不同类型的节点，节点又有各自的特点、数据和方法，同时节点之间存在着某种关系，这些关系构成层次。

<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p>Hello World1</p>
    </body>
</html>

这里写图片描述

1.Node类型

除 IE 之外，在其他所有浏览器中都可以访问到Node类型。
JavaScript 中的所有节点类型都继承 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。

12种节点类型：
Node.ELEMENT_NODE(1);（常用）
Node.ATTRIBUTE_NODE(2);
Node.TEXT_NODE(3);（常用）
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5)
Node.ENTITY_NODE(6) ;
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8)
Node.DOCUMENT_NODE(9);
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMEN_FRAGME_NODE(11);
Node.NOTATION_NODE(12)

  • 1.nodeType 属性：用于表明节点的类型
if(someNode.nodeType==Node.ELEMENT_ NODE){//IE中无效，它没有Node类型 
    alert("Node is an element.")
}
//为了确保兼容性
if(someNode.nodeType==1){//节点对应的数字表示
    alert("Node is an element.")
}
  • 2.nodeName和nodeValue 属性
    nodeName中保存的始终是元素的标签名，nodeValue的值始终为null
if(someNode.nodeType==1){//节点对应的数字表示
    value=someNode.nodeName;
}
  • 3.节点关系
    每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点，而且这个节点也有length属性，但是它不是数组。
var firstChild = someNode.childNodes[0];//常用方括号访问
var secondChild = someNode.childNodes.item(1);//也可以用item()访问
var count = someNode.childNodes.length ;

parentNode属性：指向文档树中的父节点
previousSibling属性和nextSibling属性
父节点的firstNode和lastNode属性分别指向其childNodes列表中第一个和最后一个节点
这里写图片描述
- 4.操作节点
appendChild():用于向childNodes列表的末尾添加一个节点。它返回新增的节点。

var returnedNode=someNode.appendChild(newNode);
alert(returnedNode==newNode);//true,返回newNode
alert(someNode.lastNode);//true,被添加到末尾

如果添加的是已经存在的节点=将该节点从原来的位置转移到新位置

var returnedNode=someNode.appendChild(someNode.firstNode);//已存在
alert(returnedNode==someNode.firstNode);//false
alert(returnedNode==someNode.lastNode);//true 被添加到末尾

inserBefore():将节点添加到特定位置，接收两个参数：要插入的节点和作为参照的节点。。这个方法接受两个参数:要插入的节，点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点，同时被方法返回。如果参照节点是null,那它和appendChild()作用一样。

var returnedNode=someNode.insertChild(newNode,null);//第二个参数为null
alert(returnedNode==newNode);//true,返回newNode
alert(newNode==someNode.lastNode);//true,被添加到末尾
var returnedNode=someNode.insertChild(newNode,someNode.firstChild);//插入后成为第一个子节点
alert(returnedNode==newNode);//true,返回newNode
alert(newNode==someNode.firstNode);//true,被添加第一个节点

replaceChild()移除节点，接收两个参数：要插入的节点和要替换的节点

//替换第一个子节点
var returnedNode=someNode.replaceChild(newNode,someNode.firstChild);

removeChild()移除节点，而不是替换

//移除第一个节点
var returnedNode=someNode.removeChild(someNode.firstChild);
  • cloneNode()
    它创建调用这个方法的节点的一个完全相同的副本
github@niexia
关注
专栏目录
JS高级程序设计——第十章 DOM 10.1节点层次
YuTong_的博客
03-17 586
第十章 DOM 一、什么是DOM？二、节点层次1、Node类型 一、什么是DOM？ 1、DOM（Document Object Model）：文档对象模型。是宿主对象（JS运行环境提供的对象），跨平台，是中立于平台和语言的接口。 2、DOM 定义了访问和操作HTML文档（网页）的标准方法。简单说DOM就是document对象，学习DOM就是学习如何通过document对象操作网页上的内容。 二...
DOM节点层次
cake_eat的博客
09-22 275
什么是DOM DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点数，允许开发人员添加、移除和修改页面的某一部分。 什么是节点层次 节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标识。每个节点都拥有各自的特点、数据和方法，另外与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为以特定节点为根节点的树形结构。 文档节点是每个文档的根节点。文档元素是文档的外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个
DOM--Node（类型和方法）
最新发布
huangzitaoyyds的博客
08-27 665
DOM Level 1 描述了名为 Node 的接口，这个接口是所有 DOM 节点类型都必须实现的。Node 接口在 JavaScript中被实现为 Node 类型，在除 IE之外的所有浏览器中都可以直接访问这个类型。在 JavaScript 中，所有节点类型都继承 Node 类型，因此所有类型都共享相同的基本属性和方法。
DOM节点层次(一)
Cathy731946的博客
02-01 658
前言DOM（文档对象模型）是针对HTML和XML文档的一个API。其作用是将网页转为一个javascript对象，从而可以使用javascript对网页进行各种操作（增删改查等） 浏览器会根据DOM模型将HTML文档解析成一系列的节点。再由这些节点组成树状结构。DOM的最小组成单位是节点（node）。 每一段标记都可以通过树中的一个节点表示：HTML元素通过元素节点表示，特性（attribute
DOM节点之nodeType
初漾的博客
07-21 577
elem.nodeType = 1 //元素节点 elem.nodeType = 9 //nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。nodeName 属性含有某个节点的名称。 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是
6.28 学习内容
thinkingw770s的博客
06-28 128
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt;
浅谈Javascript中的12种DOM节点类型
11-29
【JavaScript中的DOM节点类型详解】 DOM（Document Object Model）是一种标准，它允许程序和脚本动态更新、添加、删除和改变HTML和XML文档的内容和结构。JavaScript与DOM结合，为Web开发提供了强大的能力，使开发者...
从零开始学前端 - 31.DOM及Node节点详解
qq_39506551的博客
09-23 727
从零开始学前端 - 31.DOM详解   DOM 的全称是 Document Object Model，指文档对象模型。每当页面被加载时，浏览器就会创建一个当前页面的文档对象模型，并将它的内容转化为树状图的形式，也就是常说的 DOM树 或 对象树，以便对页面的结构进行明确的表述。 一、DOM树状图 二、节点 2.1 节点类型 2.2 节点属性 2.3 节点关系 三、节点操作 3.1 创建节点 3.2 操作节点 3.3 替换节点 3.4 克隆节点 3.5 删除节点 3.6 节点属性操作
DOM节点树查看器。「DOM node tree viewer.」-crx插件
03-09
这个扩展显示了详细的DOM节点树。 此扩展详细显示了DOM树。 支持语言:English
JavaScript之DOM对象（Node结点属性、导航属性、页面查找）
Viewinfinitely的博客
05-09 419
文章目录DOM与Node节点自身属性导航属性页面查找 DOM与Node节点 1、DOM的概念 DOM 是 W3C（万维网联盟）的标准，DOM 定义了访问 HTML 和 XML 文档的标准。 W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 2、DOM的分类 核心 DOM ： 针对任何结构化文档的标准模型 XML DOM ： 针对 XML 文档的标准模型，定义了所有 XML 元素的对象和属性，以及访问它们的方法。 HTML DOM ：针对 HT
Node层次解析
越努力越幸运
11-18 2382
本文内容主要分为两大部分，第一部分是 Node.js 的基础和架构，第二部分是 Node.js 核心模块的实现。 Node.js 基础和架构 Node.js 的组成 Node.js 代码架构 Node.js 事件循环 组成 Node.js 主要由 V8、Libuv 和第三方库组成。 v8：实现js解析、执行、自定义扩展之类的 Libuv：跨平台的异步 IO 库，但它提供的功能不仅仅是 IO，还包括进程、线程、信号、定时器、进程间通信，线程池等 第三方库：http，Dns解析之类的。 结构 上.
层次节点——NODE节点
datk74439的博客
05-18 115
1、html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>node节点</title> </head> <body> <div id="box"...
DOM节点层次 Document类型
小葵坤_易安的博客
01-30 332
1.文档的子节点 Document节点的子节点可以是DocumentType、Element、ProcessingInstruction或Comment,还有两个内置的访问其子节点的快捷方式。 第一个是documentElement属性，该属性始终指向HTML页面中的&amp;amp;amp;lt; html &amp;amp;amp;gt;元素；另一个是通过childNode列表访问文档元素。 例： &amp;amp;amp;lt;html&amp;amp;amp;
html5中的dom中的各种节点的层次关系是怎样的
weixin_34138377的博客
06-01 742
html5中的dom中的各种节点的层次关系是怎样的 一、总结 一句话总结：Node节点是所有节点的基类，所以都继承它的方法   1、dom提供在js中动态修改html标签的作用 比如增加修改标签等，并且是在非html代码（比如js）层面，而不是在view层面   2、弄清楚层次关系，就不用死记硬背了 那些属性方法什么的，就是不用背代码，这些东西是都可以理解的，很好理解的，弄懂层次关...
01-节点层次
阳神
02-18 518
01-节点层次 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box"> <span&gt...
【K3s】第9篇 详解节点Node
Fanjufei的博客
12-27 451
就 Node 而言，隐式假定使用相同名称的实例会具有相同的状态（例如网络配置、根磁盘内容） 和类似节点标签这类属性。如果某个 Node 需要被替换或者大量变更，需要从 API 服务器移除现有的 Node 对象， 之后再在更新之后重新将其加入。Kubernetes 通过将容器放入在节点（Node）上运行的 Pod 中来执行你的工作负载。如果节点是健康的（即所有必要的服务都在运行中），则该节点可以用来运行 Pod。否则，直到该节点变为健康之前，所有的集群活动都会忽略该节点。向 API 服务器注册节点时使用的。
1. 元素的node对应属性
yjc0403的博客
11-11 176
nodeName 属性 nodeName 属性规定节点的名称。 nodeName 是只读的 元素节点的 nodeName 与标签名相同 属性节点的 nodeName 与属性名相同 文本节点的 nodeName 始终是 #text 文档节点的 nodeName 始终是 #document 注释：nodeName 始终包含 HTML 元素的大写字母标签名。     ...
数据结构温习2（树结构）
weixin_44506329的博客
01-10 413
树 树就是一种类似现实生活中的树的数据结构（倒置的树）。任何一颗非空树只有一个根节点。 一棵树具有以下特点： 一棵树中的任意两个结点有且仅有唯一的一条路径连通。 一棵树如果有 n 个结点，那么它一定恰好有 n-1 条边。 一棵树不包含回路。 下图就是一颗树，并且是一颗二叉树。 如上图所示，通过上面这张图说明一下树中的常用概念： 节点：树中的每个元素都可以统称为节点。 根节点：顶层节点或者说没有父节点的节点。上图中 A 节点就是根节点。 父节点：若一个节点含有子节点，则这个节点称...
C++ builder 中的 XMLDocument 类详解(15) – Firstnode 和Lastnode
weixin_34255055的博客
11-27 124
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 //--------------------------------------------------------------------------- #ifndef Unit1...
JavaScript节点类型详解与DOM节点分类
在JavaScript的世界里，节点（Node）是DOM（Document Object Model）文档结构中的基本构建块。DOM是一种树形结构，它允许我们通过编程方式来访问和操作HTML或XML文档。节点类型是理解DOM操作的关键，尤其在进行前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值