测试代码:

<!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. IOS 蓝牙相关-连接外设的代码实现(2)

    我们具体说明一下中心模式的应用场景.主设备(手机去扫描连接外设,发现外设服务和属性,操作服务和属性的应用.一般来说,外设(蓝牙设备,比如智能手环之类的东西), 会由硬件工程师开发好,并定义好设备提供的 ...

  2. iOS开发三步搞定百度推送

    iOS开发三步搞定百度推送   百度推送很简单,准备工作:在百度云推送平台注册应用,上传证书. 步骤一: 百度云推送平台 http://push.baidu.com/sdk/push_client_s ...

  3. marquee滚动语法

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. jQuery设计思想之取值和赋值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 诅咒JavaScript之：Jquery ajax提交内容异常

    jquery ajax 通过url提交内容,在服务器端获取却出现很奇怪的值,代码如下: ajaxurl = "aspx/logTable.ashx?action=load&Every ...

  6. winform把图片存储到数据库

    1.先在Form中放一个PictureBox控件,再放三个按钮. 2.双击打开按钮,在里面写如下代码: OpenFileDialog open1 = new OpenFileDialog(); Dia ...

  7. NeuSoft(1)构建嵌入式交叉编译环境

    操作系统版本:ubuntu 12.04 内核名称:Linux 内核发行版:3.2.0-generic 内核版本:#50-Ubuntu SMP Mon Sep 12 21:18:14 UTC 2011 ...

  8. Ajax Post 与 Get 实例

    Ajax的POST实例,index.html <html> <head> <script type="text/javascript"> fun ...

  9. isset 和empty 两个函数的用法

    关于用php 获取当前脚本的url很多朋友会说很简单,但是要获取很详细的就要经过多次判断哦. $PHP_TIME = time();$PHP_SELF = isset($_SERVER['PHP_SE ...

  10. 使用花生壳6.5客户端FTP设置

    1.打开FTP客户端—选项—参数选择 2.设置为主动模式(PORT) 3.连接FTP服务器 4.FTP连接成功