DOM备忘录
nodeName和nodeValue属性
对于element节点而言,nodeName是标签名,nodeValue是null;而对于textNode节点而言,nodeName是#Text,nodeVlue是内部字符串。譬如:
node关系:
父子关系:firstChild, lastChild, parentNode
兄弟关系:nextSibling, previousSibling
childNodes的缺陷:element.childNodes通常会把标签之间的换行或是空格当做一个TextNode节点,比如:
children属性
children似乎可以解决空白符解释问题,但是它只包含元素的子节点中那些也是元素的节点,换而言之,必须要有标签包含才能被识别成children。遗憾的是,Firefox却不支持children属性。
element.childNodes返回的是一个NodeList的数据,不是Array类型。虽然二者都可以使用[index]方式访问内部元素,也都拥有length属性,而且NodeList还拥有item(index)方法。Array.prototype所拥有的数组方法,对于NodeList而言并不适用。但是Array.prototype.slice()方法可以通过回调的方式把NodeList数据变为一个Array类型的数据。
以上方法之所以可以使用,而且对HTMLCollection数据类型也同样使用。MDN上是这样描述的:
slice method can also be called to convert Array-like objects / collections to a new Array.
然而,对于IE浏览器而言,以上方法并不适用,需要通过很原始的方式,逐个把NodeList的内部元素push到一个新的Array里面,然后返回整个数组即可。
function convertToArray(nodes){ var array = null; try { array = Array.prototype.alice.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; }
要注意,NodeList是一种类数组对象,它实际上是基于DOM结构动态执行查询的结果。其length属性表示的是访问NodeList的那一刻,其中包含的节点数量。
HTMLCollection与NodeList的异同