DOM中元素节点、属性节点、文本节点的理解

最新推荐文章于 2022-06-10 09:30:10 发布
最新推荐文章于 2022-06-10 09:30:10 发布
阅读量2.3k 收藏 3
点赞数 2

节点信息

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

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

nodeType

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

最重要的节点类型是：

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

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

1：元素节点

元素节点代码   
  1.  <HEAD>   
  2.   <TITLE>空谷悠悠</TITLE>   
  3.  </HEAD>   
  4.  <BODY>   
  5.   <table>   
  6.     <tr>   
  7.         <td id="john" name="myname">John</td>   
  8.         <td>Doe</td>   
  9.         <td id="jack">Jack</td>   
  10.     </tr>   
  11.   </table>   
  12.   <script>   
  13.  var d = document.getElementById("john");      
  14.     alert(d.nodeType)   
  15.     alert(d.nodeName)   
  16.     alert(d.nodeValue)     
  17.   </script>   
  18.  </BODY>   
  19. </HTML>  
 <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：属性节点

属性节点代码   
  1.  <HEAD>   
  2.   <TITLE>空谷悠悠</TITLE>   
  3.  </HEAD>   
  4.  <BODY>   
  5.   <table>   
  6.     <tr>   
  7.         <td id="john" name="myname">John</td>   
  8.         <td>Doe</td>   
  9.         <td id="jack">Jack</td>   
  10.     </tr>   
  11.   </table>   
  12.   
  13.   <script>   
  14.  var d = document.getElementById("john").getAttributeNode("name");     
  15.     alert(d.nodeType)   
  16.     alert(d.nodeName)   
  17.     alert(d.nodeValue)     
  18.   </script>   
  19.  </BODY>   
  20. </HTML>  
 <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:文本节点

文本节点代码   
  1.  <HEAD>   
  2.   <TITLE> New Document </TITLE>   
  3.  </HEAD>   
  4.  <BODY>   
  5.   <table>   
  6.     <tr>   
  7.         <td id="john" name="myname">John</td>   
  8.         <td>Doe</td>   
  9.         <td id="jack">Jack</td>   
  10.     </tr>   
  11.   </table>   
  12.   <script>   
  13.     var d = document.getElementsByTagName("td")[0].firstChild      
  14.     alert(d.nodeType)   
  15.     alert(d.nodeName)   
  16.     alert(d.nodeValue)     
  17.   </script>   
  18.  </BODY>   
  19. </HTML>  
 <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

