DOM
Document Object Model 文档对象模型
JS中通过DOM来对HTML文档进行操作。
只有了解了DOM就能够得心应手的操作WEB页面
文档
文档示意的就是整个HTML网页文档
对象
对象示意将网页中的每一个局部都转换为了一个对象。
模型
应用模型来示意对象之间的关系，这样不便咱们获取对象。
节点
节点：Node，形成网页的最根本的组成部分，网页中的每一个局部都能够称为一个节点
罕用节点分为四类
文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容
比方：html标签，属性，文本，正文，整个文档等都是一个节点
尽管都是节点，然而实际上他们的具体类型是不同的
比方：标签咱们称为元素节点，属性称为属性节点，文本称为文本节点，文档称为文档节点。
节点的类型不同，属性和办法也都不尽相同。
事件的简介
事件，就是文档或浏览器窗口产生的一些特定的交互霎时
JavaScript与HTML之间的交互是通过事件实现的
对于Web利用来说，有上面这些代表性的事件：点击某个元素，将鼠标挪动至某个元素上方，按下键盘上某个键等等
//处理事件 //咱们能够在事件的对应属性中设置一些js代码//这样当事件被触发时，这些代码将会执行//这种写法咱们称为构造和行为耦合，不不便保护，**不举荐应用** <button id="btn" onclick="alert('厌恶，点我干嘛')">我是一个按钮</button><script type = "text/javascript"></script>能够为按钮的对应事件绑定处理函数的模式来响应事件
这样当事件被触发时，其对应的函数将会被调用
获取对象
var btn = document.getElementById("btn");绑定一个单机事件
像这种为单机事件绑定的函数，咱们称为单机响应函数
btn.onclick = function(){ alert("你还点");};文档的加载
浏览器在加载一个页面时，是依照自上向下的程序加载的
读取到一行就运行一行，如果将script标签现到页面的上边，
在代码执行时，页面还没有加载DOM对象也没有加载，会导致无奈获取到DOM对象
将js 代码编写到页面下部就是为了能够在页面加载结束后在执行js代码
onload事件会在整个页面加载实现之后才触发
为window绑定一个onload事件
该事件对应的响应函数将会在页面加载实现之后执行
这样能够确保咱们的代码执行时所有的DOM对象曾经加载结束了
先加载后执行
<button id="btn">我是一个按钮</button> //bodywindow.onload = function(){ //scriptvar btn = document.getElementById("btn"); btn.onclick = function(){ alert("你还点"); };};DOM查问
获取元素节点
通过document对象调用
1.getElementById()
通过id属性获取一个元素节点对象
2.getElementsByTagName()
通过标签名获取一组元素节点对象
3.getElementByName()
通过name属性获取一组元素节点对象
获取元素节点的子节点
通过具体的元素节点调用
1.getElementsByTagName()
办法，返回以后节点的指定标签名后辈节点
2.childNodes
属性，示意以后节点的所有子节点
3.firstChild
属性，示意以后节点的第一个子节点
4.lastChild
属性，示意以后节点的最初一个子节点
获取body
在document中有一个属性body，它保留的是body的援用
var body = document.body;html根标签
document.documentElement保留的是html根标签
var html = document.doucumentElement;依据元素的class属性值查问一组元素节点对象
gentElementsByClassName()能够依据class属性值获取一组元素节点对象，
然而该办法不反对IE8及以下的浏览器
var box1 = document.gentElementsByClassName("box1");document.querySelector()
须要一个选择器的字符串作为参数，能够依据一个css选择器来查问一个元素节点对象
尽管ie8中没有gentElementsByClassName，然而能够应用document.querySelector()代替
应用该办法总会返回惟一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
document.querySelectorAll()
该办法与document.querySelector()用法相似，不同的是它会将查问的元素封装到一个数组
即便符合条件的元素只有一个，他也会返回数组
DOM查问
通过具体的元素节点来查问
元素.getElementsByTagName()通过标签名查问以后元素的指定后辈元素
元素.childNodes获取以后元素的所有子节点
会获取到空白的文本子节点
元素.children获取以后元素的所有子元素
元素.firstChild获取以后元素的第一个子节点
元素.lastChild获取以后元素的最初一个子节点
元素.parentNode获取以后元素的父元素
元素.previousSibling获取以后元素的前一个兄弟节点
元素.nextSibling获取以后元素的后一个兄弟节点
innerHTML和innerText
这两个属性并没有在DOM规范定义，然而大部分浏览器都反对这两个属性
两个属性作用相似，都能够获取到标签外部的内容，
不同是innerHTML会获取到html标签，而innerText会主动去除标签
如果应用这两个属性来设置标签外部的内容时，没有任何区别的
读取标签外部的文本内容
<h1>h1中的文本内容</h1> 元素.firstChild.nodeValue document对象的其余的属性和办法
document.all获取页面中的所有元素，相当于document.getElementsByTagName("*");
document.documentElement获取页面中html根元素
document.body获取页面中的body元素
document.getElementsByClassName()依据元素的class属性值查问一组元素节点对象
这个办法不反对IE8及以下的浏览器
document.querySelector()依据CSS选择器去页面中查问一个元素
如果匹配到的元素有多个，则它会返回查问到的第一个元素
document.querySelectorAll() 依据CSS选择器去页面中查问一组元素
会将匹配到所有元素封装到一个数组中返回，即便只匹配到一个
DOM批改
document.createElement()能够依据标签名创立一个元素节点对象
document.createTextNode()能够依据文本内容创立一个文本节点对象
父节点.appendChild(子节点)向父节点中增加指定的子节点
父节点.insertBefore(新节点,旧节点)将一个新的节点插入到旧节点的前边
父节点.replaceChild(新节点,旧节点)应用一个新的节点去替换旧节点
父节点.removeChild(子节点)删除指定的子节点
举荐形式：子节点.parentNode.removeChild(子节点)DOM对CSS的操作
读取和批改内联款式
- 应用style属性来操作元素的内联款式
读取内联款式：
语法：
元素.style.款式名
例子：
元素.style.width
元素.style.height
留神：如果款式名中带有-，则须要将款式名批改为驼峰命名法
将-去掉，而后-后的字母改大写
比方：background-color --> backgroundColor
border-width ---> borderWidth
批改内联款式：
语法：
元素.style.款式名 = 款式值通过style批改的款式都是内联款式，因为内联款式的优先级比拟高，
所以咱们通过JS来批改的款式，往往会立刻失效，
然而如果款式中设置了!important，则内联款式将不会失效。
读取元素的以后款式
失常浏览器
应用getComputedStyle()这个办法是window对象的办法，能够返回一个对象，这个对象中保留着以后元素失效款式
- 参数： 1.要获取款式的元素 2.能够传递一个伪元素，个别传null例子：
获取元素的宽度
getComputedStyle(box , null)["width"];通过该办法读取到款式都是只读的不能批改
- IE8 - 应用currentStyle - 语法： 元素.currentStyle.款式名 - 例子： box.currentStyle["width"] - 通过这个属性读取到的款式是只读的不能批改其余的款式相干的属性
留神：以下款式都是只读的
clientHeight元素的可见高度，指元素的内容区和内边距的高度
clientWidth元素的可见宽度，指元素的内容区和内边距的宽度
offsetHeight整个元素的高度，包含内容区、内边距、边框
offfsetWidth整个元素的宽度，包含内容区、内边距、边框
offsetParent以后元素的定位父元素
离他最近的开启了定位的先人元素，如果所有的元素都没有开启定位，则返回body
offsetLeft offsetTop以后元素和定位父元素之间的偏移量
offsetLeft程度偏移量 offsetTop垂直偏移量
scrollHeight scrollWidth获取元素滚动区域的高度和宽度
scrollTop scrollLeft获取元素垂直和程度滚动条滚动的间隔
判断滚动条是否滚动到底
垂直滚动条
scrollHeight - scrollTop = clientHeight 程度滚动
scrollWidth - scrollLeft = clientWidth 事件（Event）
事件对象
当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，
这个事件对象中封装了以后事件的相干信息，比方：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。。
能够在响应函数中定义一个形参，来应用事件对象，然而在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保留
- 例子： 元素.事件 = function(event){ event = event || window.event; }; 元素.事件 = function(e){ e = e || event; }; 事件的冒泡（Bubble）
事件的冒泡指的是事件向上传导，当后辈元素上的事件被触发时，将会导致其先人元素上的同类事件也会触发。
事件的冒泡大部分状况下都是无益的，如果须要勾销冒泡，则须要应用事件对象来勾销
能够将事件对象的cancelBubble设置为true，即可勾销冒泡
- 例子： 元素.事件 = function(event){ event = event || window.event; event.cancelBubble = true; };