JS-2

it2025-07-10 13

DOM

标签 CSS 元素 JS 节点 DOM 其实他们都是同类

DOM 节点

// 文本节点 cnjncaknc // 元素节点 <p> ncjksancakj </p>

子节点：只算下面第一层的节点，如果第一层里面还包括了子节点的话，不往里面算

children 获取子节点（获取的节点只包括元素节点，不包括文本节点）。比childNodes好用

childNodes 获取子节点（获取的节点包括元素节点和文本节点）

nodeType 节点类型 1 元素节点3 文本节点

parentNode 不管是什么样的样式，父节点是不变的，除非把样式结构给改了

offsetParent：获取元素在页面上的实际位置根据样式不同，父节点是会发生变化的

首尾子节点有兼容性问题

firstChild / firstElementChild(获取第一个元素子节点)lastChild / lastElementChild

兄弟节点有兼容性问题

nextSibling / nextElementSiblingpreviousSibling / previousElementSibling <script> window.onload = function () { var aA = document.getElementsByTagName('a'); for (var i = 0; i < aA.length; i++){ aA[i].onclick = function(){ this.parentNode.style.display = 'none'; } } } </script> <body> <ul id="ul1"> <li>cnasncla<a href="javascript:;">隐藏</a></li> <li>ca smcnas<a href="javascript:;">隐藏</a></li> <li>ckldsnlk<a href="javascript:;">隐藏</a></li> <li>hiughunbj<a href="javascript:;">隐藏</a></li> <li>mkcmsdkl<a href="javascript:;">隐藏</a></li> </ul> </body>

操作元素属性

元素属性操作第一种：oDiv.style.display = ‘block’第二种：oDiv.style[“display”] = ‘block’第三种：DOM方式操作

DOM方式操作元素属性

获取 getAttribute(名称)设置 setAttribute(名称，值)删除 removeAttribute(名称)

DOM操作应用

创建DOM元素

createElement(标签名) ：创建一个节点appendChild(节点)：追加一个节点。其实这个操作分为两步：1.先把元素从原有的父级上面删掉 2.添加到新的父级 <script> window.onload = function () { var oBtn = document.getElementById('btn1'); var oTxt = document.getElementById('txt1'); var oUl = document.getElementById('ul1'); oBtn.onclick = function () { var oLi = document.createElement('li'); oLi.innerHTML = oTxt.value; oUl.appendChild(oLi); } } </script> <body> <input type="text" id="txt1"> <input type="button" value="创建li" id="btn1"> <ul id="ul1"></ul> </body>

插入元素

insertBefore(节点，原有节点)：在已有元素前插入 appendChildinsertBeforeappendChild(子节点)insertBefore(子节点，在谁之前) <script> window.onload = function () { var oBtn = document.getElementById('btn1'); var oTxt = document.getElementById('txt1'); var oUl = document.getElementById('ul1'); oBtn.onclick = function () { var oLi = document.createElement('li'); var aLi = document.getElementsByTagName('li'); oLi.innerHTML = oTxt.value; if (aLi.length > 0) { oUl.insertBefore(oLi, aLi[0]); } else { oUl.appendChild(oLi); } } } </script> <body> <input type="text" id="txt1"> <input type="button" value="创建li" id="btn1"> <ul id="ul1"></ul> </body>

删除DOM元素

removeChild(节点)：删除一个节点 <script> window.onload = function () { var aA = document.getElementsByTagName('a'); var oUl = document.getElementById('ul1'); for (var i = 0; i < aA.length; i++) { aA[i].onclick = function () { oUl.removeChild(this.parentNode); } } } </script> <body> <ul id="ul1"> <li>cbjkbj <a href="javascript:;">删除</a></li> <li>reqwdq <a href="javascript:;">删除</a></li> <li>gtrbrg <a href="javascript:;">删除</a></li> <li>bgbf <a href="javascript:;">删除</a></li> </ul> </body>

