Document Object Model——文档对象模型
DOM
常用：
document.getElementById("id属性的值"); 根据id属性的值获取元素,返回来的是一个元素对象
document.getElementsByTagName("标签名字"); 根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.getElementsByName("name属性的值")； 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.getElementsByClassName("类样式的名字")； 根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.querySelector("选择器的名字"); 根据选择器获取元素,返回来的是一个元素对象
document.querySelectorAll("选择器的名字")； 根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
DOM的功能：
页面中的节点，通过构造函数，构造出对象。
DOM 事件
遵循dom level 2 标准
一个容易混淆的例子(DOM level 0)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script> function print(){ console.log('hi') } </script> </head> <body> <button id=X onclick="print">A</button> <button id=Y onclick="print()">B</button> <button id=Z onclick="print.call()">C</button> <!-- onclick="要执行的代码",等价于 eval("要执行的代码")--> </body> </html>
X.onclick = print; //print为函数对象 Y.onclick = print(); //undefined Z.onclick = print.call(); //undefined
- 绑定事件
三种方式
1.对象.on事件名字=事件处理函数
xxx.onclick = function(){console.log(1)} xxx.onclick = function(){console.log(2)} //最终输出结果是2 //onclick属性具有唯一性，会覆盖
//解绑：xxx.onclick=null
2.对象.addEventListener（"没有on的事件名字"，事件处理函数，false）--false（冒泡） true（捕捉）
xxx.addEventListener('click',function(){console.log(1)})
xxx.addEventListener('click',function(){console.log(2)})
//最终输出1 2 队列
//xxx拥有一个队列，先出现先触发，互不影响
//队列的实质：数组
//解绑：xxx.removeEventListener('click',...)
3.对象.attachEvent（"有on的事件名字"，事件处理函数)
xxx.attachEvent("onclick",function(){});
//解绑：对象.detachEvent（“on事件类型”，函数名字）
三者区别：
1.支持的浏览器不一样
addEventListener支持谷歌、火狐、IE11，不支持IE8
attachEvent支持IE8，不支持IE11、谷歌、火狐
2.this不同
addEventListener中的this是当前绑定事件的对象
attachEvent中的this是window
- 事件三阶段：
事件捕获阶段，事件目标阶段，事件冒泡阶段
<div id="A">A <div id="B">B <div id="C">C</div> </div> </div> <!-- 当点击C时，三个函数都会被调用 -->
A.addEventListener('click',function fn1 (){console.log(A),第三个参数})
A.addEventListener('click',function fn1 (){console.log(A),第三个参数})
A.addEventListener('click',function fn1 (){console.log(A),第三个参数})
// fn1 fn2 fn3 的执行顺序
// 不传第三个参数或传false CBA
// 传true ABC
*若捕获冒泡在同一处触发，那么按照队列顺序来
阻止冒泡
待补充...