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

来看例子：

 <!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. node koa2 玩起来都是中间件啊

    玩的我想吐 !!! 整理下常用的中间件吧! 先列在这有空把这些中间件的使用技巧也写出来分享一下koa-router 路由中间件koa-bodyparser   POST数据处理的中间件koa-stri ...

  2. js-day06-jQuery事件和DOM操作-练习题

    jQuery事件绑定 js中绑定事件,三种方式: 方式1: 直接在元素上,增加onXxx事件属性. <button onclick="alert(1);">点我< ...

  3. CMS使用对应版本当作新项目。

    document.form1 整体替换document.forms[0] document.Templetslist 整体替换document.forms[0] document.f_Upload整体 ...

  4. Java作业 十一（2017-11-13）

    /*关键字*/ package com.baidu.www; abstract class A { private String name; public A(String name) { this. ...

  5. springboot 实战之一站式开发体验

    都说springboot是新形势的主流框架工具,然而我的工作中并没有真正用到springboot: 都说springboot里面并没有什么新技术,不过是组合了现有的组件而已,但是自己却说不出来: 都说 ...

  6. Python - Python2与Python3的区别、转换与兼容

    区别 Python2.x与Python3.x版本区别:http://www.runoob.com/python/python-2x-3x.html 示例解读Python2和Python3之间的主要差异 ...

  7. 机器学习入门15 - 训练神经网络 (Training Neural Networks)

    原文链接:https://developers.google.com/machine-learning/crash-course/training-neural-networks/ 反向传播算法是最常 ...

  8. TCP的三次握手与四次挥手（个人总结）

    序列号seq:占4个字节,用来标记数据段的顺序,TCP把连接中发送的所有数据字节都编上一个序号,第一个字节的编号由本地随机产生:给字节编上序号后,就给每一个报文段指派一个序号:序列号seq就是这个报文 ...

  9. 容器云架构中使用gorouter+haproxy作为流量入口

    ​ 小贴士 Gorouter 项目地址:https://github.com/cloudfoundry/gorouter/Gorouter来源于CloudFoundry.是一个高性能.轻量级的路由器及 ...

  10. ThinkPHP Redis实现模拟队列

    1.入队操作: //入队 public function enqueue() { $redis = new \Redis(); $redis->connect('127.0.0.1',6379) ...