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

来看例子：

 <!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. js-day02-BOM和DOM

    BOM和Document对象常见属性和方法: BOM是browser object model的缩写,简称浏览器对象模型. Document 对象每个载入浏览器的 HTML 文档都会成为 Docume ...

  2. FBOSS: Building Switch Software at Scale

    BOSS: 大规模环境下交换机软件构建 本文为SIGCOMM 2018 论文,由Facebook提供. 本文翻译了论文的关键内容. 摘要: 在网络设备(例如交换机和路由器)上运行的传统软件,通常是由供 ...

  3. Java高并发缓存架构，缓存雪崩、缓存穿透之谜

    面试题 了解什么是 redis 的雪崩.穿透和击穿?redis 崩溃之后会怎么样?系统该如何应对这种情况?如何处理 redis 的穿透? 面试官心理分析 其实这是问到缓存必问的,因为缓存雪崩和穿透,是 ...

  4. [Swift]LeetCode714. 买卖股票的最佳时机含手续费 | Best Time to Buy and Sell Stock with Transaction Fee

    Your are given an array of integers prices, for which the i-th element is the price of a given stock ...

  5. 配置vscode同步大神玺哥的配置

    1.应用商店下载settings  sync 2.三键 ctrl + shift + p   对话框中输入sync:点击重置 3.ctrl + shift + p  点击下载 4.然后会自动的调整到g ...

  6. Docker 搭建pxc集群 + haproxy + keepalived 高可用（一）

    一.首先需要安装好docker,安装方法可以参考之前一篇博文Centos7安装docker [root@localhost ~]# systemctl start docker [root@local ...

  7. win10安装ubuntu16.04及后续配置

    原文地址:https://www.jianshu.com/p/842e36a8255c UEFI 模式下win10安装ubuntu16.04双系统教程 - baobei0112的专栏 - CSDN博客 ...

  8. java中过多if-else分支语句的优化方案

    利用Map优化过的的if-else分支 package com.taiping.test; import java.util.HashMap;import java.util.Map; public ...

  9. python判断两个文件是否相同

    此方法相当于 Linux 系统下的diff,或者是 git 下的 checkout 官方解释请看: https://docs.python.org/2/library/difflib.html #!/ ...

  10. HBase篇--HBase常用优化

    一.前述 HBase优化能够让我们对调优有一定的理解,当然企业并不是所有的优化全都用,优化还要根据业务具体实施. 二.具体优化 1.表的设计  1.1 预分区 默认情况下,在创建HBase表的时候会自 ...