JavaScript基础视频教程总结(091-100章)
程序员文章站
2022-05-03 11:41:45
091-100章总结 091. DOM简介 什么是DOM • DOM,全称Document Object Model文档对象模型。 • JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。 • 文档– 文档表示的就是整个的HTML网页文档 • 对象– 对象表示将... ......
<!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>
上一篇: Fiddler 接口测试(Composer)的使用方法
下一篇: Linux 误删文件的解决方法