文档碎片

document.createDocumentFragment()：插入文档碎片。可以把本来要一个一个插入到ul中的li先一个一个插入到文档碎片中，然后将文档碎片直接插入到ul中，在IE浏览器中可以提高性能。

DOM操作高级应用

表格应用一个表格可以有很多个tbody，但是只有一个 tHead 和 tFoot，所以说 tHead 和 tFoot 不是数组，而是直接的元素。

tBodies/row/cell

模糊搜索

多关键词搜索

split() 分割

排序

表单应用

向服务器提交数据。

action 提交到哪去onsubmit 提交时发生onreset 重置时发生onkeyup 输入时验证onblur 失焦时验证

JS运动

匀速运动

方块运动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #div1 { width: 200px; height: 200px; background: lightcoral; position: absolute; top: 50px; left: 50px; } </style> </head> <script> var timer = null; function startMove() { var oDiv = document.getElementById('div1'); var speed = 1; // 先将以前开过的定时器关闭，避免因为多次点击按钮后开了多个定时器从而让速度越来越快 clearInterval(timer); timer = setInterval(function () { // offsetLeft的作用就是取div的位置 if (oDiv.offsetLeft >= 300) { clearInterval(timer); } else { oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } }, 30) } </script> <body> <input type="button" value="开始运动" id="btn1" onclick="startMove()"> <div id="div1"></div> </body> </html> 运动框架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #div1 { width: 150px; height: 200px; background: lightcoral; position: absolute; top: 50px; left: -150px; } #div1 span { position: absolute; width: 20px; height: 60px; line-height: 20px; background: lightseagreen; right: -20px; top: 70px; } </style> </head> <script> window.onload = function () { var oDiv = document.getElementById('div1'); oDiv.onmouseover = function () { startMove(0); } oDiv.onmouseout = function () { startMove(150); } } var timer = null; function startMove(iTarget, speed) { var oDiv = document.getElementById('div1'); clearInterval(timer); timer = setInterval(function () { var speed = 0; // 通过现在位置和目标位置来判断speed从而判断向左还是向右 if (oDiv.offsetLeft > iTarget) { speed = -10; } else { speed = 10; } if (oDiv.offsetLeft === iTarget) { clearInterval(timer); } else { oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } }) } </script> <body> <div id="div1"> <span>分享到</span> </div> </body> </html> 淡入淡出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #div1 { width: 200px; height: 200px; background: lightcoral; opacity: 0.3; } </style> </head> <script> window.onload = function () { var oDiv = document.getElementById('div1'); oDiv.onmouseover = function () { startMove(100); } oDiv.onmouseout = function () { startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget) { var oDiv = document.getElementById('div1'); timer = setInterval(function () { var speed = 0; if (alpha < iTarget) { speed = 10; } else { speed = -10; } if (alpha === iTarget) { clearInterval(timer); } else { alpha += speed; oDiv.style.opacity = alpha / 100; } }, 30) } </script> <body> <div id="div1"> </div> </body> </html>

缓冲运动

