海淀企业网站建设,wordpress 搬家,数字校园建设专题网站,wordpress如何修改代码目录
本章目标
一.DOM对象概念
编辑 二.节点访问方法 常用方法#xff1a; 层次关系访问节点 三.节点信息 四.节点的操作方法
操作节点的属性 创建节点 删除替换节点
五.节点操作样式 style属性
class-name属性 六.获取元素位置
总结
本章目标
了解DOM的分类和节…目录
本章目标
一.DOM对象概念
编辑 二.节点访问方法 常用方法 层次关系访问节点 三.节点信息 四.节点的操作方法
操作节点的属性 创建节点 删除替换节点
五.节点操作样式 style属性
class-name属性 六.获取元素位置
总结
本章目标
了解DOM的分类和节点间的关系熟练使用JavaScript操作DOM节点
访问DOM节点 能够熟练的进行节点的创建、添加、删除、替换等 能够熟练的设置元素的样式 能够灵活运用JavaScript获取元素位置的属性来完成网页效果
一.DOM对象概念 在JavaScript中DOM是JavaScript操作网页内容和结构的接口。DOM对象是HTML文档中的各个元素和节点的表示。通过DOM对象我们可以访问和操作网页中的元素、属性和事件。 DOM对象层次结构类似于一颗树根节点是document对象代表整个HTML文档。各个节点通过父子关系连接起来每个节点都有自身的属性和方法。 二.节点访问方法 常用方法 层次关系访问节点 访问步骤方法1
通过document对象获取根元素节点。使用根元素节点的方法和属性来访问其直接子节点。遍历子节点列表获取需要的节点。使用节点的方法和属性来进一步访问其子节点或父节点。重复步骤3和4直到达到所需的节点。
访问步骤方法2可以使用以下方法和属性来访问节点的层次关系 注通过层次关系访问节点的前提是代码必须在一行演示案例为方便演示未放一行。 基础演示案例
!DOCTYPE html
htmlhead langenmeta charsetutf-8title访问节点/titlestyle typetext/css#father{width: 300px;height: 175px;border:2px solid grey;margin: 0 auto;}ul{list-style: none; line-height: 2;}a{text-decoration:none}#first{display: inline;}#first a{position: relative; left: 190px;}li{position: relative; left: -35px;font-style: oblique;}/style/headbodysection idnewsdiv idfatherheader京东快报div idfirsta href#更多/a/div/headerhrullia href#京东无锡馆正式启动/a/lilia href#99元抢平板品牌配件199-100/a/lilia href#节能领跑京东先行/a/lilia href#高洁丝领券五折/a/li/ul/div /section /body 层次关系演示案例
script typetext/javascriptvar newsdoc document.getElementById(father);//innerHTML右边未赋值代表取出该标签中的元素并赋值给左边变量var message newsdoc.lastElementChild.firstElementChild.innerHTML;window.alert(message);
/script 三.节点信息 基础演示案例
!DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbodyul idnodeListlinodeName节点名称/lilinodeValue节点值/lilinodeType节点类型/li/ulp/p/bodyscript typetext/javascriptvar nodes document.getElementById(nodeList);var type1 nodes.firstChild.nodeType;var type2 nodes.firstChild.firstChild.nodeType;var name1 nodes.firstChild.firstChild.nodeName;var value1 nodes.firstChild.firstChild.nodeValue;document.write(节点lt;ligt;nodeName节点名称lt;/ligt;的类型为type1/br);document.write(节点nodeName节点名称的类型为type2/br);document.write(节点nodeName节点名称的名称为name1/br);document.write(节点nodeName节点名称的数值为value1);/script
/html 四.节点的操作方法
操作节点的属性 index.setAttribute(属性名,属性值)在节点index中添加一个属性并给添加的属性赋值index.getAttribute(属性名)获取index节点中的属性名所对应的值 通过操作节点的属性从而实现点击对应的按钮显示对应的图片 演示案例
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle*{font-size: 12px; font-family: Arial, 微软雅黑; line-height: 25px;}div{padding: 5px; text-align: center;}div span{display: block;}/style/headbodyp选择你喜欢的书input typeradio namebook onclickbook()我和狗狗一起活下来input typeradio namebook onclickbook()灰霾来了怎么办/pdivimg src alt idimage onclickimg()/span/span/divscript typetext/javascriptfunction book(){var imagedoc document.getElementById(image);//getElementsByName(book):选中所有namebook的节点并返回一个集合赋值给booksdocvar booksdoc document.getElementsByName(book);//booksdoc[0].checked如果选择booksdoc[0](booksdoc集合中第一个节点)if(booksdoc[0].checked){//将属性名src 属性值WebProect/dog.jpg 赋值给imagedocimagedoc.setAttribute(src,WebProect/dog.jpg);imagedoc.setAttribute(alt,我和狗狗一起活下来);imagedoc.nextSibling.innerHTML 我和狗狗一起活下来;}else if(booksdoc[1].checked){imagedoc.setAttribute(src,WebProect (2)/mai.jpg); imagedoc.setAttribute(alt,灰霾来了怎么办);imagedoc.nextSibling.innerHTML 灰霾来了怎么办; }}function img(){var messagealt document.getElementById(image).getAttribute(alt);window.alert(该图片的alt属性值是messagealt);}/script/body
/html 创建节点 点击我和狗狗一起活下来会再次生成一个同样的图片 点击灰霾来了怎么办窗口会进行弹窗 !DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle*{font-size: 12px; font-family: Arial, 微软雅黑; line-height: 25px;}div{padding: 5px; text-align: center;}div span{display: block;}/style/headbodyp选择你喜欢的书input typeradio namebook onclickbook()我和狗狗一起活下来input typeradio namebook onclickbook()灰霾来了怎么办/pdiv/divscript typetext/javascriptfunction img(){window.alert(灰霾来了怎么办);}function book(){var divdoc document.getElementsByTagName(div)[0];var booksdoc document.getElementsByName(book);if(booksdoc[0].checked){//document.createElement(img):在当前文档中创建一个img标签 var imagedoc document.createElement(img); //等价于img ///以下三行都使用setAttribute()来给变量imagedoc添加属性并给添加的属性赋值imagedoc.setAttribute(src,WebProect/dog.jpg); //等价于img src images/dog.jpg /imagedoc.setAttribute(alt,我和狗狗一起活下来);//等价于img src images/dog.jpg alt我和狗狗一起活下来 /imagedoc.setAttribute(onclick,copyNode());//使用appendChild()在divdoc节点中追加一个子元素imagedocdivdoc.appendChild(imagedoc);}else if(booksdoc[1].checked){var imagedoc document.createElement(img); //img / imagedoc.setAttribute(src,WebProect (2)/mai.jpg); imagedoc.setAttribute(alt,灰霾来了怎么办);imagedoc.setAttribute(onclick,img());divdoc.appendChild(imagedoc); }}function copyNode(){//选中div并赋值给divdocvar divdoc document.getElementsByTagName(div)[0];//选中divdoc中的最后一个节点并赋值该节点var clonedoc divdoc.lastChild.cloneNode(false);//将clonedoc添加到divdoc中divdoc.appendChild(clonedoc);}/script/body
/html 删除替换节点 演示案例
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle*{padding: 0; margin: 0; font-size: 12px;}ul,li{list-style: none;}li{float: left; text-align: center; width: 140px;}/style/headbodyulliimg srcWebProect/f01.jpg idfirstpinput typebutton value删除我吧 onclickdel()/p/liliimg srcWebProect/f02.jpg idsecondpinput typebutton value换换我吧 onclickrep()/p/li/ulscript typetext/javascriptfunction del(){var delNode document.getElementById(first);//删除一个节点需要通过该节点的父节点删除该节点//delNode.parentNode:代表返回delNode的父节点//delNode.parentNode.removeChild(delNode):代表delNode的父节点删除子节点delNodedelNode.parentNode.removeChild(delNode);}function rep(){var oldNodedocument.getElementById(second);var newNode document.createElement(img);newNode.setAttribute(src,WebProect/f03.jpg);oldNode.parentNode.replaceChild(newNode,oldNode);} /script /body
/html
五.节点操作样式 JavaScript中的节点操作样式可以用于改变HTML元素的外观和布局。通过修改节点的样式属性可以改变元素的大小、颜色、字体以及位置等 style属性 演示案例 当鼠标移动到“我的购物车”后显示购物车内容鼠标离开后购物车内容消失
!DOCTYPE html
html
head langenmeta charsetUTF-8title我的购物车/titlestyle typetext/css*{margin: 0;padding: 0; font-family: Arial, 微软雅黑; font-size: 12px; line-height: 25px;}ul,li{list-style: none;}#shopping{margin: 20px auto 0 auto; width: 320px;}#cart{background: #f9f9f9 url(../images/cart.png) 20px 6px no-repeat;border: solid 1px #dcdcdc;float: right;width: 100px;height: 28px;padding-left: 45px;line-height: 28px;position: relative;cursor: pointer;}#cart span{position: absolute;color: #fff;background: #dc1742;display: block;width: 15px;height: 15px;border-radius: 50%;top:-5px;right: 20px;font-size: 8px; line-height: 15px;text-align: center;}//使用display: none使div边框隐藏#cartList{width: 310px; float: right; border: solid 1px #dcdcdc; display: none;}#cartList h2{border-bottom: 1px dashed #cccccc; font-size: 14px; padding-left: 10px;}#cartList li{float: left;}#cartList li:nth-of-type(1){width: 65px; text-align: center;}#cartList li:nth-of-type(2){width: 155px;}#cartList li:nth-of-type(3){text-align: center; width: 85px;}#cartList .footer{clear: both; height: 35px; line-height: 35px; background: #f5f5f5; padding:0 5px;}#cartList .footer span{padding: 0 12px;}#cartList .footer span:nth-of-type(2){color: #fff;background: #dc1742;display: block;height: 25px;border-radius: 6px; float: right;text-align: center;font-weight: bold;margin-top: 5px;}/style
/head
body
section idshopping!--onmouseoverover():鼠标移动到对象后调用over()--!--onmouseoutout():鼠标离开对象后调用out()函数--div idcart onmouseoverover() onmouseoutout()我的购物车span1/span/divdiv idcartListh2最新加入的商品/h2ulliimg srcimages/makeup.jpg/lili倩碧经典三部曲套装液体皂200ml明肌2号水200ml润肤乳125ml/lili¥558.00×1br/删除/li/uldiv classfooter共1件商品span共计¥558.00/span span去购物车/span/div/div
/section
script typetext/javascriptfunction over(){document.getElementById(cart).style.backgroundColor #ffffff;//使用zIndex提高层级优先显示document.getElementById(cart).style.zIndex 100;//style.borderBottom none:删除下边框document.getElementById(cart).style.borderBottom none;document.getElementById(cartList).style.displayblock;document.getElementById(cartList).style.positionrelative;document.getElementById(cartList).style.top-1px;}//将out函数中执行的代码反向操作即可完成鼠标离开后div边框收回的操作function out(){//还原背景颜色document.getElementById(cart).style.backgroundColor #f9f9f9;//还原下边框document.getElementById(cart).style.borderBottomsolid 1px #dcdcdc;//使出现的div边框消失document.getElementById(cartList).style.displaynone;}
/script
/body
/html class-name属性 上述购物车案例也可通过下述class-name属性实现 class-name属性的本质是直接调用CSS中的样式。 script typetext/javascriptfunction over(){//className cartOver:等价于直接调用CSS中classcartOver的所有样式document.getElementById(cart).className cartOver; document.getElementById(cartList).className cartListOver;}function out(){document.getElementById(cart).className cartOut;document.getElementById(cartList).className cartListOut;}
/script 六.获取元素位置 总结
