Node类型
DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现，每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node
类型中定义的下列12个数值常量来表示，任何节点类型必居其一：

元素节点 　　Node.ELEMENT_NODE(1)

属性节点 　　Node.ATTRIBUTE_NODE(2)

文本节点 　　Node.TEXT_NODE(3)

CDATA节点 Node.CDATA_SECTION_NODE(4)

实体引用名称节点 　　 Node.ENTRY_REFERENCE_NODE(5)

实体名称节点 　　Node.ENTITY_NODE(6)

处理指令节点 　　Node.PROCESSING_INSTRUCTION_NODE(7)

注释节点 　 Node.COMMENT_NODE(8)

文档节点 　 Node.DOCUMENT_NODE(9)

文档类型节点 　　Node.DOCUMENT_TYPE_NODE(10)

文档片段节点 　　Node.DOCUMENT_FRAGMENT_NODE(11)

DTD声明节点 Node.NOTATION_NODE(12)

为了确保跨浏览器兼容，最好还是将nodeType属性与数字值进行比较

if(someNode.nodeType == 1){

    console.log('node is an element.');

    value = someNode.nodeName;

}

nodeName中保存的始终都是元素的标签名，而nodeValue的值则始终为null。在使用这两个值以前，最好是像上面这样先检测一下节点的类型

NodeList
每个节点都有一个childNodes属性，其中保存着一个NodeList对象，NodeList对象是一种类数组对象，用于保存一组有序的点，可以通过位置来访问
这些节点。NodeList对象是自动变化的

<!DOCTYPE html>

<html>

    <head>

        <title>sample page</title>

    </head>

    <body>

        <p>Hello World!</p>

    </body>

</html>    
var firstChild = $(html).childNodes[0];

var secondChild = $(html).childNodes.item(1);

var count = $(html).childNodes.length;

无论使用方括号还是使用item()方法都没有问题，length属性表示都是访问nodelist都那一刻，其中包涵的节点数量

将NodeList对象转化为数组

function converToArray (nodes) {

    var arrary = null;

    try {

        array = Array.prototype.slice.call(nodes,0); //在ie8及之前版本中无效，需要手动创建数组

    }catch (ex) {

        array = new Array();

        for (var i=0,len=nodes.length ; i<len ; i++) {

            array.push(nodes[i]);

        }

    }

    return array;

}

检测是第一个节点还是最后一个
每个节点都有一个parentNode属性，该属性指向文档树中的父节点。
包含在childNodes列表中的每个节点相互之间都是同胞节点，previousSibling(上一个同胞节点),nextSibling(下一个同胞节点)

if(someNode.nextSibling === null){

    console.log('last node'); //最后一个节点

}else if(someNode.previousSibling === null){

    console.log('first node'); //第一个节点

}

如果列表只有一个节点，那么该节点的nextSibing和previousSibling都为null.

DOM(一)：节点层次－Node类型的更多相关文章

  1. JavaScript中DOM节点层次Text类型

    文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...

  2. DOM之节点层次

    1.1 Node类型 DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现.这个Node接口在JS中是作为Node类型实现的:除了IE之外,其他浏览器可访问这个类型.JS中的所有节点 ...

  3. DOM_节点层次_Element类型

    一.Element类型: nodeType: 1; nodeName: 元素名; nodeValue: null; parentValue: Document 或者 Element; var oDiv ...

  4. DOM_节点层次_Document类型

    一.Document类型 nodeType: 9; nodeName: "#document"; nodeValue: null; parentValue: null; owner ...

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

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

  6. js文本对象模型[DOM]【续】(Node节点类型)

    一.Document类型    document实例1.常用的一些属性documentElement 始终指向HTML页面中的<html>元素.body 直接指向<body>元 ...

  7. JS基础DOM篇之二：ＤＯＭ级别与节点层次？

    通过上一篇我们大致了解了什么是DOM,今天我们继续深入了解. 1.DOM级别       在大家阅读DOM标准的时候,可能会看到DOM(0/1/2/3)级的字眼,这就是DOM级别.但实际上,DOM0级 ...

  8. 《JAVASCRIPT高级程序设计》节点层次和DOM操作技术

    DOM可以将任何HTML和XML文档描绘成一个由多层次节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息,每种类型都继承与Node接口,因此都共同享有一些属性和方法,同时,也拥有 ...

  9. 从原型链看DOM－－Node类型

    前言: 本系列从原型,原型链,属性类型等方面下手学习了DOM文档对象模型,旨在弄清我们在DOM中常用的每一个属性和方法都清楚它从哪里来要到哪里做什么事,这样对于理解代码有一定启发.全靠自己在总结中摸索 ...

随机推荐

  1. java课后思考题（四）

    1. 请运行以下示例代码StringPool.java,查看其输出结果.如何解释这样的输出结果?从中你能总结出什么? 输出结果: 结论: 在Java中,内容相同的字串常量(“Hello”)只保存一份以 ...

  2. vue-基于elementui自定义主题更换皮肤及自定义内容的皮肤跟换

    参考这篇博客https://blog.csdn.net/young_Emily/article/details/78591261做一遍,加上自己的一些理解 思路:通过自己上一篇博客https://ww ...

  3. Nginx 为什么要延迟关闭

    防止 Nginx处理完后调用close关闭连接后  ,若缓冲区任然接收到客户端发来的内容 ,则服务器会向客户端发送RST包关闭连接,导致客户端由于收到了RST而忽略了  http  response  ...

  4. JavaSE---内部类

    1.概述 1.1 内部类:一个类定义在其他类的内部,这个类被称为内部类: 1.1.1 内部类可以放在外部类的任何位置,方法中也可以(称为局部内部类): 1.1.2 一般将内部类作为 成员内部类 使用 ...

  5. jdk源码分析——java.lang.Boolean

      1.Boolean类里面的2个静态变量. Boolean类,直接声明了2个静态变量,TRUE 和 FALSE,指向2个对象.     public static final Boolean TRU ...

  6. inventor安装失败怎样卸载安装inventor 2017？

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  7. maya安装不了

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  8. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

  9. MATLAB矩阵操作和算术运算符

    矩阵的表示 矩阵之间用空格或者是逗号间隔 矩阵可以拼接(可以用矩阵拼接) 实部矩阵和虚部矩阵构成复数矩阵,一一对应. 冒号表达式: 格式: e1:e2:e3 e1表示初始值    e2表示步长   e ...

  10. mybatis连接mysql数据库实现的jdbc功能

    最近公司项目要使用myBatis,自己以前没有接触过,就在网上找到了一些资料研究了些.初步做出了基于myBatis连接mysql数据库的jdbc实现的功能. employee.java package ...