DOM 中，元素节点、属性节点、文本节点讲解

最新推荐文章于 2023-03-20 23:27:25 发布
最新推荐文章于 2023-03-20 23:27:25 发布
阅读量585 收藏
点赞数
分类专栏： HTML DOM JS 相得益彰 文章标签： IDEA HTML

节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

  • nodeName（节点名称）
  • nodeValue（节点值）
  • nodeType（节点类型）

nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是：

 

元素类型节点类型
元素1
属性2
文本3
注释8
文档9

 

在实际应用中，经常用到的就是元素节点、属性节点和文本节点了，下面我们通过小段代码进行讲解

1：元素节点

 <HEAD>
  <TITLE>空谷悠悠</TITLE>
 </HEAD>
 <BODY>
  <table>
	<tr>
		<td id="john" name="myname">John</td>
		<td>Doe</td>
		<td id="jack">Jack</td>
	</tr>
  </table>
  <script>
 var d = document.getElementById("john");	
	alert(d.nodeType)
	alert(d.nodeName)
	alert(d.nodeValue)	
  </script>
 </BODY>
</HTML>

 分析运行结果，其三个属性的值分别为：

nodeType：ELEMENT_NODE

nodeType值：1

nodeName：元素标记名    //此处为TD

nodeValue：null

2：属性节点

 <HEAD>
  <TITLE>空谷悠悠</TITLE>
 </HEAD>
 <BODY>
  <table>
	<tr>
		<td id="john" name="myname">John</td>
		<td>Doe</td>
		<td id="jack">Jack</td>
	</tr>
  </table>

  <script>
 var d = document.getElementById("john").getAttributeNode("name");	
	alert(d.nodeType)
	alert(d.nodeName)
	alert(d.nodeValue)	
  </script>
 </BODY>
</HTML>

  分析运行结果，其三个属性的值分别为：

nodeType：ATTRIBUTE_NODE

nodeType值：2

nodeName：属性名  // name

nodeValue：属性值  //myname

3:文本节点

 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>
 <BODY>
  <table>
	<tr>
		<td id="john" name="myname">John</td>
		<td>Doe</td>
		<td id="jack">Jack</td>
	</tr>
  </table>
  <script>
    var d = document.getElementsByTagName("td")[0].firstChild	
	alert(d.nodeType)
	alert(d.nodeName)
	alert(d.nodeValue)	
  </script>
 </BODY>
</HTML>

 

  分析运行结果，其三个属性的值分别为：

nodeType：TEXT_NODE

nodeType值：3

nodeName：#text

nodeValue：文本内容   // John

myfltinthesky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
节点的分类、属性、获取方案和操作
ZNdcsdn的博客
07-15 1073
1.DOM技术： document object model 文档对象模型。文档对象就是document，此对象是DOM中的顶级对象。在这个模型中 最重要的就是概念DOM树。就是说浏览器在加载一个html文档进内存中，将html文档形成一个DOM树。 在DOM树上，所有的成分都称为节点。所有的节点之间就形成了两种关系。兄弟和父子。 2. 节点的分类： 5种节点： document : 代表的是文档本身。 ...
JS实现访问DOM对象指定节点的方法示例
10-18
对于元素节点，其值通常为`null`，而对于文本节点，它会返回文本内容。 **二、应用** 在示例中，我们访问了ID为"b1"的`<body>`元素，然后分别用`nodeName`、`nodeType`和`nodeValue`属性获取了它的名称、类型和值...
常用节点类型
weixin_34104341的博客
05-20 646
判断节点类型方法：object.nodeType，查看某个节点是什么类型； 　　最常用5个节点类型： 　　　　　　元素节点： 　　　　　　　　就是标签，为数字1； 　　　　　　document： 　　　　　　　　数字9； 　　　　　　文本节点：包括两个标签之间的空白，也是文本节点。两个标签之间有文本和空白，只算1个文本节点。 　　　　　　　　数字3； 　　　　　 ...
节点的种类有几种，分别是什么？
高先生的猫
04-20 8697
(1)元素节点：nodeType ===1; (2)文本节点：nodeType ===3; (3)属性节点：nodeType ===2;
剑指offer定义的结点类型---------day zero
纸墙
08-16 117
   defineNodeStruct.h           该头文件定义了一些结点类型。   #pragma once //单链表链表的结点类型 struct FlistNode { int val; FlistNode *next; FlistNode(const int x) :val(x), next(0){} }; //双向链表的结点类型 struct ListNod...
