`
zhangziyueup
  • 浏览: 1170261 次
文章分类
社区版块
存档分类
最新评论

childNodes.length与children.length的区别

 
阅读更多


childNodes.length
children.length的值常不一样。
因为childNodes包含的不仅仅只有html节点,所有属性文本等都包含在childNodes里面,你可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才使元素节点,2是属性节点,3是文本节点。而children.length只计算元素节点的数量。
包括进行节点长度的计算,节点的移动时都要注意这一点。
要获得一个元素的文本,比如要获得一个P节点的文本,有的人喜欢使用innerHTML,更改也是一样,其实这不太好,因为使用innerHTML浏览器会认为你要插入的东西是一段标签文本,而你只想插入一段纯文本,这就导致浏览器试图去解析你的那段纯文本,这会造成不必要的资源浪费。所以建议使用element.firstChild.nodeValue,为什么是firstChild呢?因为childNodes[0]就是文本节点,不信你可以看看它的nodeType


分享到:
评论

相关推荐

    ASP+XML留言板

    id=objRootsite.childNodes.item(StarNodes).childNodes.item(0).text username = objRootsite.childNodes.item(StarNodes).childNodes.item(1).text '获得用户名 fromwhere = objRootsite.childNodes.item...

    zuoxiaobai#zuo11.com#element.childNodes 和 element.children 有什么区别

    2. childNodes 类型是 NodeList,HTMLCollection 类型是 HTMLCollection", 1. childNodes 获取的

    优化javascript的执行速度

    i++){ 执行代码 } 这种方式每次循环都要取element.childNodes.length的值,应该改为如下的 var n=element.childNodes.length for(var i=0;i<n;i++){ 执行代码 } 2:修改dom操作的次数 dom批量插入一批类似的节点...

    Javascript遍历Html Table示例(包括内容和属性值)

    1: 遍历并输出Table中值 <td></td> <td></td> function f() ...var t=document.getElementById(tb)....t.childNodes(i).childNodes.length;j++) { alert(t.childNodes(i).childNodes(j).innerText);

    JS中用childNodes获取子元素换行会产生一个子元素

    $(‘#div1').childNodes.length==>会等于 5哦 要是你把这些代码不换行你就会得到2 $('#div1').childNodes.length 5 $('#div1').childNodes [text, div#div2, text, div.div2, text] 是的 看到没 换行就产生了一个...

    FLASH+XML构造下拉菜单 fla源文件

    xml_Length2 = my_xml.firstChild.childNodes.childNodes.length; if (_root["mc"+i].hitTest(_root._xmouse, _root._ymouse)) { if (my_xml.firstChild.childNodes.hasChildNodes()) { for (j=0; j<XML_LENGTH2; { ...

    delphi数据库导入导出XML

    str := str + xm_node.ChildNodes[I].AttributeNodes.Nodes[j].NodeName + ':' + xm_node.ChildNodes[I].Attributes[xm_node.ChildNodes[I].AttributeNodes.Nodes[j].nodename] + ' ' else str := str + xm_node....

    ajax联动查询后绑定控件

    var childs = items[i].childNodes; var oOption = document.createElement("option"); oOption.value = childs[0].firstChild.nodeValue; oOption.text = childs[1].firstChild.nodeValue; objSel_...

    主题皮肤JS跨页多选

    {var d=$dp.childNodes[0].contentWindow.$d; if(d.obj.eCont.value==''||d.obj._judgeCorrectDateTime(d.obj.eCont.value)){d.obj._markValue(true); if(d.obj.eCont.value!=''){d.obj._initDate(d.obj.eCont.value...

    ajax或者jquery操作xml相关源文件

    info[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//获取节点值 //alert(info.getAttribute('type')); } catch (exception) { alert("The node is not exist"); } var str =...

    javascript 学习之旅 (3)

    childNodes属性:将返回一个数组,这个数组... node.firstChild等价于node.childNodes[0] 同理 node.lastChild等价于node.childNodes[node.childNodes.length-1] 第五章 javascript编程原则和良好习惯 预留退路 分离

    JS 获取HTML标签内的子节点的方法

    document.getElementById(id).childNodes.length 注意: 标签开/闭合算2个节点 第几个子几点: document.getElementById(id).childNodes[n] 示例: 这里是 length-4 处,margin-left:20px 输出:length=8 实例: ...

    DOM精简教程

    接下来可以通过指定的合适节点移动到树中的任何点,结合以下的代码你可以更好的了解这棵树节点间的相互关系:NodeA.firstChild = NodeA1 NodeA.lastChild = NodeA3 NodeA.childNodes.length = 3 NodeA.childNodes[0]...

    JS.GetAllChild(element,deep,condition)使用介绍

    代码如下: window.GetAllChild = function (element, deep, condition) { if (!...element.childNodes || element.childNodes.length <= 0) { return []; } var result = new Array(); for (var i = 0; i < eleme

    初识javascript 文档碎片

    if (d.childNodes.length == 1) return d.childNodes[0]; var df = document.createDocumentFragment(); while (d.firstChild) df.appendChild(d.firstChild); return df; } 大概的原理都明白,比较困惑的是为什么...

    用于自动添加Digg This!按钮的JavaScript

    代码如下:var main=document....main.childNodes.length;i++) { if(main.childNodes[i].className&&main.childNodes[i].className==”post”) { var post=main.childNodes[i]; if(!firstpost) { firstpost=post;

    javascript操作XML

    xmlChildNode.length 'xmlChildNode节点的子节点数量 '取出一个节点的属性集合 set objnodes=objXml.documentElement.SelectSingleNode("//people/man").GetAttributeNode("name").attributes for each element...

    document.documentElement的一些使用技巧

    代码如下: –documentElement 属性可返回文档的根节点。 <... <head> <title></title>...ohtml.childNodes.length); //alert(ohtml.childNodes[1].nodeName); //获取bod

Global site tag (gtag.js) - Google Analytics