前端理论总结（js）——DOM、BOM

什么是DOM？

DOM 指的是Document Object Model（文档对象模型），它指的是把文档当做一个对象来对待，这个对象主要定义了处理网页内容的方法和接口。

有什么用？

就是为了操作 HTML 中的元素，比如说我们要通过 JS 把这个网页的标题改了，直接这样就可以了：

document.title = 'how to make love';

DOM的操作方法

document.getElementById(‘id’)                                   通过元素 id 来查找元素 
document.getElementsByTagName(‘name’)               通过标签名来查找元素
document.getElementsByClassName(‘class’)             通过类名来查找元素
document.getElementsByName(‘name’)                     通过表单元素中 name 名查找元素
document.querySelector(‘CSS 选择器’)                 通过 CSS 选择器获取匹配上的第一个元素
document.querySelectorAll(‘CSS 选择器’)             通过 CSS 选择器获取匹配上的所有元素
document.createElement(tagname)                       创建一个由tagName决定的HTML元素
document.createTextNode(data)                            创建一个文本节点，文本内容为data
元素.innerHTML = 内容                                     改变元素的内容（包含内部标签）可识别标签
元素.属性 = 属性值                                                 改变 HTML 元素的属性值
元素.style.样式 = 样式值                                         改变 HTML 元素的样式

什么是BOM？

BOM 指的是Browser Object Model（浏览器对象模型），它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的方法和接口。BOM
的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。

这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者方法存在。window 对象含有 location 对象、navigator 对象、screen 对象等子对象，并且 DOM 的最根本的对象 document 对象也是 BOM 的 window 对
象的子对象。

有什么用？

为了控制浏览器的行为

BOM的操作方法

window.open()                     打开新窗口
window.close()                     关闭当前窗口
window.moveTo()                 移动当前窗口
window.resizeTo()                 调整当前窗口的尺寸
window.innerWidth               浏览器窗口宽度
window.innerHeight              浏览器窗口高度
window.history.back()           加载历史列表中的上一个 URL（后退）
window.history.go(number)  加载历史列表中某个页面
alert()                                    警告框
confirm()                               确认框
prompt()                                提示框

ヾ(￣▽￣)Bye~Bye~