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. Codeforces Round #380 (Div. 1, Rated, Based on Technocup 2017 - Elimination Round 2)

    http://codeforces.com/contest/737 A: 题目大意: 有n辆车,每辆车有一个价钱ci和油箱容量vi.在x轴上,起点为0,终点为s,中途有k个加油站,坐标分别是pi,到每 ...

  2. PhoneGap初试!

    最近公司准备开发一个移动应用,方便起见准备开发web项目,用PhoneGap打包成iOS与Android平台的应用.对PhoneGap完全不了解,所以先装个试下.折腾了大半天,总算弄出点儿眉目,整理下 ...

  3. iOS程序 防止动态调试和代码注入

    http://ruixiazun.blog.163.com/blog/static/9068791820141173588694/ iPhone真实的运行环境是没有sys/ptrace.h抛出.ptr ...

  4. 浅谈HTTP中Get与Post的区别(转)

    Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...

  5. as follows ,as follow && following

    在现在牛津英语上,as follow 和 as follows 用法差不多的,但后者更常用,不是说谁指一个谁指好几个.牵强附会! 为了保证正确性,你应该用as follows,单数的最好少用.意义差不 ...

  6. 修改(table的section与上一个section的间距)section header背景颜色

    - (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { UIView * ...

  7. 'java'不是内部或外部命令,另一个解决办法

    我知道环境变量,也知道搞系统变量.别给我粘那些教程了,我的java路程是C:\Program Files\Java\jdk1.6.0_05谁弄好了把那三个变量和值发出来.... JAVA_HOME=C ...

  8. ad bga扇出 和群组布线

    本文关于如何快速规范的bga布线和扇出做笔记 目的:layout一个ili的3+1的控制板.把线距控制在4mil 这样可以节约制造成本. 问题:需要大改布局.尤其是bga扇出和通道连接的问题. 细节: ...

  9. oracle数据类型

    本文转自:http://blog.csdn.net/defonds/article/details/4302695 谢谢原文作者 有道是,磨刀不误砍柴工.多了解一些底层的东西,对于Oracle开发.维 ...

  10. Android性能测试工具APT使用指南

    腾讯的安卓平台高效的性能测试工具APT(Android Performance Testing Tools),适用于开发自测和定位性能瓶颈,帮助测试人员完成性能基准测试.竞品测试. APT提供了CPU ...