BOM：Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
DOM：Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。
navigator对象（了解即可）
浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。
navigator.appName // Web浏览器全称navigator.appVersion // Web浏览器厂商和版本的详细字符串navigator.userAgent // 客户端绝大部分信息navigator.platform // 浏览器运行所在的操作系统
screen对象（了解即可）
屏幕对象，不常用。
一些属性：
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度
history对象（了解即可）
window.history 对象包含浏览器的历史。
浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。
history.forward() // 前进一页history.back() // 后退一页
location对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
常用属性和方法：
location.href 获取URLlocation.href="URL" // 跳转到指定页面location.reload() 重新加载页面
弹出框
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框
语法：
alert("你看到了吗？"); 确认框（了解即可）
语法：
confirm("你确定吗？") 提示框（了解即可）
语法：
prompt("请在下方输入","你的答案") 计时相关
setTimeout()
语法：
var t=setTimeout("JS语句",毫秒) setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。
clearTimeout()
语法：
clearTimeout(setTimeout_variable)
举个例子：
// 在指定时间之后执行一次相应函数var timer = setTimeout(function(){alert(123);}, 3000)// 取消setTimeout设置clearTimeout(timer); setInterval()
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法：
setInterval("JS语句",时间间隔) 返回值
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
语法：
clearInterval(setinterval返回的ID值)
举个例子：
// 每隔一段时间就执行一次相应函数var timer = setInterval(function(){console.log(123);}, 3000)// 取消setInterval设置clearInterval(timer); DOM
DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
-
文档节点(document对象)：代表整个文档
-
元素节点(element 对象)：代表一个元素（标签）
-
文本节点(text对象)：代表元素（标签）中的文本
-
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
-
注释是注释节点(comment对象)
JavaScript 可以通过DOM创建动态的 HTML：
-
JavaScript 能够改变页面中的所有 HTML 元素
-
JavaScript 能够改变页面中的所有 HTML 属性
-
JavaScript 能够改变页面中的所有 CSS 样式
-
JavaScript 能够对页面中的所有事件做出反应
查找标签
直接查找
document.getElementById 根据ID获取一个标签document.getElementsByClassName 根据class属性获取document.getElementsByTagName 根据标签名获取标签合集
注意：
涉及到DOM操作的JS代码应该放在文档的哪个位置。
间接查找
parentElement 父节点标签元素children 所有子标签firstElementChild 第一个子标签元素lastElementChild 最后一个子标签元素nextElementSibling 下一个兄弟标签元素previousElementSibling 上一个兄弟标签元素
节点操作
创建节点
语法：
createElement(标签名)
示例：
var divEle = document.createElement("div"); 添加节点
语法：
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)；
把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);
示例：
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);
删除节点：
语法：
获得要删除的元素，通过父元素调用该方法删除。
somenode.removeChild(要删除的节点)
替换节点：
语法：
somenode.replaceChild(newnode, 某个节点);
属性节点
获取文本节点的值：
var divEle = document.getElementById("d1") divEle.innerText
divEle.innerHTML
设置文本节点的值：
var divEle = document.getElementById("d1") divEle.innerText="1"
divEle.innerHTML="2
"
var divEle = document.getElementById("d1"); divEle.setAttribute("age","18") divEle.getAttribute("age") divEle.removeAttribute("age") // 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."
语法：
elementNode.value
适用于以下标签：
-
.input
-
.select
-
.textarea
var iEle = document.getElementById("i1"); console.log(iEle.value);
var sEle = document.getElementById("s1"); console.log(sEle.value);
var tEle = document.getElementById("t1"); console.log(tEle.value);
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
常用事件
绑定方式：
方式一：
点我
function changeColor(ths) { ths.style.backgroundColor="green";
}
注意：
this是实参，表示触发事件的当前元素。
函数定义过程中的ths为形参。
方式二：
点我
var divEle2 = document.getElementById("d2"); divEle2.οnclick=function () { this.innerText="呵呵";
}
事件示例：
// 全局变量 var t; // 步骤1 // 将当前时间填写到i1中 var now = new Date(); var i1Ele = document.getElementById('i1'); i1Ele.value = now.toLocalString(); // 步骤2(点开始，时间动起来)>>>(每隔一秒执行一次展示时间操作) // 将添加时间的功能封装成一个函数 function showTime(){ var now = new Date(); var i1Ele = document.getElementById('i1'); i1Ele.value = now.toLocalString(); }; // 页面一刷新先展示当前时间 showTime() // 找到开始按钮，绑定事件 var b1Ele = document.getElementById('b1'); b1Ele.onclick = function(){ // 判断是否已经开启过定时器了 if (!t){ // t指代定时器 t = setInterval(showTime,1000); } } // 步骤3(给停止按钮绑定事件，点击后清除定时器) var b2Ele = document.getElementById('b1'); b2Ele.onclik = function(){ clearInterval(t); // 清除指定的定时器 } // 步骤4(如果点击多次开始按钮，发现无法清除定时器) // 判断定时器是否已开启 // 选择相应的省份，跳出对应市 data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}; // 先提前将两个标签对象查找到 var pEle = document.getElementById('province'); var cEle = document.getElementById('city'); // 先展示省份信息 for (var province in data){ var proEle = document.createElement('option'); proEle.innerText = province; pEle.appendChild(proEle) } // 绑定变化事件 pEle.onchange = function () { // 获取对应的省信息 var currentProvince = pEle.value; // 将之前的省对应的市清除 cEle.innerHTML = ''; // 添加默认的请选择项 var newEle = document.createElement('option'); newEle.innerText = '请选择'; cEle.appendChild(newEle); // 获取当前省对应的市 relCity = data[currentProvince]; // 循环对应的市，添加到市对应的选择框中 for(var i=0;i window.onload
当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。
window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。