关于前端Dom的总结
- 简介
DOM (Document Object Model) 文档对象模型
DOM思想使用节点树(node tree)的概念来描述一个HTML页面，页面中的每一个元素、属性、文本都被认为是节点。此外，DOM还定义了一系列编程接口（DOM API），用来操作页面的任意一部分内容
在 js + DOM编程中，一般的编程思路是这样的：由js基本语法控制程序的执行逻辑，由DOM API进行元素的查找获取，进而再对元素进行增删改等操作
- 节点树
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title></title> </head> <body> <a href="http://www.baidu.com">百度一下</a> </body> </html>
- 节点类型
HTML页面中的主要节点有四种：文档节点、元素节点、属性节点、文本节点
DOM API提供了一个Node父接口表示任意类型的节点，同时提供了两个子接口：Document、Element分别表示整个文档和元素节点(当然，还提供了其他类型的子接口，如DocumentType、Attr、Text等)
- document对象
document对象是window对象的一个属性
document对象表示整个HTML页面，是DOM的核心对象
document对象是连接JavaScript和DOM的桥梁，使得我们可以在JavaScript环境中操作页面内容
document对象提供了查找获取元素节点的方法，所以document是DOM的编程入口，此外还提供了创建新节点的方法
- document获取元素
document对象提供了3个方法来查找获取想要的元素对象：
|
方法名 |
返回值 |
描述 |
|
getElementById(string) |
Element |
根据元素的id属性值获取元素 |
|
getElementsByTagName(string) |
NodeList |
根据元素的标签名获取元素 |
|
getElementsByName(string) |
NodeList |
根据元素的name属性值获取元素 |
NodeList操作
获取NodeList中包含的元素个数 nodeList.length
获取指定索引位置的元素nodeList.item(index)
注意：NodeList是动态更新的，即如果删除的元素也在NodeList里面，那么也同时从NodeList里面删除
- document操作元素
创建元素、添加元素
document.createElement(tagName) 根据元素标签名称创建元素节点
appendChild(node) 添加子节点
注：如果一个元素原本就在页面中，appendChild会先把元素从原来的父元素删除，再追加到新的父元素中（因为要添加的那个节点不一定是新创建的，可能是获取到页面中的一个节点）
- Element操作元素属性
直接使用element.attrName的方式操作属性值
以下方式只能操作HTML标准规定的属性，不能操作自定义属性
var attrValue = element.attrName;//获取属性值
element.attrName = attrValue;//给属性赋值
element.className;//获取和设置元素的class属性的值。因为class是关键字，所以操作class属性时使用className代替
在js中，操作checkbox、radio的checked属性，select的selected属性值时，使用true或false , 表单元素的disabled属性也是如此
通过方法操作属性
Element提供了3个方法来操作属性，而且可操作自定义属性
String getAttribute(String attrName) 获得属性值
void removeAttribute(String attrName) 删除指定属性
void setAttribute(String attrName, String attrValue) 修改/添加属性
- Element操作元素的子节点
子节点包括子元素和元素文本内容
element.getElementsByTagName() 根据子元素的标签名获取子元素
element.innerHTML 以字符串形式操作子节点
element.insertBefore(newNode, node) 在指定子节点前插入新子节点
element.appendChild(newNode) 在最后追加子节点
element.parentNode 获取元素的父元素
也可以使用element.innerText （IE、chrome）或者element.textContent（火狐）操作元素的文本内容（文本内容可以写成html代码字符串），但有浏览器兼容问题。
- Element操作元素样式
使用 element.style.propName 的方式可以直接操作某个样式属性。如：element.style.backgroundColor="gray"；
使用DOM和CSS操作元素样式的名称使用对比如下图
- 删除元素内容
element.removeChild(node); 删除子节点
element.attrName = null; 删除属性
element.innerHTML = null; 删除文本内容和子元素
- DOM事件机制
通常的，当浏览器状态改变、用户操作时都会触发一些事件。如用户点击了一个按钮，就触发了按钮的点击事件，按钮称为事件源。
当一个事件被触发时，浏览器就会创建一个event事件对象，这个事件对象包含和此事件相关的各种信息，如点击事件的事件对象包含点击位置的信息，可供编程人员使用。
如果希望当一个事件发生时针对这个事件做一些处理，就需要给该事件注册一个事件处理函数，当该事件真的发生时，该处理函数就会被浏览器自动调用
常见的事件有以下几类：窗体事件、鼠标事件、键盘事件、焦点事件等
页面加载完成事件
操作页面元素的js代码一定要写到页面加载完成里面，否则可能会因为没有加载完成导致元素取不到。如下是事件的基本用法：
<script type="text/javascript"> window.onload=function(){ //只有页面加载完成，才可确保id为div01的元素被获取到 var element = document.getElementById("div01"); alert(element); } </script>
注意：load是事件的名称，onload是元素的属性，用来给元素注册事件处理函数
鼠标事件
click、dblclick 鼠标单击、双击时触发
mouseover、mouseout 鼠标指针进入、离开元素时触发
mousemove 鼠标指针移动时触发（进入元素后）
mousedown、mouseup 鼠标按键按下、弹起时触发（进入元素后）
鼠标事件的event对象包含如下信息：
button 点击的哪个鼠标按键（0、1、2）
altKey、ctrlKey、shiftKey 点击时是否同时按下键盘的alt、ctrl、shift 键
clientX、clientY 鼠标指针的窗口坐标
screenX 、screenY 鼠标指针的屏幕坐标
处理事件的两种方式
1、通过DOM方式把事件处理函数赋值给事件属性（称为注册事件处理函数）
<script type="text/javascript"> window.onload=function(){ var element = document.getElementById("div01"); element.onclick = function(){ alert("点我了"); } } </script>
2、直接在HTML元素标签的事件属性上写要执行的代码
<div onclick="alert('点我了');" ></div>
3、注意：如果有个自定义函数fun1，第一种方式的写法为element.onclick=fun1;而第二种方式的写法为onclick="fun1();"
- this的使用
function fun1(){ alert(this); } onload = function(){ var obj = {"fun1":fun1 };//obj.fun1 = fun1; var btn = document.getElementById("btn"); btn.onclick = fun1; window.fun1(); //Window obj.fun1(); //Object btn.onclick(); //HTMLInputElement }
说明：如果this在函数fun1内，函数fun1以哪个对象的属性值的身份去执行，this就表示哪个对象。this的这个特性，很多时候非常有用，特别是在DOM的事件处理函数中
- 给一个事件注册多个事件处理函数
注册事件处理函数的方式会覆盖直接编写处理代码的方式，而且同时注册的多个处理函数也会发生覆盖，这就导致一个事件发生时我们只能做"一件事情"
为了可以给一个事件注册多个事件处理函数，DOM提供了另外一种注册方式：
addEventListener(事件名称, 处理函数);
同时提供了一个删除处理函数的方法：
removeEventListener(事件名称, 处理函数);
也可以使用代码模拟触发一个事件，如btn.onclick();，其实这只是直接调用了事件处理函数
注意：多次注册同一个函数效果只有一次。如果希望将来可以删除某个注册的处理函数，就应该拿到该处理函数的引用
<script type="text/javascript"> window.onload=function(){ document.getElementById("div01").addEventListener("click",function(){ alert(2); }) } </script>
- 事件冒泡
由于HTML元素可嵌套，就不可避免的出现当用户执行一个动作如点击时，会有多个元素触发点击事件。为了方便管理不至于混乱，DOM提供了事件冒泡机制。
事件冒泡：当若干嵌套的元素"同时"被触发某个事件时，最内层元素的事件最先被触发，事件依次往外传递。
如果某刻希望取消该事件的冒泡，可以使用event.stopPropagation()
- 键盘事件
keydown 键盘按键被按下
keyup 键盘按键被弹起
event事件对象的属性：
event.keyCode 被按下的按键的整数编码
<script type="text/javascript"> window.onload=function() { document.onkeydown = function () { alert(event.keyCode);//获取按下键的整数编码 } } </script>
- 取消浏览器的默认动作
对于某些元素的特点事件，浏览器会有一个默认的动作，如超链接触发点击事件时页面会跳转、表单提交事件被触发时表单数据会被提交到服务器、键盘按下在输入框中输入字符等
DOM提供了两种方式来取消浏览器的默认动作：在我们自己注册的处理函数中执行 event.preventDefault(); 或者return false;
注意：取消事件的浏览器默认动作和取消事件冒泡是不同的概念