数据结构和算法学习记录——线性表之双向链表（上）-结点类型定义、初始化函数、创建新结点函数、尾插函数、打印函数、尾删函数
最新发布
li13437542099的博客
03-20 109
数据结构和算法学习记录——线性表之双向链表（上）-结点类型定义、初始化函数、创建新结点函数、尾插函数、打印函数、尾删函数。
示例4：操作节点属性.rar_javascript操作节点属性
09-20
理解并熟练掌握JavaScript操作DOM节点属性是成为合格前端开发者的关键技能之一。 通过示例4：操作节点属性的压缩包文件，你将能够深入学习这些概念，并通过实际代码示例进行实践，从而更好地理解和应用到自己的项目...
JS简单添加元素新节点的方法示例
10-18
本示例主要讲解了如何使用JavaScript来创建、添加和克隆页面元素节点，这些都是前端开发中常见的操作。下面将详细解析这些方法： 首先，我们获取页面上的某个特定元素。在这个例子中，我们通过`getElementById`方法...
浅谈js的html元素的父节点,子节点
10-21
`childNodes` 返回的是一个包含所有子节点的NodeList，包括文本节点、注释节点等非元素节点。而 `children` 返回的则是只包含元素节点的HTMLCollection。`children` 属性在IE5.5及以上版本中可用，但非W3C标准。在...
详细讲解JS节点知识
10-29
DOM节点主要分为几大类：元素节点（Element Node）、属性节点（Attribute Node）、文本节点（Text Node）、注释节点（Comment Node）以及处理指令节点（Processing Instruction Node）等。每个节点都有特定的属性和...
33节点潮流编程
03-13
程序编写Institute of Electrical and Electronics Engineers (IEEE) 美国电气和电子工程师协会。IEEE-33节点标准系统潮流程序的设计采用牛顿拉夫逊法潮流分布的计算原理，运用电力系统分析关于系统网络计算的相关知识，在MATLAB里编程实现潮流计算的验证。PQ节点：这类节点的有功功率P和无功功率Q是给定的，节点电压和相位（V，δ）是待求量。通常变电所都是这一类型的节点。
WEB开发 之 JavaScript HTML DOM 元素（节点）.docx
09-26
这通常通过创建一个文本节点完成，然后将其附加到新创建的元素上： ```javascript var node = document.createTextNode('这是一个新段落。'); para.appendChild(node); ``` 最后，你需要找到一个已存在的元素，将...
Javascript入门学习第八篇 js dom节点属性说明第1/2页
12-12
如果是属性节点，nodeName将返回这个属性的名字。 如果是文本节点，nodeName将返回一个#text的字符串。 另外我要说的是： nodeName属性是一个只读属性，不能进行设置.(写) 它返回 大写字母的值。 2,,nodeType属性...
判断是否存在子节点的实现代码
09-02
每个节点都有一个`childNodes`属性，它包含了当前节点的所有子节点，包括文本节点和空白。如果一个节点没有子节点，`childNodes.length`的值将会是0。 下面是一段实现判断是否存在子节点的JavaScript代码： ```...
JS查找孩子节点简单示例
10-16
`childNodes`返回一个包含所有子节点的NodeList对象，包括文本节点、注释节点等非元素节点。例如，`for (var i = 0; i ; i++)`会遍历`x`的所有子节点。 3. 条件判断： 在遍历过程中，我们可以通过条件判断找到特定...
7 CORE 节点类型
diligent_lee的博客
08-12 836
CORE 节点类型 原文链接：CORE Node Types 1. 概述 可以在 CORE 中配置不同的节点类型，每个节点类型都有一个机器类型，指示节点在运行时将如何表示。不同的机器类型允许不同的选择。 2. netns 节点 netns（Linux 网络命名空间） 节点类型是默认值。这适用于将由 Linux 网络命名空间支持的节点。这种机器类型使用很少的系统资源来模拟网络。将其指定为默认机器类型的另一个原因是该技术通常不需要更改内核；它可以从最新的主流 Linux 发行版中开箱即用。 3. 物理节点 物
驰骋工作流引擎设计系列03 节点类型定义
weixin_55421197的博客
04-17 326
第1节.关键字 驰骋工作流引擎 流程快速开发平台 workflow ccflow jflow 第2节.节点类型的定义 为了适应分合流的流程，实现多线程，我们需要把节点分为5种类型。 第3节.节点的分类 为了适应与支持多线程模式的流程，我们把节点类型分为如下几种。 普通的、分流点、合流点、分合流点、子线程点。驰骋工作流用图形分别标示出来节点的类型。 第4节.流程图例 一个分合流的流程实例： 流程模式就是流程运行的模式类型，CCFlow目前支持的类型有线形流程、父子流程、同表单分合流、异表单分合流、我们所分
简述HTML DOM及其节点分类
weixin_30868855的博客
10-28 670
在JavaScript中，document这个对象大家一定很熟悉，哪怕是刚刚开始学习的新人，也会很快接触到这个对象。而document对象不仅仅是一个普通的JavaScript内置对象，它还是一个巨大API的核心对象，这个巨大的API就是DOM（Document Object Model），它将文档的内容呈现在JS面前，并赋予了JS操作文档的能力。 ...
流式低代码编程，拖拽节点画流程图并运行
林晓风的博客
05-24 3213
springboot+dubbo+websocket+rabbitmq+vue+jsPlumb搭建的一个基于事件驱动的流式低代码编程应用程序，您可以在编辑器中采用拖拽的形式来实现业务编程工作，一键运行和停止，让开发工作变得更简单高效。...
DOM编程艺术：创建与操作节点
DOM方法和属性是JavaScript操作网页内容的基础，而本附录深入讲解了这些方法和属性的使用。 1. **创建节点** - `createElement()`方法允许我们创建新的元素节点。例如，`document.createElement('p')`会创建一个`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值