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. springMVC从前端接受boolean类型的属性失败的问题

    springMVC从前端接收到的实体又一个boolean类型的属性,发现不管前端怎么操作,后台接收到的值都是false. 问题出现原因: eclipse在给实体属性生成getter和setter的时候 ...

  2. yii2下的路由重写

    1.在config/main.php中添加配置信息 文件位置如图所示(图中展示的是backend下的config,也可以在fronted和common的config中添加) 配置的代码标准格式如下 ' ...

  3. my___sublime Text配置

    sublime text 备份 插件下载 http://www.cnblogs.com/457220157-FTD/p/5546545.html https://www.jianshu.com/p/3 ...

  4. jquery.getParams.js

    本文参照:http://www.cnblogs.com/cocos/archive/2010/05/14/1735046.html jQuery.extend({ /** * Returns get ...

  5. pat1088. Rational Arithmetic (20)

    1088. Rational Arithmetic (20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue F ...

  6. Hadoop学习笔记(3) Hadoop文件系统一

    1. 分布式文件系统,即为管理网络中跨多台计算机存储的文件系统.HDFS以流式数据访问模式来存储超大文件,运行于商用硬件集群上.HDFS的构建思路为:一次写入.多次读取是最高效的访问模式.数据集通常由 ...

  7. 网页设计，Access入门 2010，数学

    网页设计(表格) 创建表格:插入---表格---设置表格大小---确定.(按Ctrl键可多选单元格) 插入图片在表格:光标在单元格---插入---图像---选择图像---确定. 表格属性:属性(屏幕下 ...

  8. Ubuntu 网速显示，ssh配置

    安装: sudo apt-get install python3-psutil curl git gir1.2-appindicator3-0.1git clone https://github.co ...

  9. Python数据类型及常用操作

    Python字符串类型 1.用途: 用来记录有描述性的状态.比如:人名,地址等. 2.定义方式: 创建字符串非常简单,在‘ ’,“ ”,‘’‘ ’‘’内一填写一系列的字符例如:msg='hello' ...

  10. android 扇形菜单

    引言: android中的菜单与windows的菜单没有什么区别,基本就是一个矩形框,如下: 这个菜单有多么能经得住历史的考验我就不多说了!我们再来看看最新有关手机可操作区域的调查 有此可以看出屏幕越 ...