⚠️ 速度取整

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #div1 { width: 200px; height: 200px; background: lightcoral; position: absolute; left: 0; top: 50px; } #div2 { width: 1px; height: 300px; position: absolute; left: 300px; top: 0; background: black; } </style> </head> <script> function startMove() { var oDiv = document.getElementById('div1'); setInterval(function () { // 这块除以10的理解： // 当物体和目标距离为300时，除以10之后的速度为30 // 当物体和目标具体为30时，除以10之后的速度为3 // 所以速度就是先快后慢 // 但是这块运动完毕之后并没有完全到300的那条线那去 // 是因为这块的最后距离并没有到，像素计算的原因（比如有的时候290和290.5的效果是一样的） var speed = (300 - oDiv.offsetLeft) / 10; // 需要用到向上/向下取整的方法将正负0.9取到1，这时就还可以往上走了 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); oDiv.style.left = oDiv.offsetLeft + speed + 'px'; }, 30) } </script> <body> <input type="button" value="开始移动" onclick="startMove()"> <div id="div1"></div> <div id="div2"></div> </body> </html> 底部悬浮框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { height: 3000px; } #div1 { width: 200px; height: 200px; background: lightcoral; position: absolute; right: 0; bottom: 0; } </style> </head> <script> window.onscroll = function () { var oDiv = document.getElementById('div1'); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight.scrollTop + 'px'; startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop) } var timer = null; function startMove(iTarget) { var oDiv = document.getElementById('div1'); clearInterval(timer); timer = setInterval(function () { var speed = (iTarget - oDiv.offsetTop) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (oDiv.offsetTop == iTarget) { clearInterval(timer); } else { oDiv.style.top = oDiv.offsetTop + speed + 'px'; } }, 30) } </script> <body> <div id="div1"></div> </body> </html> 对联悬浮框

就是随着桌面的滑动让这个悬浮框一直定位在右侧中间

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { height: 3000px; } #div1 { width: 100px; height: 200px; background: lightcoral; position: absolute; right: 0; bottom: 0; } </style> </head> <script> window.onscroll = function () { var oDiv = document.getElementById('div1'); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight.scrollTop + 'px'; startMove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + scrollTop)) } var timer = null; function startMove(iTarget) { var oDiv = document.getElementById('div1'); clearInterval(timer); timer = setInterval(function () { var speed = (iTarget - oDiv.offsetTop) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (oDiv.offsetTop == iTarget) { clearInterval(timer); } else { oDiv.style.top = oDiv.offsetTop + speed + 'px'; } }, 30) } </script> <body> <div id="div1"></div> </body> </html>

匀速运动的停止

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #div1 { width: 100px; height: 200px; background: lightcoral; position: absolute; left: 0; top: 50px; } #div2 { width: 1px; height: 300px; position: absolute; left: 300px; top: 0; background: black; } #div3 { width: 1px; height: 300px; position: absolute; left: 100px; top: 0; background: black; } </style> </head> <script> var timer = null; function startMove(iTarget) { var oDiv = document.getElementById('div1'); timer = setInterval(function () { var speed = 0; if (oDiv.offsetLeft < iTarget) { speed = 7; } else { speed = -7; } if (Math.abs(iTarget - oDiv.offsetLeft) <= 7) { clearInterval(timer); oDiv.style.left = iTarget + 'px'; } else { oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } }, 30) } </script> <body> <input type="button" value="到100" onclick="startMove(100)"> <input type="button" value="到300" onclick="startMove(300)"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </body> </html> 多个物体同时运动

每个物体有一个定时器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 50px; background: lightcoral; margin: 10px; } </style> </head> <script> window.onload = function () { var oDiv = document.getElementsByTagName('div'); for (var i = 0; i < oDiv.length; i++) { oDiv[i].timer = null; oDiv[i].onmouseover = function () { startMove(this, 400); } oDiv[i].onmouseout = function () { startMove(this, 100); } } } // var timer = null; function startMove(obj, iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { var speed = (iTarget - obj.offsetWidth) / 6; speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (obj.offsetWidth === iTarget) { clearInterval(obj.timer); } else { obj.style.width = obj.offsetWidth + speed + 'px'; } }, 30) } </script> <body> <div></div> <div></div> <div></div> </body> </html> 多物体运动框架

在多物体框架里面，所以东西都不能公用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 200px; height: 200px; background: lightcoral; float: left; margin: 20px; opacity: 0.3; border: 1px solid black; } </style> </head> <script> window.onload = function () { var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); oDiv1.onmouseover = function () { startMove(this, 'height', 400) } oDiv1.onmouseout = function () { startMove(this, 'height', 200) } oDiv2.onmouseover = function () { startMove(this, 'width', 400) } oDiv2.onmouseout = function () { startMove(this, 'width', 200) } } function getStyle(obj, name) { return getComputedStyle(obj, false)[name]; } function startMove(obj, attr, iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { var cur = parseInt(getStyle(obj, attr)); var speed = (iTarget - cur) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (cur === iTarget) { clearInterval(obj.timer); } else { obj.style[attr] = cur + speed + 'px'; } }, 30) } </script> <body> <div id="div1">变宽</div> <div id="div2">变高</div> </body> </html> 任意值运动框架