分类:  JavaScript
乔志勇笔记
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
v-model --双向数据绑定
qq_45802159的博客
01-03 3188
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
JS中节点操作
最新发布
libingjiedd的博客
03-17 1090
网页中的所有内容都是节点(标签,属性,文本,注释等),HTML DOM树中的所有节点都可通过JavaScript进行访问,所有html元素(节点)都可以被修改,也可以创建或删除。
DOM 中的文档节点，元素节点，属性节点，文本节点，注释节点
苦艾文艺
10-22 2539
这些节点名称在此为了更好的做出解释，在此我引用了w3school上的一段话，并加以实例说明：根据 W3C 的 HTML DOM 标准，HTML 文档（html页面）中的所有内容都是节点： 1:整个HTML文档是一个文档节点 2:每个 HTML 元素是元素节点 3:HTML 元素内的文本是文本节点 4:每个 HTML 属性是属性节点 5:页面注释是注释节点 HTML DOM
js知识点4
dengfengling999的博客
02-04 389
-3宿主对象：游浏览器运行环境提供的对象 DOM BOM DOM:Document Object Model 文档对象模型 JS通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作web页面 网页中有各种标签，就通过DOM来操作 文档：整个html网页 对象：将网页中的每一个部分都转换为一个对象 以对象的方式操作属性方法 模型：使用模型表示对象之间的关系，这样方便我们获取对象 节点Node是构成我们网页最基本的元素的组成部分，网页中的每一个部分都可以称为一个节点，..
【JavaScript 教程】DOM——Text 节点和 DocumentFragment 节点
油墨香^-^的博客
06-10 586
1、Text 节点的概念 文本节点（Text）代表元素节点（Element）和属性节点（Attribute）的文本内容。如果一个节点只包含一段文本，那么它就有一个文本子节点，代表该节点的文本内容。 通常我们使用父节点的firstChild、nextSibling等属性获取文本节点，或者使用Document节点的createTextNode方法创造一个文本节点。 // 获取文本节点 var textNode = document.querySelector('p').firstChild; // 创
jacascript DOM节点——元素节点、属性节点、文本节点
08-30
它将文档结构转换为一个树形结构，使得我们可以通过JavaScript...理解元素节点、属性节点和文本节点的概念及其操作方法是JavaScript Web开发的基础。熟练掌握这些知识，可以帮助开发者更有效地实现页面交互和动态更新。
DOM下的节点属性和操作小结
12-11
元素节点返回null，属性节点返回属性值，文本节点返回文本。nodeValue可读可写，这是对元素节点不能写。一般只用于设置文本节点的值。 4 .childNodes 返回子节点数组。文本和属性节点的childNodes永远是null。可以用...
JavaScript HTML DOM元素 节点操作汇总
10-16
节点分为多种类型，如元素节点、属性节点、文本节点等。节点具有关键属性，如`nodeName`（节点名称）、`nodeValue`（节点值）和`nodeType`（节点类型）。例如，元素节点的`nodeType`通常为1，文本节点为3，注释节点...
浅析~DOM结构中的元素节点、属性节点、文本节点
风一样的少年
08-28 1万+
首先明确什么是DOM： DOM=DocumentObjectModel，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构 DOM是表示和处理一个HTML或XML文档的常用方法 DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围...
元素节点 属性节点 文本节点 文档节点
hello
02-08 2844
（1）元素节点：一般是拥有一对开闭合标签的元素整体，例如上图中的&lt;ul&gt;...&lt;/ul&gt;这一部分都属于一个元素节点。 （2）属性节点：一般是元素节点的属性，比如上图中的“宽度”属性 也就是width="80 px"这一部分。 （3）文本节点：DOM中用于呈现文本的部分，如上图中的 “点我” 儿子，一般被包含在元素节点的开闭合标签内部。 ...
元素节点、属性节点、文本节点 的节点属性
xyjikl
07-16 2656
1 .nodeName 元素节点        元素标记名/节点名称， 相当于tagName .属性节点       属性节点返回属性名， 文本节点          文本节点返回#text。nodeName，是只读的。 2 .nodeType 1，元素节点； 2，属性节点； 3，文本节点。nodeType是只读的。 3 .nodeValue     返回一个字
一张图看懂js中元素、属性和文本节点的关系
庄AC的博客
09-07 5960
文本节点和元素节点为父子关系，但是属性节点和元素节点是兄弟关系吗？如果是兄弟关系， 那么通过“元素对象.属性名”的方式访问属性怎么解释？究竟元素节点和属性节点什么关系呢？ 元素节点和文本节点之间存在父子关系，元素节点和属性节点之间不存在父子关系
javascript文本节点操作方法你知道吗？
CodingNoob
06-25 2764
Text类型文本节点由Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的 HTML 字符，但不能包含HTML 代码。Text 节点具有以下特征：  nodeType 的值为3；  nodeName 的值为”#text”；  nodeValue 的值为节点所包含的文本；  parentNode 是一个Element； 不支持（没有）子节点。 可以通过
DOM创建元素、属性、文本节点
lost_wen的博客
02-13 1828
var form = document.createElement('table'); //创建元素节点 var att=document.createAttribute("id"); //创建属性节点 att.value="prop"; form.setAttributeNode(att); var td1 = document.createElement('td'); v
DOM 中文档节点，文本节点之间的关系
苦艾文艺
07-21 5019
在《javascript高级程序设计》一书中的第十章开篇讲到节点层次。在此我把它的例子拿过来讲一下（按照书中的原文）<html> <head> <title>Sample Page</title> </head> <body> <p>Hello World!</p> </body> </html>文档节点书中有这样一段原话：文档节点是每
JavaScript DOM 如何区分元素节点、属性节点和文本节点？
cho_jun的博客
05-30 2653
一张图区分JavaScript DOM中的元素节点、属性节点和文本节点
了解 WPF 中的路由事件和命令
wmjcom的专栏
05-22 9456
一、学习WPF路由事件   先来了解下什么是WPF里的路由事件我们创建一个WPF应用程序，代码如下：    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    Title="Wi
dom(一)——获取文本内容的方法
热门推荐
AlexDQ的博客
03-22 2万+
在利用DOM获取节点之后 有多种方法可以获取节点中的文本内容   1. innerHTML innerHTML可以作为获取文本的方法也可以作为修改文本内容的方法 element.innerHTML 会直接返回element节点下所有的HTML化的文本内容         文本         文本          document.body.innerH
在DOM中所有节点都是元素
06-12
在DOM中，节点被分为几种类型，其中最常见的是元素节点（Element Node）、文本节点（Text Node）和属性节点（Attribute Node）。 元素节点是指HTML中的标签，例如`<div>`、`<p>`等。它们是DOM树的主要分支，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值