一、DOM
1.常用的方法
a.创建
createElement():创建标签节点
createTextNode():创建文本节点
createAttribute():创建属性节点
b.增
appendChild():将新的子节点添加到指定节点的末尾
insertBefore():在某个子节点的前面插入指定节点
c.删
removeChild():删除子节点
removeAttribute():删除属性节点
d.改
扫描二维码关注公众号，回复： 5416358 查看本文章
repalceChild():替换子节点
setAttribute():将指定属性设置或者修改为指定的值
e.查
getElementByXxxx:获取节点对象
getAttribute():返回指定的属性值
f.克隆
cloneNode():复制一个新的指定节点
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <!--<li>555</li>--> </ul> <input type="button" value="add" onclick="func1();" /> <script type="text/javascript"> //父节点对象.appendChild(子节点对象) function func1(){ //1.创建标签节点li var liEle = document.createElement("li"); //2.创建文本节点555 var liText = document.createTextNode("555"); //3.将文本节点添加为标签节点的子节点 liEle.appendChild(liText); //4.获取父节点对象 var ulEle = document.getElementsByTagName("ul")[0]; //5.将li子节点添加为ul的子节点 ulEle.appendChild(liEle); } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <ul> <li>111</li> <li>222</li> <!--<li>555</li>--> <li id="li3">333</li> <li>444</li> </ul> <input type="button" value="insert" onclick="func1();" /> <script type="text/javascript"> //父节点对象.insertBefore(新的节点，旧的节点) function func1(){ //1.创建标签节点li var liEle = document.createElement("li"); //2.创建文本节点555 var liText = document.createTextNode("555"); //3.将文本节点添加为标签节点的子节点 liEle.appendChild(liText); //4.获取父节点对象 var ulEle = document.getElementsByTagName("ul")[0]; //5.获取指定节点对象 var li3 = document.getElementById("li3"); //6.插入 ulEle.insertBefore(liEle,li3); } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <ul> <li>111</li> <li>222</li> <li id="li3">333</li> <li>444</li> <li>555</li> </ul> <input type="button" value="remove" onclick="func1();" /> <script type="text/javascript"> //父节点对象.removeChild(被删除的节点对象) function func1(){ //1.获取父节点对象 var ulEle = document.getElementsByTagName("ul")[0]; //2.获取需要被删除的节点对象 var li3 = document.getElementById("li3"); //3.删除 ulEle.removeChild(li3); } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <ul> <li>111</li> <li>222</li> <li id="li3">333</li> <li>444</li> <li>555</li> </ul> <input type="button" value="replace" onclick="func1();" /> <script type="text/javascript"> //父节点对象.replaceChild(new,old) function func1(){ //1.获取父节点对象 var ulEle = document.getElementsByTagName("ul")[0]; //2.获取需要被替换的节点对象 var li3 = document.getElementById("li3"); //3.创建标签节点li var liEle = document.createElement("li"); //4.创建文本节点666 var liText = document.createTextNode("666"); //5.将文本节点添加为标签节点的子节点 liEle.appendChild(liText); //6.替换 ulEle.replaceChild(liEle,li3); } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" name="tex" id="inputid" value="aaa" /> <script type="text/javascript"> //1.获取input标签对象 var input = document.getElementById("inputid"); //2.获取属性值 // alert(input.value); //使用getAttribute(),了解，直接通过对象.属性的方式常用 // alert(input.getAttribute("value")); //alert(input.getAttribute("class")); //null //3.setAttribute(属性，值):给某个属性设置具体的值 input.setAttribute("class","cls"); //alert(input.getAttribute("class")); //4.removeAttribute(属性):删除属性 alert(input.getAttribute("name")); input.removeAttribute("name"); alert(input.getAttribute("name")); </script> </body> </html>
2.常用的属性
a.innerHTML:几乎所有的浏览器都支持该属性，但是，不属于DOM的组成部分
作用：获取文本内容，给标签对象设置文本内容【内容包括纯文本和html代码】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span id="spanid">哈哈哈哈哈</span> <div id="box"></div> <script type="text/javascript"> //1.获取span标签的节点对象 var span = document.getElementById("spanid"); //作用一：获取文本内容 //alert(span.innerHTML); //2.作用二：设置文本内容 //2.1设置纯文本 /* * var a = createTextNode("aaaa") * div.appendChild(a) */ var div = document.getElementById("box"); //div.innerHTML = "aaaaa"; //2.2设置html内容 /* * var a = createTextNode("aaaa") * var h = createElement("h1"); * h.appendChild(a); * div.appendChild(h) */ //div.innerHTML = "<h1>aaaa</h1>"; div.innerHTML = "<table border='1'><tr><td>aaaa</td><td>bbbb</td></tr><tr><td>tttt</td><td>hyj</td></tr></table>"; </script> </body> </html>b.节点属性
nodeName:节点的名称
元素节点：标签名称【大写】
属性节点：属性名称
文本节点：#text
文档节点：#document
nodeValue:节点值
元素节点：undefined / null
属性节点：属性的值
文本节点：文本本身
nodeType:节点类型
元素节点：1
属性节点：2
文本节点：3
文档节点：9
注释：8
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span id="spanid">hahahahh </span> <br /> <script type="text/javascript"> //1.标签节点 var span = document.getElementById("spanid"); document.write(span.nodeName); //SPAN document.write(span.nodeValue); //null undefined document.write(span.nodeType); //1 document.write("<br />"); //2.属性节点 var id = span.getAttributeNode("id"); document.write(id.nodeName); //id document.write(id.nodeValue); //spanid document.write(id.nodeType); //2 document.write("<br />"); //3.文本节点 //文本节点排列在属性节点的前面 var text1 = span.firstChild; document.write(text1.nodeName); //#text document.write(text1.nodeValue); //hahahahh document.write(text1.nodeType); //3 </script> </body> </html>c.父子节点，兄弟节点
childNodes:通过父节点获取子节点，注意：子节点可能有多少个【注意：html标签中的空白符】
parentNode:通过子节点获取父节点 ,注意：document没有父节点
firstChild/lastChild
nextSibling：获取同辈节点，获取指定节点的下一个同辈节点
previousSibling：获取同辈节点，获取指定节点的上一个同辈节点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="ulid"><li>111</li><li id="li2">222</li><li id="li3">333</li><li id="li4">444</li><li>555</li></ul> <script type="text/javascript"> //1.通过父节点获取子节点 //注意：考虑空白符的存在，空白符会被识别为文本节点 var ulEle = document.getElementById("ulid"); var result1 = ulEle.childNodes; document.write(result1); document.write(result1.length); //11 document.write("<br />"); var child1 = ulEle.firstChild; var child2 = ulEle.lastChild; document.write(child1.nodeName); document.write("<br />"); document.write(child2.nodeName); //2.通过子节点获取父节点 var li3 = document.getElementById("li3"); var ulEle2 = li3.parentNode; //3.获取同辈节点 var li3 = document.getElementById("li3"); var subli1 = li3.nextSibling; var subli2 = li3.previousSibling; document.write(subli1.id); document.write("<br />"); document.write(subli2.id); </script> </body> </html>d.attributes:获取属性节点
e.value:标签的值【input】
3.事件【重点掌握】
3.1模式
html和js的结合方式
分类：
a.内联模式：在html标签中通过属性的方式给标签添加事件，例如：onclick
b.脚本模式：弥补了内联模式的缺点【未达到js和html的分离】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--内联模式 将js中的事件或者js代码和html标签结合在一起使用 --> <button onclick="func1();">点击一</button> <button onclick="alert('hhahah')">点击二</button> <script type="text/javascript"> function func1(){ alert("hello"); } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--脚本模式 将js和html分离， 语法： 标签对象.事件 = function(形参列表){ } 事件组成：on + 事件名称 例如：onload onscroll onclick ondblclick onmousedown onmouseup等 结论：在实际项目开发中，尽量做到html，css，js的分离 --> <button id="btn1">点击一</button> <button id="btn2">点击二</button> <script type="text/javascript"> //1.获取按钮的对象 var btn1 = document.getElementById("btn1"); //2.添加单击事件 btn1.onclick = function(){ alert("hello"); } </script> </body> </html>
3.2事件对象
事件对象一般称为event对象，该对象是浏览器通过函数将该对象作为参数传递过来的
默认的情况下，event对象是隐藏的，只有跟事件有关的函数才有该参数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" id="inputid" value="按钮"/> <script type="text/javascript"> //普通函数 function func1(){ //arguments：js中的全局对象，表示函数的参数 console.log(arguments.length); } func1(); //匿名函数：跟事件有关 var inputObj = document.getElementById("inputid"); //注意：但凡使用js中的事件，在函数中都会有一个隐藏的参数，表示事件对象， //如果需要使用该对象，则可以显式的写出来，只要是一个合法的标识符即可，一般采用event inputObj.onclick = function(event){ console.log(arguments.length); //console.log(arguments[0]); console.log(event); //事件对象根据不同的浏览器可能不同，为了兼容不同的浏览器 //非IE和IE之间的区别 var e = event || window.event; } </script> </body> </html>
3.3鼠标事件
click:单击或者按下回车键
dblclick:双击
mousedown:按下鼠标
mouseup:抬起鼠标
mouseover:鼠标悬浮
mouseout:鼠标从标签上移出
mousemove：鼠标在标签上移动
submit:表单事件【当表单数据不正确的时候可以阻止表单提交】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 300px; height: 300px; background-color: cyan; } </style> </head> <body> <div id="box"></div> <!-- 注意：所有的html标签都可以绑定鼠标事件 --> <script type="text/javascript"> //获取div标签对象 var divObj = document.getElementById("box"); //绑定鼠标事件 //单击 /*divObj.onclick = function(){ //js操作css //注意：标签对象.style.属性 = “值”； divObj.style.backgroundColor = "orange"; } //双击 divObj.ondblclick = function(){ divObj.style.backgroundColor = "orange"; }*/ //悬浮 divObj.onmouseover = function(){ divObj.style.backgroundColor = "orange"; } divObj.onmouseout = function(){ divObj.style.backgroundColor = "cyan"; } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #msg_id{ width: 200px; /*高度随着内容的多少自适应*/ height: auto; background-color: gray; border: 1px solid white; /*初始化下状态，隐藏 * 则表示该元素不会占用位置的，相当于该元素根本不存在 */ display: none; /*定位*/ position:absolute ; } #div1 a{ /* * a是典型的行内标签，不会自动换行，设置了宽高和内外边距不起作用 */ margin: 30px; display: inline-block; } </style> </head> <body> <div id="div1"> <a href="#">大娃（红娃）</a><br /> <a href="#">二娃（橙娃）</a><br /> <a href="#">三娃（黄娃）</a><br /> <a href="#">四娃（绿娃）</a><br /> <a href="#">五娃（青娃）</a><br /> <a href="#">六娃（蓝娃）</a><br /> <a href="#">七娃（紫娃）</a><br /> <a href="#">葫芦小金刚</a><br /> <!--显示简介--> <div id="msg_id"></div> </div> <script type="text/javascript"> //当当前html页面中所有的内容加载完毕之后，使用js操作 window.onload = function(){ //1.获取标签对象 var oDiv = document.getElementById("div1"); var msgDiv = document.getElementById("msg_id"); var oAs = oDiv.getElementsByTagName("a"); var arrMsg = ["力大无穷，巨大化。(弱点：比较鲁莽，不知随机应变)", "千里眼，顺风耳，灵活聪明，机敏过人，最善于谋划计策(弱点：攻击力与其兄弟相比较过于弱小了，眼睛和耳朵太脆弱)", "铜头铁臂，钢筋铁骨，刀枪不入（弱点：第一部中根本就是没有弱点，但可以以柔克刚降服他。可是到了第二部就被强行加入了一个致命弱点：怕打屁股。性急骄傲）。", "喷火，吸火，霹雳(弱点：受不了激将法，也怕冷)", "吸水，吐水，口吐闪电产生降雨(弱点：水火不相溶，意气用事。第一部中水娃的能力也是没有弱点的，不用吸水也能喷水喷得无穷无尽。到了第二部就变得需要先吸水才能吐水，水量有限。）", "隐身术，透体术，来无影去无踪，聪明机灵，最善于偷盗和行动(弱点：太顽皮。在第一部里能够在被金蛇冰封的情况下透体而出，在第二部前半段能够使用透体术逃出鳄鱼头领爪子的紧紧捉拿，直到被捉的那一下透体术就使不出来了)", "最小，没多大本领，倍受哥哥们的关爱，有宝葫芦，可以吸入魔法、兵器和妖怪，在第一部刚出世时蒙蔽双眼，十分听从妖精的话，把六位哥哥吸进宝葫芦。(弱点:失去宝葫芦，到第二部中宝葫芦那么容易就碎了)", "葫芦娃的合体，七颗葫芦娃的心都溶在他的胸中，七个葫芦娃的本领都长在他的身上，同时也具有七个葫芦娃的弱点。他大闹妖精洞府后，闯入十八层地道，毁掉青蛇精的两件宝物。后变成一座大山，镇压了青蛇精."]; //2.遍历a标签的集合，给a添加鼠标事件 for(var i = 0;i < oAs.length;i++){ //oAs[i]:每个超链接的标签对象 //index属性：循环的时候，如果想要给每个标签对象做一个标记，方便后续取数组中对应的信息 oAs[i].index = i; //2.1移入的时候，文字颜色变成橙色，将标签a位置对应的div显示出来 //this代表的是当前标签对象 oAs[i].onmouseover = function(){ this.style.color = "orange"; //显示出来 msgDiv.style.display = "block"; //设置文字简介 msgDiv.innerHTML = arrMsg[this.index]; } //2.2移出的时候，颜色变为蓝色，将div隐藏 oAs[i].onmouseout = function(){ this.style.color = "blue"; //隐藏 msgDiv.style.display = "none"; } //2.3当鼠标在a上左右上下移动的时候 oAs[i].onmousemove = function(event){ //注意：追踪鼠标的坐标，所有的坐标和event对象有关 var e = event || window.event; msgDiv.style.display = "block"; //div随着鼠标的移动而移动 //在事件对象中，clientX,clientY msgDiv.style.left = e.clientX + 5 + "px"; msgDiv.style.top = e.clientY + 5 + "px"; } } } </script> </body> </html>
表单事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ display: none; color: red; font-size: 13px; } </style> </head> <body> <form id="form" action="#" method="get"> <input type="text" name="username" placeholder="请输入用户名" id="user"/> <span id="userspan">*用户名格式不正确</span> <br /> <input type="password" name="pwd" placeholder="请输入密码" id="pwd" /> <span id="pwdspan">*密码必须是六位</span> <br /> <input type="submit" value="提交数据" /> </form> <script type="text/javascript"> window.onload = function(){ //获取form标签对象 var formObj = document.getElementById("form"); //获取用户名和密码的标签对象，目的为了获取input的value设置 var userInput = document.getElementById("user"); var userSpan = document.getElementById("userspan"); var pwdInput = document.getElementById("pwd"); var pwdSpan = document.getElementById("pwdspan"); //给表单标签对象添加事件 //submit事件：如果该事件的函数返回值为false，则表示需要阻止表单提交 formObj.onsubmit = function(){ if(userInput.value.length > 10 || userInput.value.length < 6){ //让对应的span显示出来 userSpan.style.display = "inline-block"; //阻止表单提交 return false; }else{ if(pwdInput.value.length != 6){ //让对应的span显示出来 pwdSpan.style.display = "inline-block"; //阻止表单提交 return false; }else{ alert("表单提交成功"); } } } } </script> </body> </html>
3.4键盘事件
keydown:按下键盘的任意键【连续调用】
keyup:抬起键盘的任意键【连续调用】
keypress:按下键盘的非功能键
功能键：ctrl,shift,alt,enter,capslock ,numlock等
注意：键盘事件一般绑定给document对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> document.onkeydown = function(e){ // var event = e || window.event; console.log(event); //event.altKey,event.ctrlKey,event.shiftKey的值为布尔值，如果被按下，值为true //keyCode：当前被按下的键对应的编码【数字和字母，keycode实质上是ASCII码】 console.log(event.altKey,event.ctrlKey,event.shiftKey,event.keyCode); } document.onkeyup = function(e){ // var event = e || window.event; console.log(event); console.log(event.altKey,event.ctrlKey,event.shiftKey,event.keyCode); } document.onkeypress = function(e){ // var event = e || window.event; console.log(event); console.log(event.altKey,event.ctrlKey,event.shiftKey,event.keyCode); } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 100px; height: 100px; background-color: cyan; position: absolute; } </style> </head> <body> <!-- div, 1.按下shift + f键随机修改背景颜色 2.通过上下左右键控制div的移动 --> <div id="box"></div> <script type="text/javascript"> //获取div的对象 var div = document.getElementById("box"); //添加键盘事件 document.onkeydown = function(e){ var event = e || window.event; if(event.shiftKey == true && event.keyCode == 70){ //rgb(r,g,b).取值范围为0~255 var r = parseInt(Math.random() * 256); var g = parseInt(Math.random() * 256); var b = parseInt(Math.random() * 256); div.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")"; } } //添加监听事件 document.addEventListener("keydown",func1,false); function func1(e){ var event = e || window.event; switch(event.keyCode){ //左键 case 37:{ div.style.left = div.offsetLeft - 5 + "px"; break; } case 38:{ div.style.top = div.offsetTop - 5 + "px"; break; } case 39:{ div.style.left = div.offsetLeft + 5 + "px"; break; } case 40:{ div.style.top = div.offsetTop + 5 + "px"; break; } default:{ } } } </script> </body> </html>