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

节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
nodeName(节点名称) 
nodeValue(节点值) 
nodeType(节点类型) 
nodeType

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

最重要的节点类型是:

元素类型

节点类型

元素(ELEMENT_NODE)

1

属性(ATTRIBUTE_NODE)

2

文本(TEXT_NODE)

3

注释(COMMENT_NODE)

8

文档(DOCUMENT_NODE)

9

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

1:元素节点
元素节点代码

  1. <HTML>
  2. <HEAD>
  3. <TITLE>空谷悠悠</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <table>
  7. <tr>
  8. <td id="john" name="myname">John</td>
  9. <td>Doe</td>
  10. <td id="jack">Jack</td>
  11. </tr>
  12. </table>
  13. <script>
  14. var d = document.getElementById("john");
  15. alert(d.nodeType)
  16. alert(d.nodeName)
  17. alert(d.nodeValue)
  18. </script>
  19. </BODY>
  20. </HTML>

分析运行结果,其三个属性的值分别为:

nodeType:ELEMENT_NODE

nodeType值:1

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

nodeValue:null

2:属性节点

属性节点代码

  1. <HTML>
  2. <HEAD>
  3. <TITLE>空谷悠悠</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <table>
  7. <tr>
  8. <td id="john" name="myname">John</td>
  9. <td>Doe</td>
  10. <td id="jack">Jack</td>
  11. </tr>
  12. </table>
  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>

分析运行结果,其三个属性的值分别为:

nodeType:ATTRIBUTE_NODE

nodeType值:2

nodeName:属性名  // name

nodeValue:属性值  //myname

3:文本节点

文本节点代码

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

分析运行结果,其三个属性的值分别为:

nodeType:TEXT_NODE

nodeType值:3

nodeName:#text

nodeValue:文本内容   // John

DOM中元素节点、属性节点、文本节点的理解的更多相关文章

  1. DOM中元素节点、属性节点、文本节点

    DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...

  2. DOM中元素节点,属性节点,文本节点的理解

    节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可 ...

  3. 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  4. [转]XML中元素(Element)与节点(Node)的区别

    前言: element是特殊的node 一段纯文本即text-node也是node 但不是element w3c的原话是 A node can be an element node, an attri ...

  5. contents() 查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容

    contents() V1.2概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容   示例 描述:大理石平台检定规程 查找所有文本节点并加粗 HTML 代码 ...

  6. windows phone xaml文件中元素及属性(10)

    原文:windows phone xaml文件中元素及属性(10) Textblock xaml文件和隐藏文件 在设计界面的时候我们可以通过xaml中进行设计,这种设计是所见即所得的,很是方便,由于x ...

  7. php的form中元素name属性相同时的取值问题

    php的form中元素name属性相同时的取值问题:修改元素的名称,在名称后面加上 '[]',然后取值时即可得array()数组. 一.以复选框为例: <html> <head> ...

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

    节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返 ...

  9. Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理

    节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...

随机推荐

  1. python操作SQL

    pymysql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同 一.下载安装 pip3 install pymysql 二.操作使用 1.执行SQL #!/usr ...

  2. SPSS数据分析—广义线性混合模型

    广义线性混合模型是目前线性模型范畴内最为完备的模型框架,它是广义线性模型的进一步延伸,进一步突破适用条件,因变量既 可以非正态,也可以非独立,由于其最为复杂,因此SPSS对其输出结果采用模型格式,而不 ...

  3. 解决VC++6.0 无法打开、无法添加工程文件

    在windows系统下,经常会遇到这样的问题:点击VC++6.0 的[文件]下的[打开]无法操作,并且无法向工程添加文件,下面详细介绍一下解决方案? 工具/原料 VC++6.0 修复工具:FileTo ...

  4. SQL Server提高并发查询效率

    同事写了个程序用创建多个线程使用ado同时对同个数据库进行相同的查询,涉及2张数据表的联查.当线程数非常多的情况下,读取数据的效率就会变得很慢,例如50个线程同时查询大概3000条数据,查询完成后通过 ...

  5. web前端图片上传(2)

    今天发现了一种ajax上传图片的方式,是以前没有用过的,首先来说下为什么要用这种方式.是因为原来后台是用的form表单的方式来提交表单数据的.但是觉得呢,这种方式不太好,因为要刷新页面,前台只用控制台 ...

  6. centos7环境搭建

    1. tar命令安装 yum install -y tar 2. jdk8下载 wget --no-check-certificate --no-cookies --header "Cook ...

  7. Java中的异常处理:何时抛出异常,何时捕获异常,何时处理异常?

    Java中的异常处理:何时抛出异常,何时捕获异常? 2017-06-07 1 异常分类 Throwable对象可以分为两组: 一组是unchecked异常,异常处理机制往往不用于这组异常,包括: Er ...

  8. C# 把字符串中间的多个连续的空格转化成一个空格

    今天在弄帮客户将txt文件中的信息导入到数据库中,遇到了这个问题.因为客户的txt文件中两个字符串之间的空格数量不确定,没有办法使用split函数来分割,最后想到的办法是,将连续的空格转成一个空格,然 ...

  9. 在eclipse的web项目里面创建jsp时第一行报错

    原因是因为项目里面没有配置tomcat,配置一下tomcat就好了

  10. Ansible配置文件

    官方配置文件文档 Ansible安装完成之后默认配置文件为:/etc/asnible/ansible.cfg Ansible配置文件内容: cat ansible.cfg # config file ...