小汤学编程之JavaScript学习day05——DOM、事件

一、DOM

1.DOM树状结构图     2.节点类型     3.document节点     4.element节点     5.CSS

二、事件链

1.JS的继承结构图     2.常用事件句柄     3.事件的绑定     4.表单效验     5.事件的传播     6.event对象     7.事件的委托/代理

---

一、DOM

DOM文档对象模型 (Document Object Model） 使 JavaScript 有能力与当前文档对话。

1.DOM树状结构图

任意的文档都可以绘制成树状结构，在DOM树上，每个元素都可与看做一个对象，每个对象都叫做一个节点(node)。docunment就是一个对象，这个对象指代的是这个文档。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

2.节点类型

（不考虑注释）

节点类型	说明
document	文档节点
element	元素节点
attribute	属性节点
text	文本节点

3.document节点

属性

属性	说明
.nodeName	节点名
.nodeType	节点类型
.nodeValue	节点属性

方法

方法	说明
.getElementById("")	返回带有指定Id的元素，结果为dom对象
.getElementByTagName("")	返回带有指定标签名的所有元素，结果为dom对象数组
.getElementByClassName("")	返回带有指定类名的所有元素，结果为dom对象数组
.getElementByName("")	返回带有指定名称的所有元素，结果为dom对象数组
.querySelector("")	返回文档中匹配指定css选择器的第一个元素，结果为dom对象
.querySelectorAll("")	返回文档中匹配指定css选择器的所有元素，结果为dom对象数组
.createElement("")	创建一个指定标签名的元素节点
.creatAttribute("")	创建一个指定属性名的属性节点
.creatTextNode("")	创建一个指定内容的文本节点

前六个为查找方法，后三个为创建方法。
创建方法通常与 appendChild() 方法一起使用，达到增加HTML结构的目的。

// 通过document创建一个h1元素节点
var newH1 = document.createElement("h1");
// 通过document创建一个class属性节点
var att1 =  document.createAttribute("class");
att1.value = "my_class" ;
// 通过document创建一个文本节点
var text2 = document.createTextNode("我们正在学习JS的DOM.");
// 把属性节点设置到对应的元素节点上
newH1.setAttributeNode(att1);
// 把文本节点设置到对应的元素节点上
newH1.appendChild(text2);
// 将创建的h1加入到body中
document.body.appendChild(newH1);

4.element节点

属性

属性	说明
.nodeName	节点名（标签名）
.nodeType	节点类型
.nodeValue	节点属性
.innerText	设置或返回元素内部的文本
.innerHTML	设置或返回元素的内部HTML
.outerHTML	设置或返回元素的外部HTML（包括自己本身的标签）
.id/.className/.tagName	设置或返回元素的id/class/标签名
.offsetHeight/.offsetWidth	返回元素的高度/宽度
.offsetLeft/.offsetTop	返回元素的水平/垂直偏移位置（相对于窗口）
.childNodes/.children	返回节点的子节点集合（childNodes会把折叠的空白也算作一个子节点，而children不会。）
.firstchild/.firstElementChild	返回元素的第一个子元素（.firstchild/.firstElementChild 返回元素的第一个子元素）
.lastChild/.lastElementChild	返回元素的最后一个子元素（.lastChild/.lastElementChild 返回元素的最后一个子元素）
.nextSibling/.nextElementSibling	返回位于相同节点树层级的下一个节点（nextSibling计算空白，而nextElementSibling不会。）
.previousSibling/.previousElementSibling	返回位于相同节点树层级的上一个节点（previousSibling 计算空白，而previousElementSibling不会。）
.parentNode	返回元素的父节点

方法

方法	说明
.getElementByTagName("")	返回带有指定标签名的所有元素，结果为dom对象数组
.removeChild()	从元素中移除子节点
.remove()	删除当前节点
.replaceChild( , )	用新节点替换某个子节点（第一个参数为新节点，后者为旧节点）
.setAttribute()/.getAttribute()	设置/获取元素的属性值
.setAttributeNode()/.getAttributeNode()	设置/返回指定的属性节点
.insertBefore( , )	在指定的子节点前插入新的子节点（新节点参数在前，指定节点参数在后）
.cloneNode()	克隆节点并返回克隆（参数默认为false，表示只克隆节点跟属性，为true表示克隆节点跟属性及其后代）

5.CSS

内联样式

我们可以通过 元素.style.属性 或者 元素.style["属性"] 来获取或者设置元素的内联样式。如果属性是多个单词需要使用小驼峰命名。

生效样式

很多样式我们是定义在内部或者外部，只查看内联样式没意义，我们可以查看元素的生效样式而不用管是定义在哪里。

• IE浏览器：元素.currentStyle.属性
• 非IE浏览器：getComputedStyle(元素)[属性]

兼容样式

由于IE跟非IE浏览器的样式访问不太一样，我们可以自定义一个方法，来兼容所有浏览器。

/*
ele:要查看样式的元素。
styleName：要查看的样式名，字符串形式。
*/
function getStyleValue(ele,styleName){
    return ele.currentStyle?ele.currentStyle[styleName]:getComputedStyle(ele,null)[styleName];
}

二、事件

有时候我们需要在达到某些条件的时候去执行 一段固定的JS代码。我们称之为事件。

1.事件的三要素

(1)事件源：用来发生事件的对象
(2)绑定事件：事件源与执行程序的绑定方式
(3)事件执行程序：事件触发后要执行的代码

2.常用事件句柄

句柄	说明
onabort	图像加载被中断
onblur	元素失去焦点
onchange	用户改变域的内容
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
onfocus	元素获得焦点
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedowm	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面

3.事件的绑定

• 方式一：直接在HTML中定义元素事件的相关属性

<button onclick="alert('hello')">按钮</button>
		
<button onclick="helloClk()">按钮</button>

<script>
    function helloClk(){
        alert('hello');
    }
</script>

缺点：html中写JS代码，强耦合，违反了“内容与行为相分离”的原则，少用。

• 方式二：直接在JS中定义元素事件的相关属性

<script>
	// 获取按钮元素
	var btn = document.getElementById("btn_id1");
	// 给按钮元素绑定事件句柄函数
	btn.onclick = helloClk;
	// 定义事件驱动函数
	function helloClk(){
    	alert('hello');
	}
</script>

解决了强耦合性，但只能给一个事件对象绑定一个事件类型。 绑定多个同一类型的事件的话后面覆盖前面的。

• 方法三：高级事件处理方式（addEventListener）

<script>
	// 获取按钮元素
	var btn = document.getElementById("btn_id1");
	// 给按钮元素绑定事件句柄函数,可以绑定多个
	btn.addEventListener("click",btnClick1);
	// false表示事件冒泡阶段执行，true表示事件捕获阶段执行，默认false
	btn.addEventListener("click",btnClick2 ,false);

	function btnClick1(){
   		alert('hello1');
	}
	function btnClick2(){
    	alert('hello2');
	}
	// 把btn上的click事件的btnClick1解除绑定
	btn.removeEventListener("click",btnClick1);
</script>

• 可以为一个元素绑定多个监听函数，都会得到执行。
• 匿名事件无法解绑。
• IE使用的是detachEvent / attachEvent

4.表单效验

对于JAVA工程师来说，前端与后台的数据交互是及其重要的，而表单的提交就是前端与后台的重要的数据交互。为了提交表单时数据更加合理，减轻后台的压力，在提交表单时进行校验是非常有必要的。

• 第一步：在表单标签中绑定onsubmit事件，调用校验函数，通过返回值控制是否提交。
• 第二步：在校验函数中使用过md5方法对密码进行加密。
• 第三步：改为使用隐藏域来提交密码。

<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.9.0/js/md5.min.js"></script>
...
<form id="my_form" action="#" method="post" onsubmit="return check()">
    用户名： <input id="user_name" name="userName" /> <br/>
    密 码： <input id="user_input_pwd" type="password" /> <br/>
    <!-- 隐藏域，值用来保存密码md5加密后的结果，提交到后台 -->
    <input id="user_hidden_pwd" type="hidden" name="userPwd" />
    <input type="submit" />
</form>
...
function check(){
    var name = document.getElementById("user_name").value;
    var pwdInput = document.getElementById("user_input_pwd") ;
    var pwd = pwdInput.value;

    var pwdHidden = document.getElementById("user_hidden_pwd") ;
    if(name.length < 6){
        alert("用户名长度必须不低于6位");
        return false ;
    }
    if(pwd.length < 6){
        alert("密码长度必须不低于6位");
        return false ;
    }
    pwdHidden.value = md5(pwd); 
    return true;
}

5.事件的传播

事件传播示意图

JS中的事件创建后，会按照如下过程在HTML元素间进行传播。IE的事件模型是没有捕获阶段的。

三个阶段

• 事件捕获：事件对对象沿DOM树向下传播
• 目标出发：运行事件监听函数
• 事件冒泡：事件沿DOM树向上传播

6.event对象

事件处理函数中有一个绑定事件的对象，有时候我们需要用到里面的一些重要属性。

属性	说明
.target	返回出发此事件的元素
.type	返回事件的类型，如click
.clintX/.clintY	返回当事件被触发时，鼠标指针的水平/垂直坐标
.offsetX/.offsetY	返回当事件被触发时，鼠标指针相对于事件源的水平/垂直坐标
.keyCode	对于按键事件，返回按键的码
.preventDefault	取消事件的默认动作（若存在），比如超链接、表单
.stopPropagation()	阻止事件的继续传播
.cancelable	示事件是否有可取消的默认动作，设置成true表示阻止事件传播，同stopPropagation()

7.事件的委托/代理

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

比如需要给ul下的li绑定事件，可以利用事件传播机制，直接给ul绑上事件即可：

ul.onclick = function(event){
    if(event.target.nodeName.toLowerCase() == 'li'){
        alert(event.target.innerText);
    }
}