DOM

DOM

DOM (Document Object Mode) 全称是文档对象模型，是W3C组织推荐的处理可扩展标志语言的标准编程接口

是一套web标准：
定义了访问HTML文档的一套属性、方法和事件。

DOM的本质是 网页 与 脚本语言 沟通的桥梁。

脚本语言通过DOM对象来访问html页面，从而改变文档的结构，样式和内容。

当浏览器载入 HTML 文档, 它就会成为 document 对象。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

DOM 可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构，这种结构叫树形结构。比如，Web开发中，用 JavaScript 语言来访问、创建、删除或者修改 HTML 的文档结构。

具体在网页中，执行者是浏览器，DOM 是浏览器侧面的概念。

DOM 树

节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点，这写东西在 HTML 中我们称为元素：

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点
  

节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

• 在节点树中，顶端节点被称为根（root）
• 每个节点都有父节点、除了根（它没有父节点）
• 一个节点可拥有任意数量的子，html不是
• 同胞是拥有相同父节点的节点

DOM对象

在 HTML DOM (Document Object Model) 中:

• 文档对象：整个HTML文档。
• 节点对象： 所有的HTML元素都是元素节点
• 属性对象： 依附于元素节点，所有节点的属性都是节点。
• 文本对象： 文本插入到 HTML 元素是文本节点。

两个顶级节点：

• window：表示当前打开的浏览器窗口。
• document：表示窗口中显示的当前html页面。

Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

元素对象(Element)

在 HTML DOM 中,
元素对象：一个 HTML 元素,即一个HTML标签对。
元素对象：

• 可以有子结点、父结点
• 可以有属性
• 有节点名称、节点类型、节点值

属性对象

在 HTML DOM 中, Attr 对象 代表一个 HTML 属性。
HTML属性总是属于HTML元素。

DOM 事件

键盘事件
鼠标事件
框架/对象（Frame/Object）事件
表单事件
拖动事件

熟悉了 DOM 的结构，接下来开始使用 DOM，因为 DOM 是 JS 和 HTML 的接口，先要了解简单的 JS 语法。

JS 的 DOM 操作

操作包含哪些内容：

• 获取元素，判断元素内容是否正确。
• 交互操作，修改元素，点击，输入数据

DOM 访问

文档中的所有内容都是节点，都需要访问到，每一个特性都可以作为定位的标准：

• window,看看下面有些什么？
• title，document.title，只有一个
• url, document.title
• tagname, 需要找，document.getElementsByTagName
• attribute
• text

attribute 又分为很多：

• id
• name
• class,document.getElementsByClassName

注意：用 className 查找的时候不要把所有的都丢进去，只能找一个。

• style,doc.querySelector。p,#,.来表示。通配符*

• value

元素里面的属性方法可以通过 var e = document.getElements 拿到元素以后查看。

DOM 修改

标签名称。

• innerHTML
• innerText
• value
• setAttribute
• getAttribute
• 改变样式style.color
• 改变 disabled, readonly, input, value=
  如果不知道属性是啥，别人传给我的，getAttribute, setAttribute

如果没有这个属性，设置这个属性为值。

style.visibility = “hidden”, display = “none” 隐藏，但是源码还是会有的。

DOM 事件监听

on… 的都是事件，一直在收听，一有风吹草动，他就开始行动了。

document.getElementsByTagName("h1")[0].onmouseover = function() {
	document.getElementsByTagName("h1")[0].style.color = "red"
}

绑定形式：

// <h1 οnmοuseοver="red(this)">欢迎使用柠檬搜索</h1>
function red(ele){
    ele.style.color = "red"
}

onload事件：

window.onload = function() {
	alert("hello")
}

常用事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载