DOM与BOM

BOM - 浏览器对象模型 Browser Object Model

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型 Document Object Model

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM

DOM的概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言(x(extension)ml,html)的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构,

DOM(是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

DOM又称为文档树模型

[外链图片转存失败(img-BylqR58Y-1569315064147)(media/1497154623955.png)]

• 文档：一个网页可以称为文档
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
• 元素：网页中的标签
• 属性：标签的属性

DOM经常进行的操作

• 获取元素
• 对元素进行操作(设置其属性或调用其方法)
• 动态创建元素
• 事件(什么时机做相应的操作)

获取页面元素

为什么要获取元素

想让页面的一个div隐藏。先要获取div，修改属性，使其不可见

根据id获取元素*

var p = document.getElementById('id2');

id重名的时候，会取第一个值。

id要有唯一性

根据标签名获取元素*

var p = document.getElementsByTagName('div')[1];

根据name获取元素

var names = document.getElementsByName('n1');

根据类名获取元素

var classes = document.getElementsByClassName('c1');

根据选择器获取元素

var div = document.querySelector("#id1");
var classes = document.querySelectorAll(".c1");

事件

事件：触发-响应机制

事件三要素

• 事件源:触发(被)事件的元素
• 事件名称: click 点击事件
• 事件处理程序:事件触发后要执行的代码(函数形式,回调函数)

事件的基本使用

//获取事件源
var div = document.getElementById('id1');
//绑定事件
div.onclick = function() {
	//写回调函数
}

属性操作

非表单元素的属性

href、title、id、src、className·

var link = document.getElementById('link');
console.log(link.href);

• innerHTML和innerText

• HTML转义符

"		"
'		'
&		&
<		&lt;   // less than  小于
>		&gt;   // greater than  大于
空格	   &nbsp;
©		&copy;

表单元素属性

• value 用于大部分表单元素的内容获取(option除外)
• type 可以获取input标签的类型(输入框或复选框等)
• disabled 禁用属性
• checked 复选框选中属性
• selected 下拉菜单选中属性

自定义属性操作

• getAttribute() 获取标签行内属性
• setAttribute() 设置标签行内属性
• removeAttribute() 移除标签行内属性
• 与element.属性的区别: 上述三个方法用于获取任意的行内属性。

样式操作

• 使用style方式设置的样式显示在标签行内

类名操作

• 修改标签的className属性相当于直接修改标签的类名