DOM节点信息包括节点类型(nodeType)、节点名称(nodeName)和节点值(nodeValue)。

节点类型

DOM节点中,每个节点都拥有不同的类型。

W3C规范中常用的 DOM节点类型有以下几种:

节点类型 说明
元素节点 每一个HTML标签都是一个元素节点,如 <div> 、 <p>、<ul>等 1
属性节点 元素节点(HTML标签)的属性,如 id 、class 、name 等。 2
文本节点 元素节点或属性节点中的文本内容。 3
注释节点 表示文档注释,形式为<!-- comment text -->。 8
文档节点 表示整个文档(DOM 树的根节点,即 document ) 9

获取节点类型的语法:
    nodeObject.nodeType
其中,nodeObject 为DOM节点(节点对象)。该属性返回以数字表示的节点类型,例如,元素节点返回 1,属性节点返回 2 。

例如,获取id="demo"的<div>标签的节点类型:

  1. document.getElementById("demo").nodeType;

该语句的返回值为 1 。

举例,获取元素节点和文本节点的类型值:

  1. <div id="demo1">点击这里显示节点类型</div>
  2. <script type="text/javascript">
  3. document.getElementById("demo1").onclick=function(){
  4. var divType=this.nodeType;
  5. var textType=this.firstChild.nodeType;  //  this 指当前发生事件的HTML元素,这里是<div>标签
  6. alert(
  7. "<div>标签的节点类型是:"+divType+"\n"+
  8. "<div>标签内部文本的节点类型是:"+textType
  9. );
  10. }
  11. </script>

节点名称

节点名称就是DOM节点的名字,不同类型的节点对应不同的节点名称。

节点类型 节点名称
元素节点 HTML标签的名称(大写)
属性节点 属性的名称
文本节点 它的值永远是#text
文档节点 它的值永远是#document

获取节点名称的语法:
    nodeObject.nodeName
其中,nodeObject 为DOM节点(节点对象)。

例如,获取id="demo"的<div>标签的节点名称:

  1. document.getElementById("demo").nodeName;

该语句的返回值为 DIV 。

举例,获取元素节点名称、文本节点名称和文档节点名称:

  1. <div id="demo2">点击这里显示节点名称</div>
  2. <script type="text/javascript">
  3. document.getElementById("demo2").onclick=function(){
  4. var divName=this.nodeName;
  5. var textName=this.firstChild.nodeName;  //  this 指当前发生事件的HTML元素,这里是<div>标签
  6. var documentName=document.nodeName
  7. alert(
  8. "<div>标签的节点名称是:"+divName+"\n"+
  9. "<div>标签内部文本的节点名称是:"+textName+"\n"+
  10. "文档节点的节点名称是:"+documentName
  11. );
  12. }
  13. </script>

节点值

对于文本节点,节点值为文本内容;对于属性节点,节点值为属性的值。

节点值对于文档节点和元素节点是不可用的。

获取节点值的语法:
    nodeObject.nodeValue
其中,nodeObject 为DOM节点(节点对象)。

举例,获取文本节点的节点值:

  1. <div id="demo3">点击这里显示文本节点的值</div>
  2. <script type="text/javascript">
  3. document.getElementById("demo3").onclick=function(){
  4. alert(this.firstChild.nodeValue);  //  this 指当前发生事件的HTML元素,这里是<div>标签
  5. }
  6. </script>

 
来自:http://www.itxueyuan.org/view/6346.html

