html中节点类型

时间：2022-09-18 12:18:27

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

来看例子：

 <!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. &lbrack;原创&rsqb;java WEB学习笔记81：Hibernate学习之路--- 对象关系映射文件&lpar;&period;hbm&period;xml&rpar;：hibernate-mapping 节点，class节点，id节点&lpar;主键生成策略&rpar;，property节点，在hibernate 中 java类型 与sql类型之间的对应关系，Java 时间和日期类型的映射，Java 大对象类型 的 映射 &lpar;了解&rpar;&comma;映射组成关系

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

  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. Java——IP和InetAddress

    import java.net.InetAddress; //================================================= // File Name : Inet ...

  2. NYOJ之喷水装置（一）

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsUAAAJvCAIAAAAcLjvHAAAgAElEQVR4nO3drXLjzNaG4e8kzH0gof

  3. 修改数据库mysql字符编码为UTF8

    Mysql数据库是一个开源的数据库,应用非常广泛.以下是修改mysql数据库的字符编码的操作过程. 步骤1:查看当前的字符编码方法 mysql> show variables like'char ...

  4. 利用百度地图API&comma;在浏览器中找到自己的位置

    首先你得有个百度地图的秘钥,http://lbsyun.baidu.com/apiconsole/key 剩下的就是编码了 这里面会用到一个javascript里的一个函数,getMyLocation ...

  5. js数组&amp&semi;&amp&semi;字符串&amp&semi;&amp&semi;定时器2

    一.系统时间对象Date 方法 描述 Date() 返回当日的日期和时间. getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31). getDay() 从 Date 对象返回一周 ...

  6. 安装flash 插件scaleform出现错误：Scaleform Launch Panel&period;Launcher&period;handleDataLoaderIOError&lpar;&rpar;&colon; Loading XML Failedscaleform

    经排查发现是Scaleform Launcher.swf报的错 (C:\Users\Administrator\AppData\Local\Adobe\Flash CC\zh_CN\Configura ...

  7. centos7根分区扩容&lpar;亲测有效&rpar;

    root@haojftest:~# df -h 文件系统 容量 已用 可用 已用% 挂载点 /dev/mapper/centos_test2-root 28G 14G 15G % / devtmpfs ...

  8. 微服务之Spring cloud

    微服务 Spring cloud Spring Cloud provides tools for developers to quickly build some of the common patt ...

  9. mysql误删数据快速恢复

    相信后端研发的同学在开发过程经常会遇到产品临时修改线上数据的需求,如果手法很稳那么很庆幸可以很快完成任务,很不幸某一天突然手一抖把表里的数据修改错误或者误删了,这个时候你会发现各种问题反馈接踵而来.如 ...

  10. JavaSE——线程通信

    线程通信: 如果线程A和线程B持有同一个MyObject类的对象object,这两个线程会去调用不同的方法,但是它们是同步执行的,比如:线程B需要等待线程A执行完了methodA()方法之后,它才能执 ...

相关文章