Js操作DOM【查询】

DOM概述

  • DOM：文档对象模型(Document Object Mode)，将整个文档封装为document对象，便于js操作DOM
  • DOM树
    • 节点类型
      • 文档节点：将整个HTML文档的相关信息封装后得到的对象
      • 元素节点：将HTML标签的相关信息封装后得到的对象
      • 属性节点：将HTML标签属性的相关信息封装后得到的对象
      • 文本节点：将HTML文本的相关信息封装后得到的对象

alt

DOM查询API

  • 基于整个文档查询
    • document.getElementByid()：通过id获取元素节点
    • document.getElementsByTagName()：通过标签名获取元素节点
    • document.getElementsByName()：通过name属性值获取元素节点
  • 基于字元素节点查询
    • 查询子节点
      • elememt.childNodes：获取所有字节点
      • elememt.firstChild：获取第一个子节点
      • elememt.lastChild：获取最后一个子节点
      • element.getElementsByTagName()：通过标签名获取子节点
    • 查询父节点
      • element.parentNode：获取父节点
    • 查询兄弟节点
      • element.previousSibling：获取前一个兄弟节点
      • element.nextSibling：获取后一个兄弟节点