一、DOM
1.简介
Document Object Model，文档对象模型，主要操作整个文档
可以使用js中DOM中对象的属性和方法，操作html和css
工作原理：想要对标记性文档【html】进行操作，首先需要将标记性文档中的所有内容【包括元素，属性，文本】封装成对象，封装成对象的目的是为了使用其中的属性和方法
明确一点：在加载html页面时，web浏览器会生成一个树形结构，用来表示页面的内部结构，DOM被称为由节点组成的节点树
2.常用方法和属性
2.1元素节点对象的获取方式
getElementById():根据指定的id属性值获取元素对象
getElementByTagName():根据指定的标签名称获取元素对象
getElementByName():根据指定的name属性值获取元素对象
getElementByClassName():根据指定的class属性值获取元素对象
代码演示：
<!DOCTYPE html> <html> <head>aaaa <meta charset="UTF-8"> <title></title> </head> <body> <!--<input type="text" id="input1" value="aaaa" /> <input type="text" id="input2" value="bbbb" /> <input type="text" name="input1" value="aaaa" /> <input type="text" class="input2" value="bbbb" /> <input type="text" name="input1" value="aaaa" /> <input type="text" class="input2" value="bbbb" />--> <input type="text" class="class1" value="bbbb" id="id1" name="name1"/> <!-- getElementById():根据指定的id属性值获取元素对象 getElementByTagName():根据指定的标签名称获取元素对象 getElementByName():根据指定的name属性值获取元素对象 getElementByClassName():根据指定的class属性值获取元素对象 --> <script> //1.getElementById():根据id的值获取标签对象，获取的结果只有一个，就是标签对象 //注意：一个id值只能在一个html页面中使用一次 var input1 = document.getElementById("input1"); document.write(input1); document.write("<br />"); //获取标签对象中属性的值：对象.属性 document.write(input1.value); //设置值 input1.value = "hello"; document.write("<br />"); //2.getElementByTagName(),返回的是元素集合，如果要获取其中的某个标签对象，需要通过遍历 var input2 = document.getElementsByTagName("input"); document.write(input2); document.write("<br />"); document.write(input2.length); document.write("<br />"); //遍历集合，获取其中的每个标签对象 for(var i = 0;i < input2.length;i++){ document.write(input2[i]); document.write("<br />"); document.write(input2[i].value); } //3.getElementByName() var input3 = document.getElementsByName("input1"); document.write(input3); document.write("<br />"); document.write(input3.length); //4.getElementByClassName() var input4 = document.getElementsByClassName("input2"); document.write(input4); document.write("<br />"); document.write(input4.length); /*getElementById:元素对象 * getElementByTagName：HTMLCollection * getElementByClassName：HTMLCollection * getElementByName：NodeList * 统统当做数组处理，遍历获取元素对象 */ //特殊情况：如果标签只有一个 document.getElementById("id1"); document.getElementsByTagName("input")[0]; document.getElementsByName("name1")[0]; document.getElementsByClassName("class1")[0]; </script> </body> </html>
2.2添加子标签【增】
appendChild():将新的节点追击到指定节点的子节点末尾
insertBefore():在指定子节点的前面插入一个子节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="ulid"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <!--<li>555</li>--> </ul> <input type="button" value="add" onclick="add();"/> <script> //appendChild:使用父节点的对象调用 function add(){ //1.创建标签对象 var liElement = document.createElement("li"); //2.创建文本对象 var textNode = document.createTextNode("555"); //3.将555的文本添加给li liElement.appendChild(textNode); //4.获取ul标签对象 var ulElement = document.getElementById("ulid"); //5.将li对象添加给ul对象 ulElement.appendChild(liElement); } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: orange; } </style> </head> <body> <!--需求：将div1中的内容添加到div2中--> <div id="div1"> <ul id="ulid"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </div> <div id="div2"> </div> <input type="button" value="add" onclick="add();"/> <script> //appendChild:使用父节点的对象调用 function add(){ //1.获取div2 var div2 = document.getElementById("div2"); //2.获取ul对象 var ul = document.getElementById("ulid"); //3.添加 div2.appendChild(ul); } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="ulid"> <li>111</li> <li>222</li> <!--<li>555</li>--> <li id="li3">333</li> <li>444</li> </ul> <input type="button" value="add" onclick="insert();"/> <script> //insertBefore:使用父节点的对象调用 function insert(){ //1.创建标签对象 var liElement = document.createElement("li"); //2.创建文本对象 var textNode = document.createTextNode("555"); //3.将555的文本添加给li liElement.appendChild(textNode); //4.获取ul标签对象 var ulElement = document.getElementById("ulid"); //5.获取指定的标签 var li3Element = document.getElementById("li3"); //6.在li3的前面插入一个li //insertBefore（新节点，指定节点） ulElement.insertBefore(liElement,li3Element); } </script> </body> </html>
2.3删除子节点【删】
removeChild()；删除某个节点的子节点
removeAttribute：删除指定标签的指定属性
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="ulid"> <li>111</li> <li>222</li> <li id="li3">333</li> <li>444</li> </ul> <input type="button" value="remove" onclick="remove();"/> <script> //removeChild:使用父节点的对象调用 function remove(){ //1.获取父标签 var ul = document.getElementById("ulid"); //2.获取需要被删除的额子标签 var li3 = document.getElementById("li3"); //3.删除 //注意：通过父标签删除子标签，只能删除一次 ul.removeChild(li3); } </script> </body> </html>
2.4修改【改】
replaceChild():替换子节点
setAttribute()；修改指定的属性值
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="ulid"> <li>111</li> <li>222</li> <!--<li id="li3">aaaa</li>--> <li id="li3">333</li> <li>444</li> </ul> <input type="button" value="replace" onclick="replace();"/> <script> //replaceChild(新，旧):使用父节点的对象调用 function replace(){ //1.获取需要被替换的标签对象 var li3 = document.getElementById("li3"); //2.创建一个新的li对象 var newLi = document.createElement("li"); //3.创建一个文本对象 var text = document.createTextNode("aaaa"); //4.将text添加给newLi newLi.appendChild(text); //5.获取父标签对象 var ul = document.getElementById("ulid"); //6.替换 ul.replaceChild(newLi,li3); } </script> </body> </html>
2.5获取【查】
getAttribute():获取指定的属性值
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" name="name1" id="input1" value="hello" class="aaa" /> <script> //getAttribute setAttribute //获取标签对象 var input = document.getElementsByName("name1")[0]; //获取value属性的值 // document.write(input.value); //修改value属性的值 // input.value = "html"; //1.获取value属性的值:getAttribute("属性名") document.write(input.getAttribute("value")); document.write("<br />"); document.write(input.getAttribute("name")); document.write("<br />"); document.write(input.getAttribute("class")); document.write("<br />"); document.write(input.getAttribute("type")); document.write("<br />"); //2.设置属性的值 //input.setAttribute("属性名","值") input.setAttribute("class","hahahah"); document.write(input.getAttribute("class")); document.write("<br />"); //3.removeAttribute():删除属性.删除之后，获取的结果为null，相当于没有给该标签添加该属性 input.removeAttribute("class"); document.write(input.getAttribute("class")); document.write("<br />"); </script> </body> </html>
2.6其他方法
createElement():创建标签对象
createTextNode()：创建文本对象
cloneChild():复制节点
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <ul id="ulid"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> <div id="div1"> </div> <input type="button" value="clone" onclick="clone();"/> <script> //cloneChild(新，旧):使用父节点的对象调用 function clone(){ //1.获取ul对象 var ul = document.getElementById("ulid"); //2.执行复制方法,拷贝了一个副本，放到一个类似剪切板的地方 var ulCopy = ul.cloneNode(true); //3.获取div对象 var div = document.getElementById("div1"); //4.将ul副本添加到div的下面 div.appendChild(ul); //每个标签对象只有一个，如果想要保留原来的标签，还需要用该标签做其他的操作，首先最好拷贝一个副本 } </script> </body> </html>
2.7属性
innerHTML:设置或者获取指定标签的文本值 常用
parentNode:获取节点的父节点
childNodes:获取节点的所有子节点 ****
nextSibling:返回一个给定节点的下一个兄弟节点
previousSibling:返回一个给定节点的上一个兄弟节点firstChild:获取指定节点的第一个子节点
lastChild:获取指定节点的最后一个子节点
attributes:获取节点的属性节点
value：值
nodeName:节点名称，是只读的
元素节点：标签名称
属性节点：属性名
文本节点：#text
文档节点：#document
nodeValue:节点的值
元素节点：undefined/null
属性节点：属性值
文本节点：文本本身
nodeType:节点类型，nodeType是只读的
元素节点：1
属性节点：2
文本节点：3
文档：9
注释：8
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span id="span1">哈哈哈哈哈</span> <script> document.write("<hr />"); //获取span标签对象 var span = document.getElementById("span1"); //标签名称的大写 document.write(span.nodeName); document.write("<hr />"); document.write(span.nodeType); document.write("<hr />"); document.write(span.nodeValue); document.write("<hr />"); //获取属性对象 var id1 = span.getAttributeNode("id"); document.write(id1.nodeName); document.write("<hr />"); document.write(id1.nodeType); document.write("<hr />"); document.write(id1.nodeValue); document.write("<hr />"); //获取文本对象 var text1 = span.firstChild; document.write(text1.nodeName); document.write("<hr />"); document.write(text1.nodeType); document.write("<hr />"); document.write(text1.nodeValue); document.write("<hr />"); </script> </body> </html>
3.事件
3.1模式
内联模式：
将js中的事件当做html的属性使用
脚本模式：
将js和html分离
代码演示：
内联模式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--内联模式：html和js并未分离--> <input type="button" value="按钮一" onclick="func1();" /> <button onclick="func2();">按钮二</button> <script type="text/javascript"> function func1(){ alert("func1"); } function func2(){ alert("func2"); } </script> </body> </html>脚本模式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="按钮一" /> <button id="btn">按钮二</button> <script type="text/javascript"> /*function func1(){ alert("func1"); } function func2(){ alert("func2"); } //获取按钮的标签对象 var input = document.getElementsByTagName("input")[0]; input.onclick = func1;*/ //获取按钮的标签对象 var input = document.getElementsByTagName("input")[0]; //给input标签绑定一个单击事件,结合匿名函数使用 input.onclick = function(){ alert("func~~~~~1"); } var btn = document.getElementById("btn"); btn.onclick = function(){ alert("hello"); } </script> </body> </html>
3.2事件对象
事件对象一般称为event对象，其实是一个隐藏的对象，是浏览器通过函数将该对象作为参数传递进去的，如果需要使用该对象，则可以显式的写出来
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="按钮一" /> <script type="text/javascript"> /*function func1(){ //arguments是一个全局的对象，表示所有的参数,主要获取系统默认的参数 alert(arguments.length); } func1();*/ var input = document.getElementsByTagName("input")[0]; //如果事件是鼠标触发的，则eve表示MouseEvent对象，如果是键盘触发的，eve表示keyboardEvent //注意：eve只是一个标识符，可以是任何合法的标识符 input.onclick = function(eve){ alert(arguments.length); alert(arguments[0]); //[object MouseEvent] alert(eve); //[object MouseEvent] } </script> </body> </html>
3.3鼠标事件分类
js中所有事件都由两部分组成:on+事件名称
使用方式：标签对象.事件= 匿名函数
click:单击事件或者按下回车键触发
dblclick:双击事件
mousedown:用户按下鼠标但是还未弹起
mouseup:用户释放鼠标触发
mouseover:当鼠标移动到某个元素的上方【鼠标悬浮】
mouseout:当鼠标移出某个元素
mousemove:当鼠标在某个元素的上方移动
submit:表单提交的时候触发【可以阻止表单提交】
scroll:滚动事件
注意：可以通过事件对象可以获取鼠标按钮信息和屏幕坐标
按钮信息：button的属性
0----》左键
1-----》滚轮
2----》右键
3.4鼠标事件使用
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width: 200px; height: 200px; background-color: cyan; } </style> </head> <body> <!--给任意的html都可以添加事件--> <div id="box"></div> <script type="text/javascript"> //获取div的标签对象 var divObj = document.getElementById("box"); //绑定事件 /*divObj.onclick = function(){ alert("单击"); }*/ /*divObj.ondblclick = function(){ alert("双击"); }*/ //鼠标悬浮 /*divObj.onmouseover = function(){ // alert("悬浮"); //在js中操作css：标签对象.style.需要修改的属性 = “值”； divObj.style.backgroundColor = "red"; }*/ /*divObj.onmouseout = function(){ // alert("移出"); divObj.style.backgroundColor = "cyan"; }*/ //移动事件 /*divObj.onmousemove = function(){ divObj.style.backgroundColor = "blue"; }*/ divObj.onmousedown = function(){ divObj.style.backgroundColor = "green"; } divObj.onmouseup = function(){ divObj.style.backgroundColor = "yellow"; } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #msg_id{ width: 200px; /*根据内容自适应*/ height: auto; background-color: gray; border: 1px solid black; /*初始状态下，div需要被隐藏起来*/ display: none; /*定位属性：*/ /*如果设置了定位属性，必须结合left,top,right或者bottom使用*/ position: absolute; } #div1 a{ margin: 30px; /*行内标签：设置宽高和内外边距无效，如果要使用，则需要设置display为inline-block或者block*/ 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"> //当所有的页面内容加载完毕之后，才去执行，可以保证能够获取所有的标前对象以及属性以及文本 window.onload = function(){ var arrMsg = ["力大无穷，巨大化。(弱点：比较鲁莽，不知随机应变)", "千里眼，顺风耳，灵活聪明，机敏过人，最善于谋划计策(弱点：攻击力与其兄弟相比较过于弱小了，眼睛和耳朵太脆弱)", "铜头铁臂，钢筋铁骨，刀枪不入（弱点：第一部中根本就是没有弱点，但可以以柔克刚降服他。可是到了第二部就被强行加入了一个致命弱点：怕打屁股。性急骄傲）。", "喷火，吸火，霹雳(弱点：受不了激将法，也怕冷)", "吸水，吐水，口吐闪电产生降雨(弱点：水火不相溶，意气用事。第一部中水娃的能力也是没有弱点的，不用吸水也能喷水喷得无穷无尽。到了第二部就变得需要先吸水才能吐水，水量有限。）", "隐身术，透体术，来无影去无踪，聪明机灵，最善于偷盗和行动(弱点：太顽皮。在第一部里能够在被金蛇冰封的情况下透体而出，在第二部前半段能够使用透体术逃出鳄鱼头领爪子的紧紧捉拿，直到被捉的那一下透体术就使不出来了)", "最小，没多大本领，倍受哥哥们的关爱，有宝葫芦，可以吸入魔法、兵器和妖怪，在第一部刚出世时蒙蔽双眼，十分听从妖精的话，把六位哥哥吸进宝葫芦。(弱点:失去宝葫芦，到第二部中宝葫芦那么容易就碎了)", "葫芦娃的合体，七颗葫芦娃的心都溶在他的胸中，七个葫芦娃的本领都长在他的身上，同时也具有七个葫芦娃的弱点。他大闹妖精洞府后，闯入十八层地道，毁掉青蛇精的两件宝物。后变成一座大山，镇压了青蛇精."]; //获取标前对象 var oDiv = document.getElementById("div1"); var oAs = oDiv.getElementsByTagName("a"); var oMsg = document.getElementById("msg_id"); //遍历集合，获取具体的a标签对象 for(var i = 0;i < oAs.length;i++){ //oAs[i] //给每一个a标签做一个标记 oAs[i].index = i; //1.移入的时候，超链接文字颜色变为橙色，将对应的描述信息赋值给msg的div oAs[i].onmouseover = function(){ this.style.color = "orange"; //显示出来 oMsg.style.display = "block"; //设置文字 oMsg.innerHTML = arrMsg[this.index]; /*oMsg.style.left = 20 + "px"; oMsg.style.top = 20 + "px";*/ } //2.移出的时候，超链接的文字颜色变为蓝色，将msg的div隐藏 oAs[i].onmouseout = function(){ this.style.color = "blue"; oMsg.style.display = "none"; } //3.当鼠标在a标签的文字上面移动的时候，msg的div跟着移动 oAs[i].onmousemove = function(eve){ //兼容不同的浏览器 var e = eve || window.event; oMsg.style.display = "block"; //通过事件对象获取鼠标点击的位置：e.clientX e.clientY，相对于父标签的 oMsg.style.left = e.clientX + 5 + "px"; oMsg.style.top =e.clientY + 2 + "px"; } } } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width: 200px; height: 200px; background-color: orange; position: absolute; } </style> </head> <body> <div id="box"></div> <script type="text/javascript"> /* * 拖拽事件的实现思路 * 1.拖拽触发的条件：在元素上面有按下动作之后，才可以拖拽 * div.onmousedown * 2.在移动过程中，计算坐标 * 3.释放资源 */ window.onload = function(){ //获取div标签对象 var box = document.getElementById("box"); //拖拽的第一步：按下鼠标 box.onmousedown = function(eve){ var e = eve || window.event; //记录最初，鼠标相对于div的位置 var offsetX = e.offsetX; var offsetY = e.offsetY; //拖拽的第二步：移动 //移动的并不是div，而是在整个文档对象内部移动 document.onmousemove = function(eve){ var e = eve || window.event; //获取的clientX和clientY var clientX = e.clientX; var clientY = e.clientY; //计算移动的距离 box.style.left = clientX - offsetX + "px"; box.style.top = clientY - offsetY + "px"; } //当鼠标抬起的时候，释放资源【不让move，不让执行move的函数】 document.onmouseup = function(){ document.onmousemove = null; } } } </script> </body> </html>
1444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
