js节点解析
2016-06-03 14:21
411 查看
在JS中,每一个节点都有一个nodeType 属性,用于表明节点的类型。节点类型由在Node 类型中定义的下列12个数值常量来表示,任何节点类型必居其一:
Node.ELEMENT_NODE(1);
Node.ATTRIBUTE_NODE(2);
Node.TEXT_NODE(3);
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_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);
Node.NOTATION_NODE(12);
在这个例子中,首先检查节点类型,看它是不是一个元素。如果是,则取得并保存nodeName 的值。对于元素节点,nodeName 中保存的始终都是元素的标签名,而nodeValue 的值则始终为null。
每个节点都有一个childNodes 属性,其中保存着一个NodeList 对象。NodeList 是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。请注意,虽然可以通过方括号语法来访问NodeList 的值,而且这个对象也有length 属性,但它并不是Array 的实例。
下面的例子展示了如何访问保存在NodeList 中的节点——可以通过方括号,也可以使用item()方法。
无论使用方括号还是使用item()方法都没有问题,但使用方括号语法看起来与访问数组相似。在JS中,可以对arguments 对象使用Array.prototype.slice()方法将其转换为数组。而采用同样的方法,也可以将NodeList 对象转换为数组。
除IE8 及更早版本之外,这行代码能在任何浏览器中运行。要想兼容IE8以前版本,解决方案如下:
这个convertToArray()函数首先尝试了创建数组的最简单方式。如果导致了错误(说明是在IE8 及更早版本中),则通过try-catch 块来捕获错误,然后手动创建数组。
Node.ELEMENT_NODE(1);
Node.ATTRIBUTE_NODE(2);
Node.TEXT_NODE(3);
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_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);
Node.NOTATION_NODE(12);
if (someNode.nodeType == 1) { //适用于所有浏览器 value = someNode.nodeName; }
在这个例子中,首先检查节点类型,看它是不是一个元素。如果是,则取得并保存nodeName 的值。对于元素节点,nodeName 中保存的始终都是元素的标签名,而nodeValue 的值则始终为null。
每个节点都有一个childNodes 属性,其中保存着一个NodeList 对象。NodeList 是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。请注意,虽然可以通过方括号语法来访问NodeList 的值,而且这个对象也有length 属性,但它并不是Array 的实例。
下面的例子展示了如何访问保存在NodeList 中的节点——可以通过方括号,也可以使用item()方法。
var firstChild = someNode.childNodes[0]; var secondChild = someNode.childNodes.item(1); var count = someNode.childNodes.length;
无论使用方括号还是使用item()方法都没有问题,但使用方括号语法看起来与访问数组相似。在JS中,可以对arguments 对象使用Array.prototype.slice()方法将其转换为数组。而采用同样的方法,也可以将NodeList 对象转换为数组。
//在IE8 及之前版本中无效 var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0); // 或 var arrayOfNodes = Array.prototype.slice.apply(someNode.childNodes, [0]); // 或 var arrayOfNodes = [].call(someNode.childNodes, 0); // 或 var arrayOfNodes = [].apply(someNode.childNodes, [0]);
除IE8 及更早版本之外,这行代码能在任何浏览器中运行。要想兼容IE8以前版本,解决方案如下:
function convertToArray(nodes) { var array = null; try { array = Array.prototype.slice.call(nodes, 0); //针对非IE 浏览器 } catch (ex) { array = new Array(); for (var i = 0, len = nodes.length; i < len; i++) { array.push(nodes[i]); } } return array; }
这个convertToArray()函数首先尝试了创建数组的最简单方式。如果导致了错误(说明是在IE8 及更早版本中),则通过try-catch 块来捕获错误,然后手动创建数组。
相关文章推荐
- js正则表达式
- js == 与 === 的区别[转]
- JavaScript 浏览器对象
- json串格式化代码
- 深入浅析JavaScript中的arguments对象(强力推荐)
- JavaScript创建对象与原型
- jstl标签库<c:if>和<c:choose>区别
- js获取select标签选中的值
- js date 操作
- JavaScript学习笔记一:数据类型和变量
- jstl表达式,前台删除的提示问题
- JavaScript基础——面向对象的程序设计(一)创建对象的几种方式总结
- 自学jsp自定义标签的第一步我过了
- js原型(prototype)和面对对象
- datatable 转换json
- alibaba的FastJson(高性能JSON开发包) json转换
- 使用js模拟点击a链接 无效的解决方案
- javascript常用字符串函数和本地存储
- JS中使用变量保存arguments对象的方法
- SharePoint 2013 Rest and SP.js Copyto and Moveto (Rest 和SP.js 基本用法之 复制和移动文件)