JavaScript入门（四）：JS的DOM操作

JS的DOM操作
- DOM简介
DOM，全称 Document Object Model 文档对象模型
- 文档
文档表示的就是整个的HTML网页文档
- 对象
对象表示将网页中的每一个部分都转换为了一个对象
- 模型
使用模型来表示对象之间的关系，这样方便我们获取对象
- 节点 Node
节点是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点
节点对象的类型：
-. 文档节点：整个HTML文档
-. 元素节点：HTML文档中的HTML标签
-. 属性节点：HTML标签的属性
-. 文本节点：HTML标签中的文本内容
节点的属性
-. nodeName
-. nodeType
-. nodeValue
- 事件 event
事件，指的是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScript 与 HTML 之间的交互就是通过事件实现的
- 绑定事件的响应函数：
1. 在元素的标签内部的指定的事件属性中，设置JS代码
我是一个按钮
2. 通过为元素的指定事件属性设置响应函数来处理事件
点我一下

var btn = document.getElementById("btn");
btn.onclick = function() {
....
};

- 文档的加载
浏览器在加载一个网页时，是从上至下一行一行加载的
因此如果我们将JS代码写在页面的上边，在JS代码执行时，页面还没有加载完毕将会导致我们无法正常获取到DOM对象
- 为了解决这个问题，我们有两种方式：
1. 将JS代码编写在body的结束标签之前
2. 将JS代码编写到window.onload = function(){}中，window的onload事件在页面加载完成之后才会触发
- DOM的查询方法
- 通过document调用
1. 根据元素的id属性值查找一个元素节点对象
document.getElementById(“id属性值”);
2. 根据标签名查找一组元素节点对象
document.getElementsByTagName(“标签名”);
3. 根据元素的name属性值查找一组元素节点对象
document.getElementsByName(“标签的name属性值”);
- 通过具体的元素节点调用
- 元素.getElementsByTagName(“标签名”);
- 根据标签名查找当前元素的后代元素
- 元素.childNodes
- 获取当前元素的所有的子节点
- 元素.children
- 获取当前元素的所有的子元素节点
- 元素.firstChild
- 获取当前元素的第一个子节点
- 元素.lastChild
- 获取当前元素的最后一个子节点
- 元素.parentNode
- 获取当前元素的父元素节点
- 元素.previousSibling
- 获取当前元素的前一个兄弟节点
- 元素.nextSibling
- 获取当前元素的后一个兄弟节点
- 读取&修改元素中的属性
- 读取的语法：元素.属性名
- 修改的语法：元素.属性名 = 属性值
- innnerHTML 和 innerText
- innerHTML 可以读取或设置元素内部的HTML代码
- innerText 可以读取或设置元素内部的文本内容
- 读取元素内部的文本内容：
1. 元素.innerHTML
2. 元素.innerText
3. 元素.firstChild.nodeValue
- 其他的DOM查询方法
- document.documentElement
- 获取页面的根元素（html元素）
- document.body
- 获取body元素
- document.getElementsByTagName(“body”)[0]
- document.all
- 获取页面中的所有元素
- document.getElementsByTagName(“*”)
- document.getElementsByClassName(“元素的class属性值”)
- 根据元素的class属性查询一组元素节点对象
- 不兼容IE8及以下的浏览器
- document.querySelector()
- 根据CSS选择器查询页面中的一个对象
- document.querySelectorAll()
- 根据CSS选择器查询页面中的一组对象
- 这两个方法使用方式一样，都是需要一个选择器的字符串作为参数，将会根据该选择器去页面中查询元素。
querySelector()只会找到第一个符合条件的元素，它的返回值是一个元素
querySelectorAll()会找到所有符合条件的元素，它的返回值是一个数组，即使只有一个符和条件它也会返回一个数组
- DOM的修改方法
- 通过document创建节点对象
- 创建一个元素节点
- document.createElement(“标签名”)
- 创建一个文本节点
- document.createTextNode(“文本内容”)
- 通过父节点添加、替换和删除子节点
- 添加子节点
- 父节点.appendChild(子节点)
- 将新的子节点插入到指定子节点的前边
- 父节点.insertBefore(前节点, 后节点)
- 使用新节点替换已有节点
- 父节点.replaceChild(新节点, 旧节点)
- 删除子节点
- 父节点.removeChild(子节点)
- 子节点.parentNode.removeChild(子节点)
- 样式的操作
- 操作内联样式【可读可写】
- 读取内联样式
- 语法：元素.style.样式名
- 修改内联样式
- 语法: 元素.style.样式名 = “样式值”
注意：样式名就是CSS中的样式名，但是如果样式名带有-，则需要将样式名修改为驼峰命名法，
　　　即将“-”去掉，“-”后的字母改大写。
　　　例如：background-color –> backgroundColor
- 读取元素当前的样式【只读】
- 正常的浏览器
/**
* 注意：该函数为window的方法，并且它的返回值是一个Object类型
*/
getComputedStyle(元素, 伪类) //一般情况下，第二个
- IE8及以下
元素.currentStyle
- 这两个都不能兼容所有的浏览器，所以我们可以自定义一个函数来处理兼容问题
例如：
function getStyle(obj , name) {
if(window.getComputedStyle) {
return getComputedStyle(obj,null)[name];
} else {
return obj.currentStyle[name];
}
}
- 异常处理（try…catch…finally）
语法：
try {
//可能出现异常的语句
} catch(e) {
//出现异常以后执行的语句
} finally {
//一定会执行的语句
}
- 其他样式相关的属性
clientHeight
clientWidth
- 获取元素的可见高度和宽度
- 包括元素的内容区和内边距
offsetHeight
offsetWidth
- 获取元素的可见框的高度和宽度
- 包括元素的内容区、内边距和边框
offsetParent
- 获取当前元素的定位父元素
- 离当前元素最近的开启了定位的祖先元素，如果都没有开启则返回body
offsetTop
offsetLeft
- 当前元素和定位父元素的偏移量
scrollHeight
scrollWidth
- 当前元素的滚动高度和宽度
scrollTop
scrollLeft
- 滚动条滚动的距离
- 判断滚动条是否滚动到底：
1.垂直滚动条
scrollHeight - scrollTop = clientHeight
2.水平滚动条
scrollWidth - scrollLeft = clientWidth
- 事件
- 事件对象
- 事件的响应函数在被调用时，每次都会有一个实参被传递进函数，这个实参就是事件的对象，在事件的对象中封装了当前事件的相关信息
比如：鼠标的座标，鼠标的按键，键盘的按键，目标元素。。。
- 获取事件对象的相关信息
1. 我们可以在事件的响应函数中定义一个形参对事件对象进行引用
2. 但是在IE8中并没有将事件对象作为实参传递，而是作为window对象的属性保存
- 例子：
button.onclick = function(event) {
event = event || window.event
};
- 事件的冒泡【&捕获】
- 事件的冒泡指的是事件的向上传播，当元素上的事件被触发时，其祖先元素上的相同事件也会被触发。
- 取消冒泡
通过事件对象的cancelBubble属性设置为true，即可取消冒泡
- 捕获&冒泡
1. 事件的捕获阶段
从祖先元素向目标元素进行事件的捕获，但是此时不会触发事件
2. 目标阶段
目标元素捕获到这一事件
3. 事件的冒泡阶段
从目标事件向祖先元素进行事件的冒泡，并且在此阶段触发事件
- 事件的绑定
- addEventListener()
通过该方法也可以为一个元素绑定响应函数，而且它可以同时为一个元素的同一个事件绑定多个响应函数
- 参数：
1. 事件类型的字符串 eventStr（不要 on）
2. 事件的回调函数 callback
3. 是否在捕获阶段触发事件，一般情况下，我们传入false
- 需要注意：该函数不支持IE8及以下的浏览器
- attachEvent()
- 作用和上述方法一致，兼容IE浏览器
- 参数：
1. 事件类型的字符串（要 on）
2. 事件的回调函数