一、DOM【掌握】
1.简介
DOM-----<文档对象模型> 可以使用js中提供的对象，使用这些对象的方法和属性，对标记性文档【html标签】进行操作
问题： 想要对标记性文档进行操作，需要考虑什么问题？
解决： 首先需要将标记性文档中的所有内容【标签，属性，文本】封装成对象，封装成对象的目的是为了更方便的去操
作这些文档以及文档中所有的内容，对象包含属性和方法
注意：在加载html页面时，web浏览器会生成一个树型结构，主要用来表示页面结构，这种树型结构被称为由节点组成的 节点树
2.常用的方法和属性
2.1元素节点对象的获取方式
getElementById(): 通过指定的id获取对应的标签对象【返回 一个对象】
getElementByTagName(): 通过标签名称获取对应的标签对象【返回一个容器：集合/节点数组】
getElemmentByName(): 通过指定的name获取对应的标签对象【返回一个容器：集合/节点数组】
getElementByClassName(): 通过指定的class获取对应的标签对象【返回一个容器：集合/节点数组】
2.2DOM节点操作:方法
关于节点的增删改查
【增】 --------- appendChild(): 添加子节点【追加】 insertBefore()：在指定节点之前插入一个兄弟节点
【删】 --------- removeChild():删除子节点
【改】 -------- replaceChild()；替换子节点 setAttribute()；对指定的属性设置或者修改为指定的值
【查】 -------- 元素节点对象的获取方式：getElementByXxxx() getAttribute():返回指定的属性值
【创建节点】 ***** createElement():标签节点 createAttribute()：属性节点 createTextNode()：文本节点
【复制】 ------- cloneNode()
2.3DOM节点操作:属性
innerHTML:节点的文本值
attributes:指定节点的属性节点
value：输入框的值
nodeName：节点的名称 ------- (nodeName是只读的)
文档节点：#document
元素节点：与标签名相同的，只不过是全大写
属性节点：与属性名相同
文本节点：#text
nodeValue：节点的值
元素节点：undefined或者null
属性节点：属性值
文本节点：文本本身
nodeType：节点的类型 --- -(nodeType是只读的)
文档节点：9 元素节点：1 属性节点：2 文本节点：3
parentNode:指定节点的父节点
childNodes:指定节点的子节点
firstChild:第一个子节点
lastChild:最后一个子节点
nextSibling:获取一个指定节点的下一个兄弟节点
previousSibling:获取 一个指定节点的上一个兄弟节点
3.使用
3.1获取元素节点对象
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" id="text1" value="aaaa"/> <input type="text" id="text2" value="bbbb" name="bb"/> <input type="text" id="text3" value="cccc" name="bb"/> <input type="text" class="text4" value="aaaa" /> <script> //document：文档对象，代表是整个html文档 //当使用document对象调用某个方法的时候，则表示该方法的作用范围在整个文档内【查找的范围是当前整个html页面】 //1.getElementById() id //注意：返回值为一个标签对象，所以一个id最好作用于一个标签 //a.获取指定的标签对象 /*var input1 = document.getElementById("text1"); //b.修改input的value值 input1.value = "AAAA"; alert(input1); //object HTMLInputElement*/ //2.getElmentByName() name //注意：每个标签都可以有一个name属性， //注意：不管name属性对应的标签有几个，都会返回一个NodeList的容器 //如果想要获取其中的某个标签对象，则需要遍历节点列表 /*var input2 = document.getElementsByName("bb"); alert(input2);//[object NodeList] for(i in input2){ alert(input2[i]); }*/ //3.getElementByClassName() class //注意：一个class可以同时作用于多个标签 /*var input3 = document.getElementsByClassName("text4"); alert(input3); //[object HTMLCollection] for(var i = 0;i < input3.length;i++){ var subInput = input3[i]; alert(subInput.value); }*/ //4.getElementByTagName() tag //注意：在同一个html页面中，一个标签可以同时出现多次 /*var input4 = document.getElementsByTagName("input"); alert(input4); //[object HTMLCollection] for(var i = 0;i < input4.length;i++){ var subInput = input4[i]; alert(subInput.value); }*/ //5.特殊情况：如果需要获取的标签对象在当前页面中只有一个，则采用下面的方式获取 var input2 = document.getElementsByName("bb")[0]; var input3 = document.getElementsByClassName("text4")[0]; var input4 = document.getElementsByTagName("input")[0]; </script> </body> </html>
3.2增加子节点
追加子节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>宋江</li> <li>李逵</li> <li>武松</li> <li>武大郎</li> <!--<li>西门庆</li>--> </ul> <!--需求：在ul的末尾追加一个子节点，文本内容为西门庆 appendChild（）--> <button onclick="func()">追加子节点</button> <script> function func(){ //1.创建文本节点 var textObj = document.createTextNode("西门庆"); //2.创建元素节点 var liObj = document.createElement("li"); //3.将文本节点添加给元素节点 liObj.appendChild(textObj); //4.获取ul的标签对象 var ulObj = document.getElementsByTagName("ul")[0]; //5.将li标签对象添加给ul ulObj.appendChild(liObj); } </script> </body> </html>
插入子节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>宋江</li> <li>李逵</li> <!--<li>西门庆</li>--> <li id="ws">武松</li> <li>武大郎</li> </ul> <!--需求：在武松的前面插入一个西门庆 insertBefore()--> <button onclick="func()">插入子节点</button> <script> function func(){ //1.创建文本节点 var textObj = document.createTextNode("西门庆"); //2.创建元素节点 var liObj = document.createElement("li"); //3.将文本节点添加给元素节点 liObj.appendChild(textObj); //4.获取ul的标签对象 var ulObj = document.getElementsByTagName("ul")[0]; //5.获取指定的标签 var wsObj = document.getElementById("ws"); //6.将liObj插入到wsObj的前面 //注意：使用insertBefore本质上还是一个父节点增加一个子节点，所以使用父节点对象调用 //注意：参数：新的节点对象，指定的节点对象 ulObj.insertBefore(liObj,wsObj); } </script> </body> </html>
3.3删除子节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>宋江</li> <li id="li2">李逵</li> <li>西门庆</li> <li>武松</li> <li>武大郎</li> </ul> <!--需求：将李逵对应的li删除掉 removeChild()--> <button onclick="func()">删除子节点</button> <script> function func(){ //1.获取父节点 var ulObj = document.getElementsByTagName("ul")[0]; //2.获取需要被删除的子节点 var liObj = document.getElementById("li2"); //3.删除 //注意：通过父节点删除子节点 ulObj.removeChild(liObj); } </script> </body> </html>
3.4替换子节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>宋江</li> <li id="li2">李逵</li> <li>西门庆</li> <li>武松</li> <li>武大郎</li> </ul> <!--需求：将李逵替换成林冲 replaceChild()--> <button onclick="func()">替换子节点</button> <script> function func(){ //1.创建文本节点 var textObj = document.createTextNode("林冲"); //2.创建元素节点 var liObj = document.createElement("li"); //3.将文本节点添加给元素节点 liObj.appendChild(textObj); //4.获取需要被替换的标签 var lkObj = document.getElementById("li2"); //5.获取ul的标签对象 var ulObj = document.getElementsByTagName("ul")[0]; //6.替换 //注意：通过父节点替换子节点 //参数：新的，旧的 ulObj.replaceChild(liObj,lkObj); } </script> </body> </html>
3.5复制节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width: 400px; height: 400px; background-color: orange; } </style> </head> <body> <ul> <li>宋江</li> <li id="li2">李逵</li> <li>西门庆</li> <li>武松</li> <li>武大郎</li> </ul> <div id="box"> </div> <!--需求：将无序列表在div中复制一份 cloneNode（）--> <button onclick="func()">复制节点</button> <script type="text/javascript"> function func(){ //1.获取ul标签 var ulObj = document.getElementsByTagName("ul")[0]; //2.获取需要目标标签对象 var divObj = document.getElementById("box"); //3.执行复制方法，将内容存储到类似剪切板的地方 var copyObj = ulObj.cloneNode(true); //4.将副本添加到目标标签的下面【成为子节点】 divObj.appendChild(copyObj); } </script> </body> </html>
3.6属性相关操作【了解】
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" name="aaa" id="inputid" value="请输入：" /> <script> //1.获取标签对象 var input = document.getElementById("inputid"); //2.获取属性的值 //获取value的值 //方式一：对象.属性 document.write(input.value); //方式二：对象.getAttribute("属性的字段") document.write(input.getAttribute("value")); //3.设置某个属性的值 //方式一：对象.属性 input.value = "hello"; //方式二：对象.setAttribute(“属性的字段”，“文本值”) input.setAttribute("value","hello~~~"); //4.添加属性 //a.创建属性节点 //参数：属性的字段 //var attrObj = document.createAttribute("class"); //b.将属性节点添加给标签节点 //input.appendChild(attrObj); document.write("<br />"); //5.删除属性 //removeChilid(需要被删除的字节对象) removeAttribute("属性的字段") document.write(input.getAttribute("name")); //aaa input.removeAttribute("name"); document.write(input.getAttribute("name")); //null //总结：属性的操作：xxxAttribute() //create get set remove </script> </body> </html>
3.7Node对象的属性
作用：根据不同的取值，区分节点的类型
nodeName :只读的
nodeType
nodeValue
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span id="spanid">hellohello</span><br /> <script> //1.标签节点 var eleObj = document.getElementById("spanid"); document.write(eleObj.nodeName); document.write(eleObj.nodeType); document.write(eleObj.nodeValue); //SPAN 1 null document.write("<br />"); //2.属性节点 var attriObj = eleObj.getAttributeNode("id"); document.write(attriObj.nodeName); document.write(attriObj.nodeType); document.write(attriObj.nodeValue); //id 2 spanid document.write("<br />"); //3.文本节点 //注意:文本节点排列在属性节点的前面 var textObj = eleObj.firstChild; //文本节点 document.write(textObj.nodeName); document.write(textObj.nodeType); document.write(textObj.nodeValue); //#text 3 hellohello document.write("<br />"); </script> </body> </html>
3.8父节点子节点以及兄弟节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul><li id="li1">1111</li><li id="li2">2222</li><li id="li3">3333</li><li id="li4">4444</li></ul> <script> //1.父节点 //需求：通过一个已知的子节点获取对应的父节点 var liEle = document.getElementById("li1"); var ulEle1 = liEle.parentNode; //2.子节点 //需求：通过父节点获取子节点 var ulEle2 = document.getElementsByTagName("ul")[0]; document.write(ulEle2.firstChild);//Text document.write(ulEle2.lastChild);//Text //获取全部的子节点 var childs = ulEle2.childNodes; document.write(childs);//NodeList document.write(childs.length);//9 //说明问题：在节点树中，换行符也会被识别为一个文本节点，在书写标签的时候，ul下面有9个子节点 document.write("<br />"); //3.兄弟节点/同辈节点 //通过一个已知的子节点获取对应的兄弟节点 var li3 = document.getElementById("li3"); var subEle1 = li3.nextSibling; document.write(subEle1.getAttribute("id")); //li4 var subEle2 = li3.previousSibling; document.write(subEle2.getAttribute("id")); //li2 </script> </body> </html>
3.9innerHTML属性
设置或者获取节点的文本值
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width: 200px; height: 200px; background-color: cyan; } </style> </head> <body> <span id="spanid">hahhahahah</span> <div id="box"> </div> <script> //1.获取文本内容 //a.获取span的标签对象 var spanObj = document.getElementById("spanid"); //b.获取标签对象的文本内容 document.write(spanObj.innerHTML); //2.给指定的标签设置文本内容 //2.1设置纯文本 var divObj = document.getElementById("box"); //divObj.innerHTML = "hello"; //2.2设置html标签 //innerHTML属性可以识别字符串中的html标签 divObj.innerHTML = "<table border='1' cellspacing='1' bordercolor='red' width='100px' height='100px'><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>"; </script> </body> </html>
4.事件
通过js创建动态网页，事件是可以被js检测到的行为
注意：网页中的每个元素都可以产生某些触发js函数或者程序的事件
4.1模式
内联模式：将事件作为标签的属性使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--内联模式--> <!--事件：可以识别js中的函数和js代码 缺点：没有做到html和js的分离原则 --> <input type="button" onclick="func()" value="按钮"/> <input type="button" onclick="alert('abc')" value="按钮1" /> <script> function func(){ document.write("hello"); } //func(); </script> </body> </html>脚本模式：将事件作为某个对象的属性使用，一般结合匿名函数使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--脚本模式--> <input type="button" value="按钮1" /> <input type="button" value="按钮2" /> <script> //1.获取input标签对象 var input1 = document.getElementsByTagName("input")[0]; //2.给input标签对象添加一个单击事件 //给标签对象绑定了单击事件，当点击按钮的时候会触发匿名函数的函数体 input1.onclick = function(){ document.write("aaaaa"); } //好处：达到了html和js的分离，有利于后期的维护 </script> </body> </html>
4.2事件对象
事件对象一般被称为event对象，这个对象默认是被隐藏起来的
如果要使用这个事件对象，则需要通过参数传递，参数出现事件对应的函数中
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="按钮" /> <script> function show(){ //arguments是一个全局对象，用来表示参数 document.write(arguments.length); //0 } show(); var inputObj = document.getElementsByTagName("input")[0]; /*inputObj.onclick = function(){ //注意：在js中，给标签对象绑定事件，事件的触发函数中都有一个隐藏的参数：event对象 document.write(arguments.length);//1 }*/ //注意：event只是一个形参，可以是任意的标识符，为了区分该参数代表是事件对象，一般使用event //不一定所有的事件中都需要将event事件对象显式的写出来，根据需求来定 inputObj.onclick = function(event){ document.write(event); //[object MouseEvent] document.write(arguments.length); //1 document.write(arguments[0]); //[object MouseEvent] } </script> </body> </html>
4.3鼠标事件
事件的组成：on + 事件名称
常用的事件：
onclick 鼠标单击事件
ondbclick: 鼠标双击事件
onmousedown: 当用户按下鼠标但是还没有抬起来的时候触发
onmouseup: 当用户抬起鼠标的时候触发
onmouseover:【hover】， 当鼠标悬浮在某个标签的上方的时候
onmouseout: 移出标签
onmousemove: 当鼠标在某个标签的上方移动的时候
onscroll：当鼠标滚动的时候触发
onsubmit：表单提交的时候触发【常用于阻止表单提交】
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="box"></div> <script> //获取div标签对象 var divObj = document.getElementById("box"); //给div添加鼠标事件 //单击事件 /*divObj.onclick = function(){ alert("hello"); }*/ //双击事件 /*divObj.ondblclick = function(){ alert("hello"); }*/ //悬浮事件【移进】 /*divObj.onmouseover = function(){ alert("hello"); }*/ //移出 divObj.onmouseout = function(){ alert("hello"); } </script> </body> </html>