javascript DOM 获取元素操作

target.childNodes; //得到target的全部子节点 

target.children; //是一个只读属性,返回一个Node的子elements的活HTMLCollection

target.parentNode; //得到target的父节点 

target.nextSibling; //获得target的下一个兄弟节点 

target.previousSibling; //得到target的上一个兄弟节点 

target.firstChild; //获得target的第一个子节点 

target.lastChild; //获得target的最后一个子节点

target.childNodes 与 target.children的区别

Node.childNodes 返回包含指定节点的子节点的集合,该集合为即时更新的集合(live collection)。包括html节点,所有属性,文本。可以通过nodeType来判断是哪种类型的节点。

描述
1 一个 元素 节点,例如 <p> 和 <div>。
3 Element 或者 Attr 中实际的 文字
7 一个用于XML文档的 ProcessingInstruction ,例如 <?xml-stylesheet ... ?> 声明。
8 一个 Comment 节点。
9 一个 Document 节点。
10 描述文档类型的 DocumentType 节点。例如 <!DOCTYPE html> 就是用于 HTML5 的。
11 一个 DocumentFragment 节点

children 属性,非标准的,它返回指定元素的子元素集合,它只返回html节点,甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样,在firefox下不支持()取集合元素。因此如果想获取指定元素的第一个html节点,可以使用children[0]来替代上面的getFirst函数。需注意children在IE中包含注释节点。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,704评论 0 7
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,162评论 0 21
  • 前言:尽管现在有很多优秀的框架,大大简化了我们的DOM操作,但是我们仍然要学好DOM知识来写原生JS,从根本上去理...
    长鲸向南阅读 1,927评论 0 0
  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 1,483评论 1 3
  • 节点 节点类型 每个节点都有一个 nodeType 属性,用于表示节点类型。nodeType 属性返回节点的类型。...
    练晓习阅读 491评论 0 4