Math.ceil() 向上取整 Math.floor() 向下取整 Math.round() 四舍五入

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 200px; height: 200px; background: lightcoral; float: left; margin: 20px; opacity: 0.3; border: 1px solid black; opacity: 0.3; } </style> </head> <script> window.onload = function () { var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); oDiv1.onmouseover = function () { startMove(this, 'width', 100) } oDiv1.onmouseout = function () { startMove(this, 'width', 30) } } function getStyle(obj, name) { return getComputedStyle(obj, false)[name]; } function startMove(obj, attr, iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { var cur = 0; if (attr === "opacity") { cur = parseFloat(getStyle(obj, attr)) * 100; } else { cur = parseInt(getStyle(obj, attr)); } var speed = (iTarget - cur) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (cur === iTarget) { clearInterval(obj.timer); } else { if (attr === 'opacity') { obj.style.opacity = (cur + speed) / 100; } else { obj.style[attr] = cur + speed + 'px'; } } }, 30) } </script> <body> <div id="div1"></div> </body> </html> 仿flash图片展示

move.js

style.css

body{ background: #666; } ul{ padding: 0; margin: 0; } li{ list-style: none; } img{ border: 0; } .play{ width: 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px; } .big_pic{ width: 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc; background: #222; position: relative; } .big_pic li { width: 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; background-image: url(img/img_6.jpeg) no-repeat center center; } .mark-left{ width: 200px; height: 320px; position: absolute; top: 0; left: 0; background: red; opacity: 0; z-index: 3000; } .mark-right{ width: 200px; height: 320px; position: absolute; top: 0; left: 200px; background: green; opacity: 0; z-index: 3000; } .big_pic .prev{ width: 60px; height: 60px; background: url(img/img_6.jpeg) no-repeat; position: absolute; top: 130px; left: 10px; z-index: 3001; opacity: 0; cursor: pointer; } .big_pic .next{ width: 60px; height: 60px; background: url(img/img_6.jpeg) no-repeat 0 -60px; position: absolute; top: 130px; right: 10px; z-index: 3001; opacity: 0; cursor: pointer; } .big_pic.text{ position: absolute; left: 10px; top: 302px; z-index: 3000; color: #ccc; } .big_pic .length{ position: absolute; right: 10px; bottom: 4px; z-index: 3000; color: #ccc; } .big_pic .bg{ width: 400px; height: 25px; background: #000; opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; } .small_pic { width: 380px; height: 94px; position: relative; top: 7px; left: 10px; overflow: hidden; } .small_pic ul{ height: 94px; position: absolute; top: 0; left: 0; } .small_pic li{ width: 120px; height: 94px; float: left; padding-right: 10px; /* background: url(img/img_6.jpeg) no-repeat center center; */ cursor: pointer; opacity: 0.6; } .small_pic img{ width: 120px; height: 94px; }

html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="move.js"></script> <style></style> </head> <script> function getByClass(oParent, sClass) { var aEle = oParent.getElementByTagName('*'); var aResult = []; for (var i = 0; i < aEle.length; i++) { if (aEle[i].className === sClass) { aResult.push(aEle[i]); } } } window.onload = function () { var oDiv = document.getElementById('playimages'); var oBtnPrev = getByClass(oDiv, 'prev')[0]; var oBtnNext = getByClass(oDiv, 'next')[0]; var oMarkLeft = getByClass(oDiv, 'mark_left')[0]; var oMarkRight = getByClass(oDiv, 'mark_right')[0]; var oDivSmall = getByClass(oDiv, 'small_pic')[0]; var oUlSmall = oDivSmall.getElementByTagName('ul')[0]; var aLiSmall = oDivSmall.getElementByTagName('li'); var nowZIndex = 2; var now = 0; oUlSmall.style.width = aLiSmall.length.aLiSmall[0].offsetWidth + 'px'; var oUlBig = getByClass(oDiv, 'big_pic')[0]; var aLiBig = oUlBig.getElementByTagName('li'); // 左右按钮 oBtnPrev.onmouseover = oMarkLeft.onmouseover = function () { startMove(oBtnPrev, 'opacity', 100) } oBtnPrev.onmouseout = oMarkLeft.onmouseout = function () { startMove(oBtnPrev, 'opacity', 0) } oBtnNext.onmouseover = oMarkRight.onmouseover = function () { startMove(oBtnNext, 'opacity', 100) } oBtnNext.onmouseout = oMarkRight.onmouseout = function () { startMove(oBtnNext, 'opacity', 0) } // 大图切换 for (var i = 0; i < aLiSmall.length; i++) { aLiSmall[i].index = i; aLiSmall[i].onclick = function () { // 当点击小图的时候，应该把大图的层级往上提 if (this.index === now) return; now = this.index; tab(); } aLiSmall[i].onmouseover = function () { startMove(this, 'opacity', 100) } aLiSmall[i].onmouseout = function () { if (this.index != 0) { startMove(this, 'opacity', 60); } } } function tab() { aLiBig[now].style.zIndex = nowZIndex++; for (var i = 0; i < aLiSmall.length; i++) { startMove(aLiSmall[i], 'opacity', 60) } startMove(aLiSmall[now], 'opacity', 100); aLiBig[now].style.height = 0; startMove(aLiBig[now], 'height', 320); // 小图滚动 if (now === 0) { // 当是第一张时，永远贴着左边 startMove(oUlSmall, 'left', 0); } else if (now === aLiSmall.length - 1) { // 当时最后一张时，永远贴着右边 startMove(oUlSmall, 'left', -(now - 2) * aLiSmall[0].offsetWidth) } else { // 中间的滑动 startMove(oUlSmall, 'left', -(now - 1) * aLiSmall[0].offsetWidth); } } oBtnPrev.onclick = function () { now--; if (now === -1) { now = aLiSmall.length - 1; } tab(); } oBtnNext.onclick = function () { now++; if (now === aLiSmall.length) { now = 0; } tab(); } // 下方小图自动播放 var timer = setInterval(oBtnNext.onclick, 2000); oDiv.onmouseover = function () { clearInterval(timer); } oDiv.onmouseout = function () { timer = setInterval(oBtnNext.onclick, 2000); } } </script> <body> <div id="playimages" class="play"> <ul class="big_pic"> <div class="prev"></div> <div class="next"></div> <div class="text">加载图片说明...</div> <div class="length">计算图片上说明...</div> <a href="javascript:;" class="mark_left"></a> <a href="javascript:;" class="mark_right"></a> <div class="bg"></div> <li style="z-index: 1"><img src="img/img_1.jpeg" alt=""></li> <li><img src="img/img_2.jpeg" alt=""></li> <li><img src="img/img_3.jpeg" alt=""></li> <li><img src="img/img_4.jpeg" alt=""></li> <li><img src="img/img_5.jpeg" alt=""></li> </ul> <div class="small_pic"> <ul style="width: 390px"> <li style="filter: 100;opacity: 1;"><img src="img/img_1.jpeg" alt=""></li> <li><img src="img/img_2.jpeg" alt=""></li> <li><img src="img/img_3.jpeg" alt=""></li> <li><img src="img/img_4.jpeg" alt=""></li> <li><img src="img/img_5.jpeg" alt=""></li> </ul> </div> </div> </body> </html>

最新回复(0)