DOM
- 事件：
事件就是用户与浏览器的交互行为。
HTML 事件可以是浏览器行为，也可以是用户行为。
-
以下是 HTML 事件的实例：
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
通常，当事件发生时，你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
-
常用的事件
事件 描述 onchange HTML 元素改变 onclick 用户点击 HTML 元素 onmouseover 用户在一个HTML元素上移动鼠标 onmouseout 用户从一个HTML元素上移开鼠标 onkeydown 用户按下键盘按键 onload 浏览器已完成页面的加载 -
绑定事件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="but" value="按钮">按钮</button> <script type="text/javascript"> let element = document.getElementById("but"); element.onclick= function () { alert("hello! jsDOM") } </script> </body> </html> -
文档的加载
文档的加载是自上而下的，所以要想在上面使用 js，得在页面加载完成之后再加载
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload = function () { alert("Hello! word") } </script> </head> <body> </body> </html> -
获取节点对象
通过document
- getElementById(elementId)：通过Id获取节点 返回一个Object
- getElementsByName(elementName)： 通过name获取节点 返回一个Object的数组
- getElementsByTagName(tagName)：通过节点的Tag获取节点 返回一个Object的数组
通过父节点获取
parentObj.firstChild：如果节点为已知节点（parentObj）的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持parentObj.firstChild.firstChild.firstChild...的形式，如此就可以获得更深层次的节点。parentObj.lastChild：很显然，这个属性是获取已知节点（parentObj）的最后一个子节点。与firstChild一样，它也可以递归使用。 在使用中，如果我们把二者结合起来，那么将会达到更加令人兴奋的效果，即：parentObj.firstChild.lastChild.lastChild...parentObj.childNodes：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。
注意：经测试发现，在IE7上获取的是直接子节点的数组，而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。parentObj.children：获取已知节点的直接子节点数组。
注意：经测试，在IE7上，和childNodes效果一样，而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。parentObj.getElementsByTagName(tagName)：使用方法不再赘述，它返回已知节点的所有子节点中类型为指定值的子节点数组。例如：parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。
通过临近节点获取
neighbourNode.previousSibling：获取已知节点（neighbourNode）的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。neighbourNode.nextSibling：获取已知节点（neighbourNode）的下一个节点，同样支持递归。
通过子节点获取
childNode.parentNode：获取已知节点的父节点。
-
图片切换练习
图片名是 1 2 3 递增
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } .main{ width: 610px; height: 350px; padding: 30px; margin: 50px auto; border: black solid 1px; text-align: center; } img{ width: 600px; height: 335px; } button { padding: 5px; margin: 5px; } </style> <script type="text/javascript"> window.onload = function () { let pre = document.getElementById("pre"); let next = document.getElementById("next"); let img = document.getElementsByTagName("img")[0]; let out = 1; pre.onclick = function () { if(out===1){ out=5; return; } if (out<=5){ out--; img.src="imgs/0"+out+".png" } }; next.onclick = function () { if(out===5){ out=1; return; } if (out<=5){ out++; img.src="imgs/0"+out+".png" } } } </script> <body> <div class="main"> <img src="imgs/01.png" alt=""> <button id="pre">上一张</button> <button id="next">下一张</button> </div> </body> </html> -
全选 反选练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin: 0; padding: 0; } .main{ width: 200px; height: 300px; margin: 100px auto; } label{ display: block; padding: 10px; } </style> <script type="text/javascript"> window.onload =function () { let item = document.getElementsByName("item"); let input = document.getElementsByClassName("input"); input[0].onclick = function () { for (let i =0;i<item.length;i++){ item[i].checked = true; } }; input[1].onclick = function () { for (let i =0;i<item.length;i++){ item[i].checked = false; } }; input[2].onclick = function () { for (let i =0;i<item.length;i++){ item[i].checked = !item[i].checked ; } } } </script> </head> <body> <div class="main"> <form action=""> <label><input type="checkbox" name="item"><span> 选项1</span></label> <label><input type="checkbox" name="item"><span> 选项2</span></label> <label><input type="checkbox" name="item"><span> 选项3</span></label> <label><input type="checkbox" name="item"><span> 选项4</span></label> <label><input type="checkbox" name="item"><span> 选项5</span></label> <input type="button" value="全选" class="input" > <input type="button" value="全不选" class="input"> <input type="button" value="反选" class="input"> </form> </div> </body> </html>
操作节点
-
其他获取节点
document.body获取bodydocument.documentElement获取htmldocument.all获取所有document.querySelector根据一个css选择器来查询一个元素节点对象 参数是一个字符串 选择器
-
添加元素
Document.createElement()创建一个节点Document.createTextNode()创建一个文本节点Document.createAttribute()创建并返回一个新的属性节点Document.createComment()创建并返回一个注释节点Document.createDocumentFragment()创建一个新的空的文档片段Node.appendChild()将一个节点添加到指定父节点的子节点列表末尾Element.classList.add()添加指定的类值classDocument.writeIn()将文本字符串写入打开的文档流Document.write()将文本字符串写入打开的文档流
-
删除元素
Element.removeAttribute()从元素中删除指定的属性Element.removeChild()删除子元素ChildNode.remove()删除元素parentNode判断node是否在DOM树中
-
修改元素
Node.innerText修改元素文本内容Element.innerHTML设置或获取描述元素后代的HTML语句node.cloneNode()拷贝元素(包括所有属性和值)Element.setAttribute()设置或者改变指定属性并指定值style修改元素CSS属性值Node.replaceChild()替换子节点
-
查找元素
attribute.getAttribute()返回元素的指定属性值Document.getElementsByClassName()返回一个节点列表（数组），包含了所有拥有指定 class 的子元素Document.getElementsByName()返回带有指定名称的对象集合Document.getElementsByTagName()返回带有指定标签名的对象集合Document.getElementById()返回对拥有指定 id 的第一个对象的引用Document.querySelector()返回文档中匹配指定的CSS选择器的第一元素Document.querySelectorAll()返回与指定的选择器组匹配的文档中的元素列表
-
增删改案例
实现该的话可以使用vaule属性
html
<body> <div id="total"> <div class="inner"> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> </div> </div> <div id="btnList"> <div><button id="btn01">创建一个广州节点，添加到#city下</button></div> <div><button id="btn02">将广州节点插入到#bj前面</button></div> <div><button id="btn03">使用广州节点替换#bj节点</button></div> <div><button id="btn04">删除#bj节点</button></div> <div><button id="btn05">读取#city内的html代码</button></div> <div><button id="btn06">设置#bj内的HTML代码</button></div> <div><button id="btn07">向city中添加广州</button></div> </div> </body>js
<script type="text/javascript"> window.function(){ //创建一个广州节点，添加到#city下 myClick("btn01",function(){ //<li>广州</li> //创建li元素节点 var li=document.createElement("li"); //创建广州文本节点 var gzTxt=document.createTextNode("广州"); //将gzTxt设置li的子节点 li.appendChild(gzTxt); //获取id为city的节点 var city=document.getElementById("city"); city.appendChild(li); }); //将广州节点插入到#bj前面 myClick("btn02", function() { //创建一个广州 var li=document.createElement("li"); var gzTxt=document.createTextNode("广州"); li.appendChild(gzTxt); //获取id为bj的节点 var bj=document.getElementById("bj"); //获取city var city=document.getElementById("city"); city.insertBefore(li, bj); bj.insertBefore(gz, bj); }); //使用广州节点替换#bj节点 myClick("btn03", function() { //创建一个广州 var li=document.createElement("li"); var gzTxt=document.createTextNode("广州"); li.appendChild(gzTxt); //获取id为bj的节点 var bj=document.getElementById("bj"); //获取city var city=document.getElementById("city"); city.replaceChild(li, bj); }); //删除#bj节点 myClick("btn04", function() { //获取id为bj的节点 var bj=document.getElementById("bj"); //获取city var city=document.getElementById("city"); city.removeChild(bj); //若不知道父元素是谁 //bj.parentNode.removeChild(bj); }); //读取#city内的html代码 myClick("btn05", function() { //获取city var city=document.getElementById("city"); alert(city.innerHTML); }); //设置#bj内的HTML代码 myClick("btn06", function() { //获取id为bj的节点 var bj=document.getElementById("bj"); bj.innerHTML="富察容音"; }); /* 使用innerHTML也可以完成DOM增删改的相关操作 一般我们会两种方法适合使用 */ //向city中添加广州 myClick("btn07", function() { //获取city var city=document.getElementById("city"); //city.innerHTML+="<li>广州</li>"; //创建一个li var li=document.createElement("li"); //向li中设置文本 li.innerHTML="广州"; //将li添加到city中 city.appendChild(li); }); function myClick(idStr,fun){ var btn=document.getElementById(idStr); btn.fun; } }; </script> -
修改css样式
使用的是
style.css样式 = 值注意点：在js中 css带有 - 会被改成驼峰命名法。且style 只能读取内联样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 300px; height: 300px; margin-top: 20px; background-color: orange; } </style> <body> <div id="box"> </div> <input type="button" value="点击" id="but"> <script type="text/javascript"> let box = document.getElementById("box"); let but = document.getElementById("but"); but.onclick = function () { box.style.backgroundColor="#fff"; } </script> </body> </html> -
获取元素样式
-
元素.currentStyle.样式名获取当前显示样式的样式 支持IE -
getComputedStyle()获取当前显示样式的样式 ， 有两个参数参数1： 获取样式的元素
参数2： 可以传递一个伪元素 可以伪null
-
在IE8 与其他浏览器获取样式可以写一个方法
function getStyle(obj,name) { if (window.getComputedStyle(abj)){ return getComputedStyle(obj,null)[name]; }else { return obj.currentStyle[name]; } } -
-
其他获取元素的样式 : w3c
-
获取鼠标移动事件：w3c
element.accessKey 设置返回元素得快捷键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function access(){
document.getElementById("bd1").accessKey="w";
document.getElementById("bd2").accessKey="g";
}
</script>
</head>
<body onload="access()">
<a href="http://www.baidu.com/" id="bd1">百度</a>
<br>
<br>
<a href="http://www.google.com/" id="bd2">谷歌</a>
</body>
</html>
- 快捷键在不同的浏览器中各有不同：
- IE, Chrome, Safari, Opera 15+: [ALT] + accesskey
- Opera prior version 15: [SHIFT] [ESC] + accesskey
- Firefox: [ALT] [SHIFT] + accesskey
- NamedNodeMap 对象
| 属性 / 方法 | 描述 |
|---|---|
| attr.isId | 如果属性是 id 类型，则返回 true，否则返回 false。 |
| attr.name | 返回属性的名称。 |
| attr.value | 设置或返回属性的值。 |
| attr.specified | 如果已指定属性，则返回 true，否则返回 false。 |
| nodemap.getNamedItem() | 从 NamedNodeMap 返回指定的属性节点。 |
| nodemap.item() | 返回 NamedNodeMap 中位于指定下标的节点。 |
| nodemap.length | 返回 NamedNodeMap 中的节点数。 |
| nodemap.removeNamedItem() | 移除指定的属性节点。 |
| nodemap.setNamedItem() | 设置指定的属性节点（通过名称） |
-
HTML DOM Event 对象 用来监听键盘上的按键 鼠标移动等
使用这些属性做坐标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #client{ width: 200px; height: 50px; background-color: #cccccc; } #areaDiv{ width: 500px; height: 500px; border: black solid 1px; padding-top: 20px; } main{ width: 800px; height: auto; margin: 50px auto; } </style> <script type="text/javascript"> window.onload = function () { /** * omousemove 监听鼠标移动事件 * * clientX 获取水平坐标 * clientY 获取垂直坐标 */ let client = document.getElementById("client"); let areaDiv = document.getElementById("areaDiv"); areaDiv.onmousemove = function (event) { let x = event.clientX; let y = event.clientY; client.innerHTML = "x="+x+"y="+y ; } } </script> <body> <main> <div id="client"> </div> <div id="areaDiv"> </div> </main> </body> </html> -
事件冒泡
- 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
- 即子级元素先触发，父级元素后触发。
冒泡如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: orange; margin-bottom: 20px; } span{ background-color: #cccccc; } </style> <script type="text/javascript"> window.onload = function () { let span = document.getElementById("span"); let box = document.getElementById("box"); let body = document.body; span.onclick = function () { alert("我是span") }; box.onclick = function () { alert("我是div") }; body.onclick = function () { alert("我是body") }; } </script> </head> <body> <div id="box"> <span id="span"> 我是span </span> </div> </body> </html> -
防止事件冒泡
如果不希望事件冒泡发生可以通过事件对象来取消冒泡
使用
cancelBubble<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: orange; margin-bottom: 20px; } span{ background-color: #cccccc; } </style> <script type="text/javascript"> window.onload = function () { let span = document.getElementById("span"); let box = document.getElementById("box"); let body = document.body; span.onclick = function (event) { alert("我是span"); event.cancelBubble = true; }; box.onclick = function () { alert("我是div") }; body.onclick = function () { alert("我是body") }; } </script> </head> <body> <div id="box"> <span id="span"> 我是span </span> </div> </body> </html> -
事件的委派
- 指的是事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同时间也会被触发
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 300px; height: 300px; background-color: lightpink; } #box2{ width: 200px; height: 200px; background-color: lightgreen; } #box3{ width: 100px; height: 100px; background-color: yellowgreen; } </style> <script type="text/javascript"> window.onload = function(){ var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); var box3 = document.getElementById("box3"); box1.onclick = function(){ alert("我是box1"); }; box2.onclick = function(){ alert("我是box2"); }; box3.onclick = function(){ alert("我是box3"); }; }; </script> </head> <body> <div id="box1"> <div id="box2"> <div id="box3"></div> </div> </div> </body> </html> -
事件的绑定
-
一个有多个绑定同一个事件，最后一个会覆盖之前的
-
addEventListener()- 通过这个方法可以绑定多个响应函数与一些特殊事件 不支持IE8 等
- 参数
- 事件的字符串 不为no
- 回调函数 事件触发时调用
- 是否捕获阶段触发事件，需要是一个布尔值 一半为false
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload = function () { let box = document.getElementById("box"); box.addEventListener('click',function() { alert("1") },false); box.addEventListener('click',function() { alert("2") },false); //IE使用attachEvent() 参数没有最后一个布尔值 } </script> </head> <body> <div id="box" style="width: 100px; height: 100px; background-color: orange;"> </div> </body> </html>
-
-
拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 100px; height: 100px; background-color: aqua; position: absolute; } #box1{ width: 100px; height: 100px; background-color: rebeccapurple; margin: 500px auto ; } </style> <script type="text/javascript"> window.onload = function () { let box = document.getElementById("box"); document.onmousedown =function(event){ let ol = event.clientX - box.offsetLeft; let ot = event.clientY - box.offsetTop; document.onmousemove =function (event) { let y =event.clientY - ot; let x = event.clientX - ol; box.style.left = x+"px"; box.style.top = y+"px"; box.innerHTML = "x:"+x+"y:"+y; } }; box.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; }; return false; } </script> </head> <body> <div id="box"></div> <div id = "box1"></div> </body> </html> -
滚轮事件兼容性写法
//判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐浏览器会识别该方法 window.addEventListener('DOMMouseScroll', wheel, false); window.onmousewheel = document.onmousewheel = wheel;//W3C //统一处理滚轮滚动事件 function wheel(event){ var delta = 0; if (!event) event = window.event; if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120” delta = event.wheelDelta/120; if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理 } else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3” delta = -event.detail/3; } if (delta) handle(delta); } //上下滚动时的具体处理函数 function handle(delta) { if (delta <0){//向下滚动 }else{//向上滚动 } }
1394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
