javascript中的firstChild

感谢lianghui007这位博主的分享。

刚学js，因为firstChild取到空格问题困扰了一晚上，早上搜到这位博主的文章恍然大悟。

    <ul id="contain">  <li><a href="http:/www.iwcn.net">Microsotf</a></li>  <li><a href="http:/www.iwcn.net">Yahoo</a></li>  <li><a href="http:/www.iwcn.net">Easy</a></li>  <li><a href="www.iwcn.net">W3c/Javascript</a></li>  <li><a href="www.iwcn.net">Design|Source</a></li>  </ul>  var container=document.getElementById("contain");

1、使用firstChild是ul元素下的第一个子节点（包括文本节点、HTML元素节点）。所以按照标准，你这个例子在Firefox和Opera中，Container.firstChild应该获取空白符的文本节点。而IE不是这样实现的，如果文本节点只包含空白符，IE会直接跳过。所以在IE中通过container.firstChild你获得的是li元素节点。

2、firstChild是元素的所有子节点（childNodes）中的第一个子节点，如果元素的第一个子节点没有变化，则firstChild这个引用也不会有变化。连续获取两次firstChild是同一个对象。

补充：你要了解引用与对象的关系。firstChild是指向元素首个子节点的引用。你给的xx函数中，将firstChild引用指向的对象append到父对象的末尾，原来firstChild引用的对象就跳到了container对象的末尾，而firstChild就指向了本来是排在第二个的元素对象。如此循环下去，链接就逐个往后跳了。

    <body>  <ul id="action">  <li title="第一段文字">第一个</li>  <li title="第二段文字">第二个</li>  </ul>  <script type="text/javascript">  var attr_p = document.getElementById("action");  alert(attr_p.childNodes[1].childNodes[0].nodeValue);  </script>  </body>

如果要取得id为action的ul的第一个li内的文本节点（如取得：第一个），可以使用…childNodes[1].childNodes[0].nodeValue这种方法找到，使用…childNodes[1].firstChild.nodeValue同样可以找到第一个li的文本节点，结论childNodes[0]等价于firstChild，无论何时何地，重要需要访问childNodes[]数组的第一个元素，我们就可以把它写成firstChild，DOM还提供一个与之对应的lastChild属性。需要注意的是，ff的空格节点问题，可以使用nodeType属性对节点类型判断，直到发现元素节点为止。

转载于:https://www.cnblogs.com/GregZQ/p/8365287.html

javascript中的firstChild相关推荐

Javascript中的函数重载-最佳做法
用JavaScript伪造函数重载的最佳方法是什么? 我知道不可能像其他语言一样重载Javascript中的函数. 如果我需要两个函数一起使用foo(x)和foo(x,y,z) ,这是最佳/首选方式: ...
html dom节点类型,浅谈Javascript中的12种DOM节点类型
前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...
JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
vanilla_如何在Vanilla JavaScript中操作DOM
vanilla by carlos da costa 通过卡洛斯·达·科斯塔如何在Vanilla JavaScript中操作DOM (How to manipulate the DOM in Van ...
java dom 获得子元素_在JavaScript中删除DOM节点的所有子元素
我将如何删除JavaScript中DOM节点的所有子元素? 说我有以下(丑陋的)HTML: hello world 我抓住了我想要的节点,如下所示: var myNode = document.get ...
如何在 JavaScript 中实现拖放
来源:http://www.javaeye.com/post/152142 译者说明: 终于完成了全文的翻译,由于时间比较参促,文章没有过多的校正与润色,阅读过程中难免会有些许生硬或不准确的感觉,请大 ...
JavaScript中DOM的层次节点(一)
DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.修改.删除节点的一部分. DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点 ...
JavaScript中DOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
js学习笔记----JavaScript中DOM扩展的那些事
什么都不说,先上总结的图~ Selectors API(选择符API) querySelector()方法接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null． ...

javascript中的firstChild

javascript中的firstChild相关推荐

最新文章

热门文章