<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>091-100章总结</title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <link rel="stylesheet" type="text/css" href="css/css.css"/> </head> <body> <pre> 091. DOM简介 什么是DOM • DOM，全称Document Object Model文档对象模型。 • JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。 • 文档– 文档表示的就是整个的HTML网页文档 • 对象– 对象表示将网页中的每一个部分都转换为了一个对象。 • 模型– 使用模型来表示对象之间的关系，这样方便我们获取对象（倒树模型）。 节点 • 节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。 • 比如：html标签、属性、文本、注释、整个文档等都是一个节点。 • 虽然都是节点，但是实际上他们的具体类型是不同的。 • 比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。 • 节点的类型不同，属性和方法也都不尽相同。 • 常用节点分为四类 – 文档节点：整个HTML文档 – 元素节点：HTML文档中的HTML标签 – 属性节点：元素的属性 – 文本节点：HTML标签中的文本内容 节点的属性 文档节点（document） • 文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。 • document对象作为window对象的属性存在的，我们不用获取可以直接使用。 • 通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。 元素节点（Element） • HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。 • 浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。 • 比如： – document.getElementById() – 根据id属性值获取一个元素节点对象。 属性节点（Attr） • 属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。 • 可以通过元素节点来获取指定的属性节点。 • 例如： – 元素节点.getAttributeNode("属性名"); • 注意：我们一般不使用属性节点。 文本节点（Text） • 文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点（包括换行和空格）。 • 它包括可以字面解释的纯文本内容。 • 文本节点一般是作为元素节点的子节点存在的。 • 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点。 • 例如： – 元素节点.firstChild; – 获取元素节点的第一个子节点，一般为文本节点。 </pre> <button id="btn001">我是一个按钮</button> <script type="text/javascript"> console.log("第091"); /* * 浏览器已经为我们提供 文档节点 对象这个对象是window属性 * 可以在页面中直接使用，文档节点代表的是整个网页 */ console.log(document); //获取到button对象 var btn001 = document.getElementById("btn001"); //修改按钮的文字 btn001.innerHTML = "I'm Button"; </script> <pre> 092. 事件的简介 • 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。 • JavaScript 与 HTML 之间的交互是通过事件实现的。 • 对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。 事件发生以后要处理这个事件（比如你亲了某人一下，某人有什么反应）。 </pre> <!-- 我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行 这种写法我们称为结构和行为耦合，不方便维护，不推荐使用 --> <button id="btn" onclick="alert('讨厌，你点我干嘛！');">我是一个按钮点我</button> <button id="btn002">我是一个按钮点我</button> <script type="text/javascript"> console.log("第092"); /* * 事件，就是用户和浏览器之间的交互行为， * 比如：点击按钮，鼠标移动、关闭窗口。。。 */ //获取按钮对象 var btn002 = document.getElementById("btn002"); /* * 可以为按钮的对应事件绑定处理函数的形式来响应事件 * 这样当事件被触发时，其对应的函数将会被调用 */ //绑定一个单击事件 //像这种为单击事件绑定的函数，我们称为单击响应函数 btn002.onclick = function(){ alert("你还点~~~"); }; </script> <pre> 093. 文档的加载 浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行,如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。 onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。 注意：window.onload一个页面只能写一个，多个一起会执行最后一个，可以写个方法解决。 </pre> <script type="text/javascript"> console.log("第093"); function btn003(){ //获取id为btn的按钮 var btn003 = document.getElementById("btn003"); //为按钮绑定一个单击响应函数 btn003.onclick = function(){ alert("hello"); }; }; </script> <button id="btn003">我是一个按钮</button> <pre> 094. DOM查询 获取元素节点 • 通过document对象调用 1. getElementById() – 通过id属性获取一个元素节点对象 2. getElementsByTagName() – 通过标签名获取一组元素节点对象,伪数组 3. getElementsByName() – 通过name属性获取一组元素节点对象 </pre> <pre> 095. DOM查询2 获取元素节点的子节点 • 通过具体的元素节点调用 1. getElementsByTagName() – 方法，返回当前节点的指定标签名后代节点 2. childNodes – 属性，表示当前节点的所有子节点 3. firstChild – 属性，表示当前节点的第一个子节点 4. lastChild – 属性，表示当前节点的最后一个子节点 </pre> <pre> 096. DOM查询3 获取父节点和兄弟节点 • 通过具体的节点调用 1. parentNode – 属性，表示当前节点的父节点 2. previousSibling – 属性，表示当前节点的前一个兄弟节点 3. nextSibling – 属性，表示当前节点的后一个兄弟节点 </pre> <div class="clearfix"> <div id="total"> <div class="inner"> <p>你喜欢哪个城市?</p> <ul class="clearfix" id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <p>你喜欢哪款单机游戏?</p> <ul class="clearfix" id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <p>你手机的操作系统是?</p> <ul id="phone"> <li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul> </div> <div class="inner"> <p>gender:</p> <p> <span> <input class="hello" id="male" type="radio" name="gender" value="male"/> <label for="male">male</label> </span> <span> <input class="hello" id="female" type="radio" name="gender" value="female"/> <label for="female">female</label> </span> </p> <p>name:<input type="text" name="name" id="username" value="abcde"/></p> </div> </div> <div id="btnList"> <div><button id="btn01">查找#bj节点</button></div> <div><button id="btn02">查找所有li节点</button></div> <div><button id="btn03">查找name=gender的所有节点</button></div> <div><button id="btn04">查找#city下所有li节点</button></div> <div><button id="btn05">返回#city的所有子节点</button></div> <div><button id="btn06">返回#phone的第一个子节点</button></div> <div><button id="btn07">返回#bj的父节点</button></div> <div><button id="btn08">返回#android的前一个兄弟节点</button></div> <div><button id="btn09">返回#username的value属性值</button></div> <div><button id="btn10">设置#username的value属性值</button></div> <div><button id="btn11">返回#bj的文本值</button></div> </div> </div> <script type="text/javascript"> console.log("第094,095,096"); // 定义一个通用点击事件函数 function myClick(btn,fun){ var btn = document.getElementById(btn); btn.onclick = fun; }; myClick("btn01",function(){ var bj = document.getElementById('bj'); alert(bj.innerHTML); }); myClick("btn02",function(){ var lis = document.getElementsByTagName("li"); //一组元素节点对象 //alert(lis[0]); for(var i=0 , liLen = lis.length; i<lis.length; i++){ console.log(lis[i].innerHTML); } }); myClick("btn03",function(){ var names = document.getElementsByName("gender");//一组元素节点对象 /* * innerHTML用于获取元素内部的HTML代码的 * 对于自结束标签，这个属性没有意义 */ //alert(inputs[i].innerHTML); /* * 如果需要读取元素节点属性， * 直接使用 元素.属性名 * 例子：元素.id 元素.name 元素.value * 注意：class属性不能采用这种方式， * 读取class属性时需要使用 元素.className */ for(var i=0;i<names.length;i++){ alert(names[i].value); } }) myClick("btn04",function(){ var city = document.getElementById('city'); var lis = city.getElementsByTagName('li'); //返回当前节点的指定标签名后代节点 //alert(lis[0]); for(var i=0;i<lis.length;i++){ alert(lis[i].innerHTML); } }); myClick("btn05",function(){ var city = document.getElementById('city'); var cns = city.childNodes; /* * childNodes属性会获取包括文本节点在内的所有节点 * 根据DOM标签标签间空白也会当成文本节点 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点， * 所以该属性在IE8中会返回4个子元素而其他浏览器是9个 */ //alert(cns.length); for(var i=0;i<cns.length;i++){ alert(cns[i]); } /* * children属性可以获取当前元素的所有子元素 */ var cns2 = city.children; alert(cns2.length); }); myClick("btn06",function(){ var phone = document.getElementById('phone'); var fir = phone.firstChild; // 获取到当前元素的第一个子节点（包括空白文本节点） alert(fir); //firstElementChild获取当前元素的第一个子元素 /* * firstElementChild不支持IE8及以下的浏览器， * 如果需要兼容他们尽量不要使用 */ fir = phone.firstElementChild; alert(fir); }); myClick("btn07",function(){ var bj = document.getElementById('bj'); var pn = bj.parentNode; alert(pn.innerHTML); /* * innerText * - 该属性可以获取到元素内部的文本内容 * - 它和innerHTML类似，不同的是它会自动将html标签去除 */ alert(pn.innerText); }); myClick("btn08",function(){ var android = document.getElementById('android'); var ps = android.previousSibling; //前一个兄弟节点（也可能获取到空白的文本） alert(ps); //previousElementSibling获取前一个兄弟元素，IE8及以下不支持 var ps = android.previousElementSibling; alert(ps); }); myClick("btn09",function(){ var username = document.getElementById('username'); var um = username.value; alert(um); }); myClick("btn10",function(){ var username = document.getElementById('username'); username.value = "今天天气真好。"; }); myClick("btn11",function(){ var bj = document.getElementById('bj'); alert (bj.innerHTML); alert (bj.innerText); alert(bj.firstChild.nodeValue); }); </script> <pre> 097. 图片切换的练习 </pre> <div class="img-exercise"> <p id="infor"></p> <img src="images/1.jpg" alt="1" /> <button id="prev">上一个</button> <button id="next">下一个</button> </div> <script type="text/javascript"> console.log("第097"); var prev = document.getElementById('prev'); var next = document.getElementById('next'); var img = document.getElementsByTagName('img')[0]; var imgArray = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"]; var imgArrayLength = imgArray.length; var infor = document.getElementById('infor'); var index = 0; infor.innerHTML = "一共"+imgArrayLength+"张图片，当前是第"+(index+1)+"张。"; prev.onclick = function(){ index--; if(index <0 ){ index = imgArrayLength -1; } img.src = imgArray[index]; infor.innerHTML = "一共"+imgArrayLength+"张图片，当前是第"+(index+1)+"张。"; } next.onclick = function(){ index++; if(index > imgArrayLength -1 ){ index = 0; } img.src = imgArray[index]; infor.innerHTML = "一共"+imgArrayLength+"张图片，当前是第"+(index+1)+"张。"; } </script> <pre> 098. 全选练习1 </pre> <pre> 099. 全选练习2 </pre> <pre> 100. 全选练习3 </pre> <form method="post" action=""> <p>你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 </p> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="checkbox" name="items" value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br /> <input type="button" id="checkedAllBtn" value="全 选" /> <input type="button" id="checkedNoBtn" value="全不选" /> <input type="button" id="checkedRevBtn" value="反 选" /> <input type="button" id="sendBtn" value="提 交" /> </form> <script type="text/javascript"> console.log("第098,099,100"); function inClick(inBtn,fun){ var inBtn = document.getElementById(inBtn); inBtn.onclick = fun; }; function moreSelect(){ var items = document.getElementsByName('items'); var itemsLength = items.length; var checkedAllBox = document.getElementById('checkedAllBox'); // 全选 inClick('checkedAllBtn',function(){ for(var i=0;i<itemsLength;i++){ items[i].checked = true; } checkedAllBox.checked = true; }) // 全不选 inClick('checkedNoBtn',function(){ for(var i=0;i<itemsLength;i++){ items[i].checked = false; } checkedAllBox.checked = false; }) // 反选 inClick('checkedRevBtn',function(){ for(var i=0;i<itemsLength;i++){ /*if(items[i].checked){ items[i].checked = false; }else{ items[i].checked = true; }*/ items[i].checked = !items[i].checked; } checkedAllBox.checked = !checkedAllBox.checked; }) // 提交 inClick('sendBtn',function(){ for(var i=0;i<itemsLength;i++){ if(items[i].checked){ alert(items[i].value); } } }) // 全选/全不选 inClick('checkedAllBox',function(){ for(var i=0;i<itemsLength;i++){ items[i].checked = this.checked; } }) // items点击 /* * 如果四个多选框全都选中，则checkedAllBox也应该选中 * 如果四个多选框没都选中，则checkedAllBox也不应该选中 */ for(var i=0;i<itemsLength;i++){ items[i].onclick = function(){ checkedAllBox.checked = true; for (var j=0; j<items.length; j++) { if(!items[j].checked){ checkedAllBox.checked = false; break; } } } } } </script> <pre> 附加：window.onload 加载多个函数的的两种方法 </pre> <script type="text/javascript"> function a(){ console.log("a"); } function b(){ console.log("b"); } function c(){ console.log("c"); } //1 window.onload =function() { a(); b(); c(); } //2 function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } addLoadEvent(a); addLoadEvent(b); addLoadEvent(c); addLoadEvent(btn003); addLoadEvent(moreSelect); </script> </body> </html>
所有基础课程链接：
1.JavaScript基础视频教程总结（001-010章） 2.JavaScript基础视频教程总结（011-020章） 3. JavaScript基础视频教程总结（021-030章） 4. JavaScript基础视频教程总结（031-040章）
5. JavaScript基础视频教程总结（041-050章） 6. JavaScript基础视频教程总结（051-060章） 7. JavaScript基础视频教程总结（061-070章） 8. JavaScript基础视频教程总结（071-080章）
9. JavaScript基础视频教程总结（081-090章） 10. JavaScript基础视频教程总结（091-100章） 11. JavaScript基础视频教程总结（101-110章） 12. JavaScript基础视频教程总结（111-120章）
13. JavaScript基础视频教程总结（121-130章） 14. JavaScript基础视频教程总结（131-140章）
另外，欢迎关注我的新浪微博