1、childNodes:

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

有些人错误的使用()去取该集合元素,下表列出各浏览器对childNodes(i)的支持情况:

  IE6/7/8/safiri/chrome/Opera IE9/FireFox
childNodes(i) 支持 不支持

有时候需要获取指定元素的第一个HTML子节点(非属性/文本节点),最容易想到的就是firstChild 属性。代码中第一个HTML节点前如果有换行,空格,那么firstChild返回的就不是你想要的了。可以使用nodeType来判断下。

 function getFirst(elem){
for(var i=0,e;e=elem.childNodes[i++];){
if(e.nodeType==1)
return e;
}
}

2、children:

非标准的,它返回指定元素的子元素集合。经测试,它只返回HTML节点,甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样,在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点,可以使用children[0]来替代上面的 getFirst函数。需注意children在IE中包含注释节点。

childNodes和Children的区别的更多相关文章

  1. js表单验证处理和childNodes 和children 的区别

    一.对提交表单进行空值验证 html代码: <form action="#"onsubmit="return validate_form(this);" ...

  2. JavaScript中childNodes和children的区别

    我在学习JavaScript对DOM操作的过程中,发现了使用childNodes属性,得不到我想要的结果,因此我就从JavaScript高级程序设计中了解了childNodes和children的区别 ...

  3. Javascript 中childNodes和children的区别

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. javascript中childNodes与children的区别

    1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...

  5. parentNode、parentElement,childNodes、children 它们有什么区别呢?

    parentNode.parentElement,childNodes.children 它们有什么区别呢?parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的 ...

  6. node与Elment以及子节点childrenNode与children的区别(2)

    测试代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. js下firstElementChild firstChild 以及childNodes和children方法

    一. <div> <p>123</p> </div> 在上面这段代码中,如果使用以下js代码 var oDiv=document.getElementB ...

  8. childNodes和children

    childNodes 返回指定元素的子节点集合,包括HTML节点,所有文本(元素之间的空格换行childNodes会看作文本节点). 通过nodeType来判断节点的类型: 元素 1 属性 2 文本 ...

  9. ParentNodes、childNodes、children之间的区别

    "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 例: <div id="parent" ...

随机推荐

  1. Android自己主动升级框架

    先看效果 使用 package com.ydl.versionupdate; import android.app.Activity; import android.content.Context; ...

  2. js 类继承extends

    先看例子: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <titl ...

  3. vim字符串替换命令

    呜呜老是忘. 这里记录一下,仅仅记录当中日经常使用的最多的命令. :%s/str1/str2/g   替换每一行中全部str1为str2 经常使用! :s/str1/str2/g 替换当前行全部str ...

  4. HTML5与Javascript 实现网页弹球游戏

    终于效果图: 1. 使用html 5 的canvas 技术和javascript实现弹球游戏 总体流程图: 1.1 html5 canvas技术的使用 首先在html页面中定义画布. <canv ...

  5. RC4算法的Python实现详注

    刚对RC4算法进行了学习,网上发现https://ju.outofmemory.cn/entry/46753 中作者展示了RC4的python实现,但代码缺乏注释,较为晦涩,因此本文对部分代码进行了注 ...

  6. Creo二次开发--内存清理函数

    我们在处理模型文件时,总会遇到内存环境的清除问题.一个干净的Creo工作环境.是保证工作能顺利完毕的保障. ProMdlEraseNotDisplayed()函数提供了清除未显示模型的功能. 当须要循 ...

  7. [网页游戏开发]Morn组件赋值

    在讲解List之前,我们先介绍一下Morn组件赋值功能 默认属性赋值 界面逻辑开发过程中,经常会涉及到动态更改UI属性,比如: 界面有一个按钮,一个多选框和一个文本,分别命名为myButton,myC ...

  8. sanic官方文档解析之Example(一)

    1,示例 这部的文档是简单的示例集合,它能够帮助你快速的启动应用大部分的应用,这些应用大多事分类的,并且提供给ini工作的连接代码: 1.1,基础示例 这部分示例集成了提供简单sanic简单的代码 单 ...

  9. luogu3379 【模板】最近公共祖先(LCA) 倍增法

    题目大意:给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 整体步骤:1.使两个点深度相同:2.使两个点相同. 这两个步骤都可用倍增法进行优化.定义每个节点的Elder[i]为该节点的2^k( ...

  10. html5--6-51 阶段练习3-旋转导航

    html5--6-51 阶段练习3-旋转导航 @charset="UTF-8"; ul{ list-style: none; font-size:24px; font-weight ...