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级别与节点层次?

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

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

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

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

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

随机推荐

  1. Hadoop 2.0 安装配置

    1. install jdk 2. install hadoop. 安装包hadoop-2.2.0.tar.gz存放在一个目录.并解压. 3. 修改配置文件,一般配置文件在/etc/hadoop下面. ...

  2. javascript里label语句的简单示例

    在javascript中,我们可能很少会去用到 Label 语句,但是熟练的应用 Label 语句,尤其是在嵌套循环中熟练应用 break, continue 与 Label 可以精确的返回到你想要的 ...

  3. android Binder机制(一)架构设计

    Binder 架构设计 Binder 被设计出来是解决 Android IPC(进程间通信) 问题的.Binder 将两个进程间交互的理解为 Client 向 Server 进行通信. 如下:bind ...

  4. python 选取Serise、DataFrame列的子集方法

  5. How to Fold a Julia Fractal

    How to Fold a Julia FractalA tale of numbers that like to turn http://acko.net/blog/how-to-fold-a-ju ...

  6. Host 'XXX' is not allowed to connect to this MySQL server解决方案

    如何允许远程连接mysql数据库呢,操作如下: 首先登录账号 mysql -uroot -p 使用mysql用户 use mysql 如果报此类错:ERROR 1820 (HY000): You mu ...

  7. 转:99%的人都理解错了HTTP中GET与POST的区别

    原贴来自:http://www.techweb.com.cn/network/system/2016-10-11/2407736.shtml GET和POST是HTTP请求的两种基本方法,要说它们的区 ...

  8. 修改mysql表的字符集

    ALTER TABLE logtest CONVERT TO CHARACTER SET utf8 COLLATE utf8_general_ci; 修改数据库字符集: 代码如下: ALTER DAT ...

  9. Aspose.Words导出图片 表格 Interop.Word

    先定义一个WORD 模板, 然后替换文本.域 ,定位开始表格 文本和段落 // Specify font formatting Aspose.Words.Font font = builder.Fon ...

  10. java.lang.ArrayIndexOutOfBoundsException: 160

    项目突然出现这个问题java.lang.ArrayIndexOutOfBoundsException: 160,找了好大半天没有找出来哪里的问题,最后发现时fastjson.jar 版本太低了造成的, ...