childNodes和children有哪些区别?

发布时间:2016-08-25 编辑:汤利军 阅读:

最近在自学Js.......闲话不多说、直接进入正题。
  下方代码是我做的一个关于DOM操作的小例子(如下图)

点击移动li按钮运行结果如下所示:


  由上图可以看出,单击移动li按钮后、li并没有移入到ul2中,而我再点击(第二次点击)的时候、发现li移动到ul2了(这也太邪门了surprise),运行结果如下:

  然后网上各种......终于找到了真因。原因就是:childNodes作为DOM标准属性、返回结果包含了文本节点、HTML节点及属性......所以单击第一次得到的是文本节点。而childred为DOM非标准属性、不包含文本节点,直接返回子元素集合。

childNodes和children和有哪些区别?

1、childNodes 属性:标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本。可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点,3是文本节点。
  
2、children 属性:非标准的,它返回指定元素的子元素集合。经测试,它只返回HTML节点,甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样,在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点,可以使用children[0]来替代上面的getFirst函数。需注意children在IE中包含注释节点。












关注我

图文推荐

云标签

友链交换