DOM和BOM重点核心(笔记)

文档对象模型(Document Object Model，简写DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。

• 1 对于JavaScript,为了能够使JavaScript操作HTML,JavaScript就有了一套自己的dom编程接口。
• 2 对于HTML，dom使得html形成一颗dom树，包括文档，元素，节点。

DOM

1.创建

1. document.write
   创建一个文本字符串写入文档流中
2. createElemenet
   根据参数指定的标签名称创建一个新元素，并返回新建元素的引用

2.增

1. appendChild
   在指定父元素节点的最后一个子节点后添加节点
2. insertBefore
   将指定元素节点添加到开始位置

3.删除

1. removeChild
   删除指定父元素节点下的某一个子元素节点

4.修改

主要修改dom的元素属性，dom元素的内容，属性，表单的值等

1. 修改元素属性：src、href、title等
2. 修改普通元素内容：innerHTML、innerText、textContent
3. 修改表单元素：value、type、disabled等
4. 修改元素样式：style、className

5.查找

主要获取查询dom的元素

1. DOM提供的API方法：getElementById、getElementByTagName 古老用法 不太推荐
2. H5提供的新方法：querySlector、querySelectorAll 提倡
3. 利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibing、nextElementSibing) 提倡

6.属性操作

主要针对自定义属性。

1. setAttribute：设置dom的属性值
2. getAttribute：得到dom的属性值
3. removeAttribute : 移除dom的属性值

7.事件操作

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

BOM

文档对象模型(Browser Object Model，简写BOM),它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象为window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。
BOM缺乏标准，JavaScrip语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

DOM	BOM
文档对象模型	浏览器对象模型
DOM就是把文档当做是一个对象来看待	把浏览器当做一个对象来看待
DOM 的顶级对象是document	BOM的顶级对象是window
DOM主要学习的是操作页面元素	BOM学习的是浏览器窗口交互的一些对象
DOM是W3C标准规范	BOM是浏览器厂商在各自浏览器上的定义的，兼容性较差

window对象是浏览器的顶级对象它具有双重角色。

1. 它是JS访问浏览器窗口的一个接口。
2. 它是一个全局对象。定义在全局作用域中的变量，函数都会变成window对象的属性和方法。
   在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等
   注意：window下的一个特殊属性window.name