一、DOM【掌握】
1.简介
文档对象模型
可以使用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>
4.4综合案例
代码演示: