测试代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<ul id="ul1">

    <li>x</li>

    <li>x</li>

    <li>x</li>

    <li>x</li>

</ul>

<script>

  alert("childrenNodes:"+ document.getElementById("ul1").childNodes.length+"    children:"+ document.getElementById("ul1").children.length)

</script>

</body>

</html>

以上的结果为两种结果

childrenNodes：9    children:4   IE
childrenNodes：4    children:4   谷歌
概念:NODE指的是所有节点（包括回车换行），而Elment仅仅是HTML节点也就是我们常说的元素.因为所有的节点都类型，W3C定义类型如下

1，childNodes 属性，标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。

2，children 属性，非标准的，它返回指定元素的子元素集合。它只返回HTML节点，甚至不返回文本节点。这个用的99%是这个功能来进行子节点功能的操作，且可以避免firstChildren与lastChildren的选取非元素节点的尴尬！例如上述代码中的选取第一个子节点li,如果用firstChildren则选取的是回车节点也就是数值3的文本节点，并不是li元素节点，这时候用children[0]则选择的是第一个元素节点li

node与Elment以及子节点childrenNode与children的区别(2)的更多相关文章

  1. JS获取父、兄、子节点

    一.jQuery的父节点查找方法 $(selector).parent(selector):获取父节点 $(selector).parentNode:以node[]的形式存放父节点,如果没有父节点,则 ...

  2. 递归遍历所有xml的节点及子节点

    import java.io.File; import java.util.List; import org.dom4j.Attribute; import org.dom4j.Document; i ...

  3. DOM基础之“寻找”子节点

    今天学习了JS中的DOM的内容,虽然小菜的理解不深,但希望能够记录下来,慢慢一点一点的进步,有更深的理解了,再回来补充. 首先,关于DOM的概念: 1.概念:DOM = document(文档)Obj ...

  4. js获取子节点和修改input的文本框内容

    js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...

  5. jquery easyui tree动态加载子节点

    1.前端tree绑定时,使用onBeforeExpand事件:当节点展开时触发加载子节点,自动会向服务端发送请求:url为绑定url,参数为当前节点id this.tree = { method: ' ...

  6. （转）jQuery EasyUI Tree - TreeGrid动态加载子节点

    有时我们已经得到充分的分层树形网格(TreeGrid)的数据. 我们还想让树形网格(TreeGrid)按层次惰性加载节点. 首先,只加载顶层节点. 然后点击节点的展开图标来加载它的子节点. 本教程展示 ...

  7. HtmlAgilityPack中通过sibling才能得到对应的InnerText和form，option等tag的子节点

    [背景] 之前使用HtmlAgilityPack期间,遇到了2个bug: 1. InnerText没有包含对应字符串(但是用NextSibling.InnerText却可以得到) 对于html: ? ...

  8. DOM的概念及子节点类型

    前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...

  9. DOM的概念及子节点类型【转】

    前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...

随机推荐

  1. BZOJ1443: [JSOI2009]游戏Game

    如果没有不能走的格子的话,和BZOJ2463一样,直接判断是否能二分图匹配 现在有了一些不能走的格子 黑白染色后求出最大匹配 如果是完备匹配,则无论如何后手都能转移到1*2的另一端,故先手必输 否则的 ...

  2. 四、卫星定位《苹果iOS实例编程入门教程》

    该app为应用的功能为用iPhone 显示你现在的位置 现版本 SDK 8.4 Xcode 运行Xcode 选择 Create a new Xcode project ->Single View ...

  3. LVS + KEEPAlived 配置 DIR模式

    1 .1 Lvs LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国国内最早出现的自由软件项目 ...

  4. Jenkins 2.7.3 LTS 发布

    更新如下: Stop A/B testing of the remoting JNLP3 protocol due to the known issues. The protocol can be e ...

  5. onselectstart

    以前在做图片滚动时,在双击左右箭头,快速切换图片滚动时,会选择附近区域的文字,感觉不是很好,今天在同事在分享时,讲到了这个问题, 试了一下,不错,解决了问题IE及Chrome下的方法一样,对相应的元素 ...

  6. 3Sum

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  7. document.body.scrollTop or document.documentElement.scrollTop

      用Javascript获取DOM节点相对于页面的绝对坐标时,需要计算当前页面的滚动距离,而这个值的获取又取决于浏览器. 在Firefox或Chrome浏览器的控制台可以查看document.bod ...

  8. ubuntu安装配置jdk tomcat mysql ...

    安装之前大家一定要检查好各个版本问题 以免造成不兼容. (一)下载所需安装包: jdk-7u76-linux-x64.tar.gz apache-tomcat-7.0.63.tar.gz MySQL- ...

  9. VB鼠标指针

    vbDefault 0 (缺省值)形状由对象决定. VbArrow 1 箭头. VbCrosshair 2 十字线(crosshair 指针). VbIbeam 3 I 型 VbIconPointer ...

  10. Password Attacker

    Passwords are widely used in our lives: for ATMs, online forum logins, mobile device unlock and door ...