`

为什么childNodes.length总是大于节点个数?

阅读更多
如果你创建这样子一个html文档:
java 代码
  1. ...  
  2.    《body...  
  3.            〈div...  
  4.                 〈ul...  
  5.                     〈img...  
  6. ...  

然后你使用document.body.childNodes.length看看,有几个节点, 你可能认为它会输出3,可是实际的值远大于3为什么?因为childNodes包含的不仅仅只有html节点,所有属性,文本等都包含在childNodes里面,你可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才使元素节点, 2是属性节点,3是文本节点。
         要获得一个元素的文本,比如要获得一个P节点的文本,有的人喜欢使用innerHTML,更改也是一样,其实这不太好,因为使用innerHTML浏览器会认为你要插入的东西是一段标签文本,而你只想插入一段纯文本,这就导致浏览器试图去解析你的那段纯文本,这会造成不必要的资源浪费。所以建议使用element.firstChild.nodeValue,为什么是firstChild呢?因为childNodes[0]就是文本节点,不信你可以看看它的nodeType。
分享到:
评论

相关推荐

    childNodes.length与children.length的区别

    childNodes.length与children.length的值常不一样。

    ASP+XML留言板

    '从结束节点到超始节点之间读取节点数据 id=objRootsite.childNodes.item(StarNodes).childNodes.item(0).text username = objRootsite.childNodes.item(StarNodes).childNodes.item(1).text '获得用户名 fromwhere ...

    javascript操作XML

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

    delphi数据库导入导出XML

    procedure TForm1.inxmlClick(Sender: TObject); var ... // Memo2.Lines.Add('子节点: ' + xm_node.ChildNodes[I].ChildNodes.FindNode('子节点').Text); end; Memo2.Lines.Add(str); end; end;

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

    JS中用childNodes获取子元素换行会产生一个子元素 <div id='div3'></div> 这样的代码 $(‘#div1').childNodes.length==>会等于 5哦 要是你把这些代码不换行你就会得到2 $('#div1').childNodes.length 5 $('...

    JS_操作节点.doc

    2. childNodes 存储节点的子节点列表(只读) 3. dataType 返回此节点的数据类型 4. Definition 以DTD或XML模式给出的节点的定义(只读) 5. Doctype 指定文档类型节点(只读) 6. documentElement 返回文档的根元素(可...

    优化javascript的执行速度

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

    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; { ...

    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 =...

    Delphi XML指定位置插入节点

    由于,先前做项目的时候,遇到过对方提供的XML数据格式,不符合自己的要求,需要在对方提供的模板数据上...对于注释节点的插入则要使用ChildNodes.Insert(NodeIndex,IXMLNode); 程序注释很详细,可根据个人需要进行扩展

    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 获取HTML标签内的子节点的方法

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

    javascript读取文本节点方法小结

    2,利用元素节点的childNodes 方法可以获得指定元素节点的所有子节点 alert(cityNode.childNodes.length) 注:基本不用 3.获取 id 节点的所有 li 节点 var cityLiNodes=cityNode.GetElementsByTagName(li); ...

    javascript 学习之旅 (3)

    childNodes属性:将返回一个数组,这个数组包含给定元素节点的全体子元素。 childType属性:返回的数组包含着所有类型的节点 nodeValue属性:改变某个文本节点的值 firstChild和lastChild属性:无论何时何地,只要...

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

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

    DOM精简教程

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

    JS获取子节点、父节点和兄弟节点的方法实例总结

    本文实例讲述了JS获取子节点、父节点和兄弟节点的方法。分享给大家供大家参考,具体如下: 一、js获取子节点的方式 ...使用childNodes获取子节点的时候,childNodes返回的是子节点的集合,是一个数组的格式。他会把

    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...

Global site tag (gtag.js) - Google Analytics