小tips:HTML DOM中的children和childNodes属性

时间:2022-10-25 08:19:37

childNodes 属性

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

所有主流浏览器都支持 childNodes 属性。

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

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

获得 body 元素的子节点集合:

document.body.childNodes;

children 属性

获取 body 元素的子元素集合:

var c = document.body.children;

定义和用法:children 属性返回元素的子元素的集合,是一个 HTMLCollection 对象。

提示: 根据子元素在元素中出现的先后顺序进行排序。使用 HTMLCollection对象的 length属性获取子元素的数量,然后使用序列号(index,起始值为0)访问每个子元素。

children 属性与 childNodes 属性的差别

  • childNodes 属性返回所有的节点,包括文本节点、注释节点;
  • children 属性只返回元素节点;

注:IE6 到 IE8 完全支持 children 属性,但是,返回元素节点和注释节点,IE9 以上版本只返回元素节点。

参考地址:

小tips:HTML DOM中的children和childNodes属性的更多相关文章

  1. JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

    JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes     ...

  2. JS中,children和childNodes的不同之处

    <ul id="ul"><li></li><li></li><li><span></spa ...

  3. Mysql注入小tips --持续更新中

    学习Web安全好几年了,接触最多的是Sql注入,一直最不熟悉的也是Sql注入.OWASP中,Sql注入危害绝对是Top1.花了一点时间研究了下Mysql类型的注入. 文章中的tips将会持续更新,先说 ...

  4. Office 中的各种小tips(更新中)

    1.Word 中打字输入会擦掉之后原有字符,出现“吃字”的情况? 要将“改写”切换为“插入”,最简单的方法就是点击键盘上小键盘旁边的“insert”键. 其实仔细观察的话,在word文档下方,会看到如 ...

  5. 小tips:JS中typeof与instanceof用法

    介绍 typeof typeof用以获取一个变量或者表达式的类型,typeof一般只能返回如下几个结果: number boolean string function(函数) object(NULL, ...

  6. 小tips:JS中this操作执行像&lpar;object&period;getName &equals; object&period;getName&rpar;&lpar;&rpar;操作改变了this

    var name = "The window"; var object = { name: "My Object", getName: function(){ ...

  7. DOM中document对象的常用属性方法

    每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返 ...

  8. js基础之DOM中document对象的常用属性方法

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.an ...

  9. DOM中元素节点、属性节点、文本节点的理解

    DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型)  ...

随机推荐

  1. node&period;js express 4&period;x 安装指南

    前几天express 推出了4.0,得知这个消息,自己尝试了一下,突然发现用以前的文档上的操作出现了各种问题.结果只能去看文档,现在在这个给大家分享下4.0版本的安装. 先说下如果需要用express ...

  2. JS树形菜单

    超全的JS树形菜单源代码共享(有实例图) 树形菜单是很常用的效果,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,下面懒人萱将超全的 ...

  3. FMX下Edit只能输入数字

    procedure TForm1.Edit1KeyDown(Sender: TObject; var Key: Word; var KeyChar: Char; Shift: TShiftState) ...

  4. javascript 函数介绍

    javascript函数使用的时候,往往都比较单一,这里介绍几种不同于我们之前使用的函数调用方式! 1.函数表达式包含名称,用于递归 var f = function s(num) { if (num ...

  5. 为什么很多人使用&num;define而不是const定义常量

    众所周知,C语言一开始只有#define,C程序员用#define定义符号常量.但后来ANSI C加入了const限定符,而const应该比#define更好,为什么现在的C程序员还在大量使用#def ...

  6. Install a Redmine on Ubuntu system

    # How to install a Redmine on Ubuntu system Ref to: https://www.linode.com/docs/applications/project ...

  7. python 备份压缩传输

    # -*- coding:utf-8 -*-__author__ = 'colin' #!/usr/bin/env python#-*- coding:utf-8 -*-import os,comma ...

  8. vant的坑

    1.轮播图设置, .img { width: 100%; height: 100%; object-fit: cover; touch-action: none; } 如果不设置不能达到 保持纵横比缩 ...

  9. 1032&period; Sharing &lpar;25&rpar;

    To store English words, one method is to use linked lists and store a word letter by letter. To save ...

  10. 关于post跨域请求数据的问题-包括同源策略

    在<system.webServer>配置下面加入 <httpProtocol> <customHeaders> <add name="Access ...