JavaScript课堂笔记 DOM

DOM

DOM简介

DOM:文档对象模型

​ -对文档的结构化表述

​ -定义了在程序中对该结构进行访问的方式

DOM 分类:

  • 核心DOM:用于任何结构化的表述

    ​ 与编程语言无关 DOM是一种API

  • HTML DOM:用于HTML文档的标准模型

  • XML DOM:用于XML文档的标准模型

DOM的作用:

扫描二维码关注公众号,回复: 4220580 查看本文章
  • 访问文档内容,包括元素、属性、文本
  • 增加文档内容,包括元素、属性、文本
  • 删除文档内容,包括元素、属性、文本
  • 访问文档内容,包括元素、属性、文本

DOM树和DOM结点

DOM 将 HTML 文档抽象为树形结构,称这棵树为 DOM 树。
HTML 中的每一项内容都可以在 DOM 树中找到,对文档内容的操作即对 DOM 树的操作

在这里插入图片描述

HTML 文档中的所有内容都是节点

  • ① 整个文档是一个文档节点
  • ② 每个 HTML 元素是**元素节点 **;
    • HTML 开始标签中的属性为元素节点对象的属性
    • HTML 开始标签中的事件属性为元素节点对象的方法
    • 元素节点对象中的方法函数中的 this 指向当前触发事件的元素
  • ③ HTML 元素内的文本是**文本节点 **;
    • 空格、换行空格属于文本节点
  • ④ 每个 HTML 属性是**属性节点 **;
  • ⑤ 注释是注释节点

在结点树中,顶端结点被称为

父节点 子节点 同胞结点(左为兄)

在这里插入图片描述

访问DOM结点

如何获得结点:

  • 直接获取结点

    • 通过id属性获得结点

      document.getElementById() ID选择器
      
    • 通过标签名获得所有同名标签

      document.getElementsByTagName() 标签选择器
      
    • 通过类名获得所有类名相同的标签

      document.getElementsByClassName() 类选择器
      
  • 通过结点关系获取

    • 通过父节点获得子节点
    • 通过子节点获得父节点
    • 获得前后兄弟节点

元素树:

仅仅包含元素节点的树结构,不是一颗新树,只是节点树的子集

节点树 元素树(没有文本、注释)
获取父节点 parentNode parentElement
获取子节点 childNodes children
获取第一个子节点 firstChild firstElementChild
获取最后一个子节点 lastChild lastElementChild
获取前一个兄弟节点 previousSibling previousElementSibling
获取后一个兄弟节点 nextSibling nextElementSibling

innerHTML属性:

​ – innerHTML 是 DOM 中元素节点的属性,相当于一个容器

​ – 用于获取或改变任意元素节点的内容,该属性可读可写

​ – 操作简单,几乎所有浏览器均支持

元素节点修改:

/*文档元素修改*/
document.getElementsByClassName("three")[0].nextElementSibling.innerHTML="猕猴桃"
/*背景颜色修改*/
document.getElementsByClassName("three")[0].style.background="blue"
document.getElementsByClassName("three")[0].setAttribute("style","background:yellow")

猜你喜欢

转载自blog.csdn.net/ychhh/article/details/83960341
今日推荐