常用的节点有元素节点、属性节点、文本节点、注释节点、文档节点

来看例子：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

         "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

     <meta charset="UTF-8">

     <title>节点</title>

     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>

     <script type="text/javascript">

       $(function(){

         //元素节点

         var li = $('li').first()[0];//document.getElementById('firstLi')

         console.info(li.nodeType);

         console.info(li.nodeName);

         console.info(li.nodeValue);

        //属性节点

        var idAttr = li.getAttributeNode('id');//li.attributes[0]

        console.info(idAttr.nodeType);

        console.info(idAttr.nodeName);

        console.info(idAttr.nodeValue) 

        //文本节点

        var textNode = li.firstChild;//li.childNodes[0]

        console.info(textNode.nodeType);

        console.info(textNode.nodeName);

        console.info(textNode.nodeValue);  

        /**

        childNodes:既有文本节点、也有元素节点

        children  :没有文本节点、但有元素节点

        */

        //注释节点

        var comment = document.getElementsByTagName('body')[0].firstChild

        console.info(comment.nodeType);

        console.info(comment.nodeName);

        console.info(comment.nodeValue);

        //文档节点

        console.info(document.nodeType);

        console.info(document.nodeName);

        console.info(document.nodeValue);              

       });

 /*

 5种节点：

 {

             元素节点   属性节点     文本节点            注释节点    文档节点

 nodeType：  1          2           3                  8          9

 nodeName：  标签名     属性名称     #text              #comment   #document

 nodeValue： null       属性value   标签中间夹的文本值   注释内容    null

 }

 */

     </script>

 </head>

 <body><!--测试注释~~~-->

   <ul>

    <li id='firstLi'>文本1<span>测试span</span></li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

   </ul>

 </body>

 </html>

html中节点类型的更多相关文章

  1. javascript之DOM（一节点类型Node）

    DOM(Document Object Model)是针对HTML和XML文档的一个API.DOM描述的是一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.起源于DHML,现为W3C的推 ...

  2. [原创]java WEB学习笔记81：Hibernate学习之路--- 对象关系映射文件(.hbm.xml)：hibernate-mapping 节点，class节点，id节点(主键生成策略)，property节点，在hibernate 中 java类型 与sql类型之间的对应关系，Java 时间和日期类型的映射，Java 大对象类型 的 映射 (了解),映射组成关系

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

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

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

  4. javascript DOM中的节点层次和节点类型概述

    针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的 ...

  5. Fabric中的节点类型

    在Fabric中,尽管所有对等节点/peer都是相同的,但它们可以根据网络的配置方式承担多个角色:(①②是主要的节点类型) ①提交节点: 通道中的每个对等节点都是一个提交节点.它们接收生成的交易区块, ...

  6. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

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

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

  8. 深入理解DOM节点类型第六篇——特性节点Attribute

    × 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的 ...

  9. 深入理解DOM节点类型第七篇——文档节点DOCUMENT

    × 目录 [1]特征 [2]快捷访问 [3]文档写入 前面的话 文档节点document,隶属于表示浏览器的window对象,它表示网页页面,又被称为根节点.本文将详细介绍文档节点document的内 ...

随机推荐

  1. Python练手例子（15）

    85.输入一个奇数,然后判断最少几个 9 除于该数的结果为整数. 程序分析:999999 / 13 = 76923. #!/usr/bin/python #coding=utf-8 if __name ...

  2. muse-ui底部导航自定义图标和字体颜色

    最近在鼓捣用vue.js进行混合APP开发,遍寻许久终于找到muse-ui这款支持vue的轻量级UI框架,竟还支持按需引入,甚合萝卜意! 底部导航的点击波纹特效也是让我无比惊喜,然而自定义图标和字体颜 ...

  3. 熟悉HBase基本操作

    1. ssh localhost start-dfs.sh start-hbase.sh hbase shell create 'Student', 'S_No', 'S_Name', 'S_Sex' ...

  4. FFmpeg开发实战（四）：FFmpeg 抽取音视频的音频数据

    如何使用FFmpeg抽取音视频的音频数据,代码如下: void adts_header(char *szAdtsHeader, int dataLen); // 使用FFmpeg从视频中抽取音频 vo ...

  5. [Swift]LeetCode2. 两数相加 | Add Two Numbers

    You are given two non-empty linked lists representing two non-negative integers. The digits are stor ...

  6. [Swift]LeetCode944. 删除列以使之有序 | Delete Columns to Make Sorted

    We are given an array A of N lowercase letter strings, all of the same length. Now, we may choose an ...

  7. 【Spark篇】---Spark中资源和任务调度源码分析与资源配置参数应用

    一.前述 Spark中资源调度是一个非常核心的模块,尤其对于我们提交参数来说,需要具体到某些配置,所以提交配置的参数于源码一一对应,掌握此节对于Spark在任务执行过程中的资源分配会更上一层楼.由于源 ...

  8. vue + hbuilder 开发备忘录

    踩过的坑: axios 安卓低版本兼容性处理 阻止表单中,button默认事件,出现刷新问题. 设置滚动条的位置 vue 数据和对象数据变化 dom结构不变 android低版本 白屏问题 你是不是用 ...

  9. 【Docker】(4）搭建私有镜像仓库

    [Docker](4)搭建私有镜像仓库 说明 1. 这里是通过阿里云,搭建Docker私有镜像仓库. 2. 这里打包的镜像是从官网拉下来的,并不是自己项目创建的新镜像,主要测试功能 一.搭建过程 首先 ...

  10. Jquery.tmpl

     它是一个基于jquery的模板展示插件,有了它就可以去展示JSON数据渲染到HTML页中!一.使用方法引入Jquery引入 tmpl<script src="../Scripts/j ...