JavaScript课堂笔记 DOM

DOM

DOM简介

DOM：文档对象模型

​ -对文档的结构化表述

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

DOM 分类：

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

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

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

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

DOM的作用：

• 访问文档内容，包括元素、属性、文本
• 增加文档内容，包括元素、属性、文本
• 删除文档内容，包括元素、属性、文本
• 访问文档内容，包括元素、属性、文本

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")