【转】JavaScript获取节点类型、节点名称和节点值的更多相关文章

  1. javaScript获取文档中所有元素节点的个数

    HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. JavaScript获取浏览器类型与版本

    从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: <script type="text/javascript"> var S ...

  3. JavaScript学习总结(十八)——JavaScript获取浏览器类型与版本

    从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: 1 <script type="text/javascript"> 2 v ...

  4. javascript获取childNodes详情,删除空节点

    chidNodes返回的是node的集合, 每个node都包含有nodeType属性. nodeType取值: 元素节点:1 属性节点:2 文本节点:3 注释节点:8     页面上是由无数个节点组成 ...

  5. javascript 获取dom书的下一个节点。

    利用javascript 写一个在页面点击加减按钮实现数字的累加.. 简略的html大概如此.看得懂就好不要在意这些细节啊 <input type="button" valu ...

  6. 深入理解DOM节点类型第二篇——文本节点Text

    × 目录 [1]特征 [2]空白 [3]属性[4]方法[5]性能 前面的话 文本节点顾名思义指向文本的节点,网页上看到的文字内容都属于文本节点.该节点简单直观,本文将详细介绍该部分内容 特征 文本节点 ...

  7. xpath的数据和节点类型以及XPath中节点匹配的基本方法

    XPath数据类型  XPath可分为四种数据类型:  节点集(node-set)  节点集是通过路径匹配返回的符合条件的一组节点的集合.其它类型的数据不能转换为节点集.  布尔值(boolean)  ...

  8. JavaScript获取table中某一列的值的方法

    1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  9. JavaScript获取onclick、onchange等事件的值

    今天小菜处理下拉菜单级联问题时,想获取HTML标签中某个事件的内容,也就是值,比如从<select id="city" onchange="javascript:t ...

  10. javascript获取asp.net服务器端控件的值

    代码如下: <%@ Page Language="C#" CodeFile="A.aspx.cs" Inherits="OrderManage_ ...

随机推荐

  1. 开启Win7系统管理员Administrator账户

    Win7系统凭借酷炫的界面以及简单.易用.快速.安全等特点,迅速成为全球最受用户喜爱的操作系统,如今Win7已经成为身边很多朋友生活学习工作的好伙伴.在我们使用Win7的时候,有一些软件的正常运行需要 ...

  2. 【66测试20161115】【树】【DP_LIS】【SPFA】【同余最短路】【递推】【矩阵快速幂】

    还有3天,今天考试又崩了.状态还没有调整过来... 第一题:小L的二叉树 勤奋又善于思考的小L接触了信息学竞赛,开始的学习十分顺利.但是,小L对数据结构的掌握实在十分渣渣.所以,小L当时卡在了二叉树. ...

  3. 也谈自动化平台的搭建,另附高大上的名字---无人值守定时巡检系统(selenium+testng+ant+jenkins)

    最近公司新项目改版,由于没有运维,开发则负责上线任务,并且都是手动上线,并行的项目多了,分支混乱,经常导致B项目上线覆盖A项目,导致系统不定时出现异常,老板知道了便扣了大家的绩效,作为测试这边必须想个 ...

  4. JAVA内存管理

    java与c++之间有一堵由内存动态分配和垃圾收集技术所围成的高墙.墙外面的人想进去,墙里面的人想出去. 1.java内存分布 程序计数器 栈(局部变量.操作数.动态链接.方法出口) 每一个方法从调用 ...

  5. Git ——分布式版本控制系统

    Git ——分布式版本控制系统 本人git主页地址:https://github.com/lendoon/test.git git使用心得:初次接触git在课堂上,老师给我们提供了一个代码托管的场所, ...

  6. mybatis的mapper中,实体非空检验问题

    因为项目变动,数据库需要删除一个字段,于是勤劳的我把项目中对应的实体属性也给弄掉了,可是没有弄彻底,mybatis里面的mapper没有管,当时感觉是选择性的插入: <if test=" ...

  7. 如何使用.NET开发全版本支持的Outlook插件产品(二)——完善插件

    插件项目所有代码都已经上传至 https://github.com/VanPan/TestOutlookAdding 勿在浮砂筑高台--定位错误 在介绍后面的插件开发技术之前,让我们先来看看已经达到的 ...

  8. [网络技术][转]路由表查找过程(ip_route_input_slow)

     若干解释: 判断in_dev是否存在,是通过mac地址吗? 源IP地址如果是multicast,broadcast,loopback地址,意味着数据报不知道从哪来的,只能把数据报废掉了. 目标IP地 ...

  9. kendo-ui学习笔记(一)

    1.top.jsp: <script src="<%=path%>/kendoui/js/jquery.min.js"></script> &l ...

  10. 阿伦学习html5 之 Local Storage (本地储存)

    一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedObject.Google Gears.Cookie.DOM Storage.User Data.window.name.S ...