节点获取

节点查询

  • document 整个文档

  • document.all 返回全部标签的类数组集合html ,head, body...

  • document.getElementsByTagName(' * ') 返回全部标签的类数组集合html ,head, body...

  • document.documentElement html标签

  • document.body body标签

  • document.forms[0].name 获取form

  • document.getElementById("btn") 获取一个元素 只能document.(ie7下有bug 碰到再说)

  • document.getElementsByName() 根据name属性获取一组元素 只能 document.

  • getElemetsByTagName 根据标签名获取一组元素

  • getElementsByClassName 根据class获取一组元素 不支持IE8及以下

  • querySelector 返回一个 支持ie8以上

  • querySelectorAll 返回一组 支持ie8以上

根据关系获取节点

  • ele.parentNode
  • ele.childElementCount 不包括文本节点的子节点个数
  • -------------------------------------------------------------------------
  • ele.childNodes 返回包括文本节点的子元素数组 (空格和换行的文本节点也算) ele.childNodes[0]
  • ele.fristChild 返回当前元素的第一个子节点 (空格和换行的文本节点也算)
  • ele.lastChild
  • ele.nextSibling 返回后一个兄弟节点 ( 空格和换行的文本节点也算 )
  • ele.previousSibling 返回前一个兄弟节点 ( 空格和换行的文本节点也算 )
  • ----------------推荐使用下面这组api----------------
  • ele.children 返回子元素 数组 ele.children[0]
  • ele.firstElementChild 返回第一个子节点, 不支持IE8及以下
  • ele.lastElementChild 返回最后一个子节点 不支持IE8及以下
  • ele.nextElementSibling 返回后一个兄弟节点 不支持IE8及以下
  • ele.previousElementSibling 返回前一个兄弟节点 不支持IE8及以下
其他方法
  • ele.hasChildNodes() 判断元素是否含有子节点 返回值 boolean
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,690评论 0 7
  • 收集于网络,特此整理。 多看看API,总是没坏处~ 一、节点 1.1 节点属性 Node.nodeName //...
    前端程序猿阿旭阅读 5,424评论 1 1
  • 原文 https://www.kancloud.cn/dennis/tgjavascript/241852 一、节...
    LuckyS007阅读 863评论 0 0
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,798评论 0 8
  • 概述 document节点是文档的根节点,每张网页都有自己的document节点。window.document属...
    许先生__阅读 682评论 0 2