BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

window的子对象

location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

常用属性和方法：

location.href  获取URLlocation.href="URL" // 跳转到指定页面location.reload() 重新加载页面

弹出框

语法：

alert("你个渣渣!");

DOM

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。

HTML DOM树

DOM标准规定HTML文档中的每个成分都是一个节点(node)：

• 文档节点(document对象)：代表整个文档
• 元素节点(element 对象)：代表一个元素（标签）
• 文本节点(text对象)：代表元素（标签）中的文本
• 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
• 注释是注释节点(comment对象)　

查找标签

直接查找

document.getElementById           // 根据ID获取一个标签document.getElementsByClassName   // 根据class属性获取document.getElementsByTagName     // 根据标签名获取标签合集

间接查找

parentElement            父节点标签元素children                 所有子标签firstElementChild        第一个子标签元素lastElementChild         最后一个子标签元素nextElementSibling       下一个兄弟标签元素previousElementSibling   上一个兄弟标签元素

节点操作

创建节点，添加节点

// 创建一个img标签(常用)var imgEle = document.createElement("img");// 找到id为d1的标签var d1Ele = document.getElementById("d1");// 把创建好的imgEle添加到id为d1的标签内部d1Ele.appendChild(imgEle)// 把增加的节点放到某个已有子节点的前边。d1Ele.insertBefore(newnode,某个节点);// 在d2Ele的内部，在d3Ele的前面插入一个新的aEled2Ele.insertBefore(aEle, d3Ele)

属性（内置属性）

// 设置imgEle标签的src属性imgEle.src="https://gss3.bdstatic.com/ea.jpg";// 给a标签设置文本内容aEle.innerText = "点我";// 给a标签设置属性aEle.href = "http://www.sogo.com/1.jpg";// 设置文本节点的值var divEle = document.getElementById("d1")divEle.innerHTML="
2
"// 获取文本节点的值divEle.innerTextdivEle.innerHTML

自定义属性

// 设置自定义属性var divEle = document.getElementById("d1");divEle.setAttribute("age","18")// 获取和删除divEle.getAttribute("age")divEle.removeAttribute("age")

删除节点

获得要删除的元素，通过父元素调用该方法删除。

somenode.removeChild(要删除的节点)

替换节点

somenode.replaceChild(newnode, 某个节点);d2Ele.replaceChild(aEle, sonPEle);

获取值操作

语法：

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);

class的操作

// 获取div标签（列表）var divEles = document.getElementByTagName("div");// 获取divEles中所有样式类名(字符串)，因为是列表所以加上[0]divEles[0].className// 上面className获取到的是字符串，修改不方面，所以还提供了classList方法// 删除指定类classListdivEles[0].classList.remove("c3") // 添加类 divEles[0].classList.add(cls)  // 存在返回true，否则返回falsedivEles[0].classList.contains(cls)  存在就删除，否则添加divEles[0].classList.toggle(cls)

指定CSS操作

divEles[0].style.backgroundColor="red"

对含有中横线的CSS属性（例如z-index），将中横线后面的第一个字母换成大写即可。

obj.style.zIndex

事件

常用事件

onclick 当用户点击某个对象时调用的事件句柄。

ondblclick 当用户双击某个对象时调用的事件句柄。

onfocus 元素获得焦点。 练习：输入框

onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

绑定方式

方式一：在标签里绑定触发事件

    
     点我
    

注意：

this是实参，表示触发事件的当前元素。

函数定义过程中的ths为形参。

方式二：

    
     点我
    
    
     点我
    
    
     点我
    

示例

示例1：select联动示例

    --请选择--    北京    上海