HTML dom中常用的三种节点分别是元素节点、属性节点、文本节点。

具体指的内容可参考下图：

以下为测试用例:

<!DOCTYPE html>

<html>

 <head>

  <title>元素节点、属性节点、文本节点的测试</title>

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

 <script type="text/javascript">

    window.onload = function(){

        var btnNode = document.getElementsByTagName("button");

        var fruitNode = document.getElementById("fruit");

        //元素节点 ul 为元素节点

        var ulNode = document.getElementsByTagName("ul");

        //属性节点  name="水果" 为属性节点

        var attrNode = document.getElementById("fruit").getAttributeNode("name");

        var attr2Node = document.getElementById("fruit").getAttributeNode("width");

        //文本节点  点我

        var textNode = document.getElementById("btn1").firstChild;  //注意这里获取文本节点的方式

        btnNode[0].onclick = function(){

            alert(fruitNode.getElementsByTagName("li").length);

            //以下右边注释为运行的结果

            //获取元素节点的三要素:nodeType,nodeName,nodeValue

            alert(ulNode[0].nodeType);  //1

            alert(ulNode[0].nodeName);  //UL

            alert(ulNode[0].nodeValue); //null

            //获取属性节点的三要素:nodeType,nodeName,nodeValue

            alert(attrNode.nodeType);  //2

            alert(attrNode.nodeName);  //name

            alert(attrNode.nodeValue); //水果

            alert(attr2Node.nodeType);  //2

            alert(attr2Node.nodeName);  //width

            alert(attr2Node.nodeValue); //80px;

            //获取文本节点的三要素:nodeType,nodeName,nodeValue

            alert(textNode.nodeType);  //3

            alert(textNode.nodeName);  //#TEXT

            alert(textNode.nodeValue); //点我        

        }

    }

 </script>

 </head>

 <body>

        节点分三类:

        1: 元素节点

        2：属性节点

        3：文本节点

    <ul id="fruit" name="水果" width="80px;">

        <li>苹果</li>

        <li>香蕉</li>

        <li>梨子</li>

        <li>葡萄</li>

    </ul>

    <button id="btn1">点我</button>

 </body>

</html>

HTMLDOM中三种元素节点、属性节点、文本节点的测试案例的更多相关文章

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

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

  2. Spring中三种配置Bean的方式

    Spring中三种配置Bean的方式分别是: 基于XML的配置方式 基于注解的配置方式 基于Java类的配置方式 一.基于XML的配置 这个很简单,所以如何使用就略掉. 二.基于注解的配置 Sprin ...

  3. iOS开发UI篇—iOS开发中三种简单的动画设置

    iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...

  4. C#中三种定时器对象的比较

    ·关于C#中timer类 在C#里关于定时器类就有3个1.定义在System.Windows.Forms里2.定义在System.Threading.Timer类里3.定义在System.Timers ...

  5. 转-Web Service中三种发送接受协议SOAP、http get、http post

    原文链接:web服务中三种发送接受协议SOAP/HTTP GET/HTTP POST 一.web服务中三种发送接受协议SOAP/HTTP GET/HTTP POST 在web服务中,有三种可供选择的发 ...

  6. C#中三种定时器对象的比较 【转】

    https://www.cnblogs.com/zxtceq/p/5667281.html C#中三种定时器对象的比较 ·关于C#中timer类 在C#里关于定时器类就有3个1.定义在System.W ...

  7. 详解Oracle数据货场中三种优化：分区、维度和物化视图

    转 xiewmang 新浪博客 本文主要介绍了Oracle数据货场中的三种优化:对分区的优化.维度优化和物化视图的优化,并给出了详细的优化代码,希望对您有所帮助. 我们在做数据库的项目时,对数据货场的 ...

  8. xhtml三种元素类型

    xhtml三种元素类型:块级元素/内联元素/可变元素 块级元素:独占一行.可自定义自己的宽度和高度.作为其他元素的容器,可容纳其他内联元素和块级元素,喻做一个盒子.内联元素:始终以行内逐个显示.不能设 ...

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

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

随机推荐

  1. Servlet —— 避免Servlet的并发同步问题

    Servlet的生命周期是由Servlet容器来负责的. Servlet容器通常采用单实例多线程的方式,减少Servlet创建实例的开销,提高效率. 当客户端第一次请求某个Servlet时,Servl ...

  2. select 1 from dual 中的1表示的含义

    select 1 from dual   在这条sql语句中的1代表什么意思?查出来是个什么结果?   其实: select 1 from table; select anycol(目的表集合中的任意 ...

  3. Java垃圾收集学习笔记

    (1)除了释放不再被引用的对象,垃圾收集器还要处理 堆碎块 .请求分配新对象时可能不得不增大堆空间的大小,虽然可以使用的空闲空间是足够的,但是堆中没有没有连续的空间放得下新对象.可能会导致虚拟机产生不 ...

  4. 通过rsync搭建一个远程备份系统（二）

    Rsync+inotify实时备份数据 rsync在同步数据的时候,需要扫描所有文件后进行对比,然后进行差量传输,如果文件达到了百万或者千万级别以上是,扫描文件的时间也很长,而如果只有少量的文件变更了 ...

  5. Python 培训之正则表达式

    re 模块 re.math 从头匹配 re.search 结构: re.math(r'^c',a)   不符合返回None 原字符: . 任意字符 [ ] 或者 [A-Z,a-z,b] \d 数字 \ ...

  6. ionic的scroll的使用出现的问题

    今天再写ionic的时候发现了一个问题,在使用ui-view的时候引用ion-scroll指令的时候初次加载的时候能能实现拖拽滚动,只能实现滚动鼠标滚轴滚动,然后各种调试,各种比较,终于发现原来是路由 ...

  7. Linux 中，如何显示 （gcc）make时实际执行命令

    问题: 调试编译问题,如何获取,GCC(或许make)时,实际编译器和链接器正在执行的命令? 解决方法: 方法一:通用方法 使用dry run,如下 $ make -n 这将显示make 命令正在试图 ...

  8. SQL查询效率：100w数据查询只需要1秒钟

    G os: windows 数据库: ms sql server 目的: 查询性能测试,比较两种查询的性能 SQL查询效率 step by step -- setp . -- 建表 create ta ...

  9. IBatis一对多嵌套查询

    1)类 public class AppData { // public int ModuleId { get; set; } public int DataId { get; set; } publ ...

  10. php-fpm服务挂掉

    今天发了个链接,可能同时在线的人瞬间比较多,结果网站报503错误,回去打开php-fpm错误日志一看,php-fpm服务挂掉了,报如下错误: [04-Apr-2016 15:38:04] NOTICE ...