小白笔记中的javaScript中的BOM与DOM
简单介绍一下BOM与DOM：
BOM是浏览器对象模型（Browser Object Model ）
DOM是文档对象模型（Document Object Model）
书签
javaScript之BOM
BOM中的中的核心是window对象，另外还包含window对象的子对象。
window对象
window对象的方法：
| window对象的方法 | 描述 |
|---|---|
| window.innerHeight | 浏览器窗口的内部高度 |
| window.innerWidth | 浏览器窗口的内部宽度 |
| window.open() | 打开新窗口 |
| window.close() | 关闭当前窗口 |
| window.moveTo() | 移动当前窗口 |
| window.resizeTo() | 调整当前窗口的尺寸 |
navigator对象
navigator对象是window对象的子对象，主要用于查看访问者浏览器的信息
| navigator对象的方法 | 描述 |
|---|---|
| navigator.appName | web浏览器的全称 |
| navigator.appVersion | web浏览器的版本信息 |
| navigator.userAgent | 客户端的信息 |
| navigator.platform | 浏览器运行所在的操作系统 |
screen对象
screen对象是window对象的子对象，主要包含用户屏幕的信息
| screen对象的方法 | 描述 |
|---|---|
| screen.availWidth | 查看可用屏幕的宽度 |
| screen.availHeight | 查看可用屏幕的高度 |
history对象
history对象是window对象的子对象，主要包含浏览器的历史行为
| history对象的方法 | 描述 |
|---|---|
| history.back() | 后退一页 |
| history.forward() | 前进一页 |
| history.go(n) | 浏览器历史跳转 |
对history.go(n)方法的补充：
history.go(1)==history.forward() 前进一页
history.go(-1)==history.back() 后退一页
history.go(0) 刷新页面
location对象
location对象是window对象的子对象，主要用于获取地址以及页面的跳转
| location对象的方法 | 描述 |
|---|---|
| location.href | 获取当前页面的url |
| location.href="newurl" | 跳转到指定的newurl页面 |
| locaton.reload() | 重新加载页面 |
弹出框
弹出框主要用于创建消息窗口，其中包含警告框、确认框、提示框（都是window对象的方法）。
| 弹出框的内容 | 介绍 | 详细描述 |
|---|---|---|
| alert() | 警告框 | 警告框包含一个确定按钮。当警告框出现后，用户需要点击确定按钮才能继续进行操作。 |
| confirm() | 确认框 | 确认框包含一个确定按钮和一个取消按钮。当确认框出现后，用户点击确认会返回true，点击取消会返回false。 |
| prompt() | 提示框 | 提示框包含确定按钮，取消按钮和输入框。当提示框出现后，用户可在输入框输入内容，接着用户点击确定会返回输入框内容，点击取消则返回null。 |
计时
计时主要用于定时与计时（都是window对象的方法）。
| 计时的内容 | 描述 |
|---|---|
| setTimeout("js语句","毫秒") | 在指定的一个时间后执行指定代码 |
| setInterval("js语句","毫秒") | 在指定时间间隔后不停地执行指定代码 |
| clearTimeout() | 用于停止setTimeout的定时 |
| clearInterval() | 用于停止setInterval()的计时 |
javaScript之HTML-DOM
简单的说，就是可以通过javaScript制作动态的html。
- javaScript 能够改变页面中的所有 HTML 元素
- javaScript 能够改变页面中的所有 HTML 属性
- javaScript 能够改变页面中的所有 CSS 样式
- javaScript 能够对页面中的所有事件做出反应
在BOM中，html中的所有内容都是节点：
文档节点document：代表整个文档
元素节点element：代表一个元素（标签）
文本节点text：代表元素（标签）中的节点
属性节点attribute：代表一个属性，（元素（标签）才有属性）
注释节点comment：注释
下面开始介绍BOM的方法：
直接查找：主要通过三种方式查找指定的html元素，分别是通过id查找，通过标签名查找，通过类名查找。
| 直接查找 | 描述 |
|---|---|
| document.getElementById() | 通过id查找 |
| document.getElementsByTagName() | 通过标签名查找 |
| document.getElementsByClassName() | 通过class类名查找 |
间接查找：主要通过已有的位置进行寻找。（dom代表目前节点）
| 间接查找 | 描述 |
|---|---|
| dom.parentElement | 父节点标签元素 |
| dom.children | 所有子标签 |
| dom.firstElementChild | 第一个子标签元素 |
| dom.lastElementChild | 最后一个子标签元素 |
| dom.nextElementSibling | 下一个兄弟标签元素 |
| dom.previousElementSibling | 上一个兄弟标签元素 |
节点操作：主要进行节点的创建，添加，删除，替换。
| 节点操作 | 描述 |
|---|---|
| document.createElement(标签名) | 创建一个节点 |
| dom.appendChild(newdom) | 添加节点。在dom节点的最后追加一个newdom子节点 |
| dom.inserBofore(newdom,somedom) | 添加节点。在dom节点的somedom子节点前面追加一个newdom子节点 |
| removeChild(dom) | 删除节点。删除dom节点 |
| dom.replaceChild(newdom,somedom) | 替换节点。将dom节点中子节点的somedom替换成newdom |
节点-HTML：主要进行节点对html进行操作
| 节点-HTML | 描述 |
|---|---|
| dom.getAttribute(属性) | 通过节点获取某一属性的属性值 |
| dom.setAttribute(属性,属性值) | 通过节点修改某一属性的属性值 |
| dom.removeAttribute | 通过节点删除某一属性 |
| dom.value | 获取某一节点的value值 |
| dom.innerText | 获取文本内容（不包括标签） |
| dom.innerHTML | 获取文本内容以及标签名 |
节点-CSS：主要进行节点对css进行操作。（dom代表目前节点）
| 节点-CSS | 描述 |
|---|---|
| className | 获取所有样式的类名 |
| classList.remove(cls) | 删除指定类 |
| classList.add(cls) | 添加类 |
| classList.contains(cls) | 查看是否存在某一类，存在就返回true，否则返回false |
| classList.toggle(cls) | 查看是否存在某一类，存在就删除，否则就添加 |
| dom.style.xxx="n" | 将dom节点css的xxx属性的属性值改成n |
DOM事件：使 JavaScript 有能力对 HTML 事件做出反应。
| 常用事件 | 描述 |
|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄 |
| ondblclick | 当用户双击某个对象时调用的事件句柄 |
| onfocus | 元素获取焦点 |
| onblur | 元素失去焦点 |
| onchange | 域的内容被改变 |
| onkeydown | 某个键盘按键被按下 |
| onkeypress | 某个键盘按键被按下并松开 |
| onkeyup | 某个键盘按键被松开 |
| onload | 一张页面或一幅图像完成加载 |
| onmousedown | 鼠标按钮被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标移到某元素上 |
| onselect | 在文本框中的文本被选中时发生 |
| onsubmit | 确认按钮被点击，使用对象是form |
标签绑定DOM事件：绑定事件有两种方法：通过标签绑定，通过js绑定标签
通过标签绑定
<!--通过标签绑定-->
<button id="b1" onclick="change();">点击</button>
<script>
function change(){
/*你想执行的js语句*/
}
</script>
通过js绑定标签
<!--通过js绑定标签（html文档）-->
<button id="b2" onclick="change();">点击</button>
/*通过js绑定标签（js文档）*/
var b2Ele=document.getElementById("b2");
b2Ele.onclick=function(){
/*你想执行的js语句*/
}
以上就是我对BOM与DOM记录下的笔记（或许不是很全面）。如果有理解错的地方，还希望多多指教。