dom–节点的增删改查crud，dom–例子:设置新闻字体， dom的一个小例子—制作一个下拉菜单
DOM–节点的增删改查CRUD
nbsp;html>DOM--节点的增删改查CRUD p { border: #00ccff solid 1px; width: 200px; height: 30px; } //创建纯"文本节点" function createAndAdd1(){ var objp = document.getElementById("p1"); var oTextNode = document.createTextNode("this is a text"); objp.appendChild(oTextNode); } //创建"标签元素" function createAndAdd2(){ //创建一个标签节点: var oInputNode = document.createElement("input"); oInputNode.type = "button"; oInputNode.value = "OK"; //把所创建标签元素 添加到 p1 中 var objp2 = document.getElementById("p1"); objp2.appendChild(oInputNode); } //一种通用的节点创建方式 //创建"标签元素" ---通过标签元素的innerText或innerHTML来实现 function createAndAdd3(){ var objp3 = document.getElementById("p1"); //objp3.innerText = "湖南"; //objp3.innerText +="湖南"; //objp3.innerHTML = ""; //objp3.innerHTML += ""; objp3.innerHTML += "百度"; } //////2删////// function delNode(){var objp = document.getElementById("p2");//objp.removeNode(true);//objp.removeNode(true);//连子树一起删除//objp.removeNode(false);//只删除当前标签节点，子树不删除//高版本建议采用removeChild()，删除更干净objp.parentNode.removeChild(objp); //自己找父节点删除 }//////3改////////移动替换function updateNode(){var objp2 = document.getElementById("p2");var objp3 = document.getElementById("p3");//高版本建议采用replaceChild()，替换更干净objp2.parentNode.replaceChild(objp3,objp2); //用p3替换p2}//拷贝替换function updateNode2(){var objp2 = document.getElementById("p2");var objp3 = document.getElementById("p3");//克隆节点//var objp3_2 = objp3.cloneNode();//空参即是false,不克隆属性及子节点--子树var objp3_2 = objp3.cloneNode(true);//参数为true,克隆属性及子节点--子树objp2.parentNode.replaceChild(objp3_2,objp2); //用p3替换p2}/////4查////前面早讲了111
222
3333
登录后复制
DOM–例子:设置新闻字体
nbsp;html>DOM--例子:设置新闻字体 p{border:#00ccff solid 1px;width:500px;height:300px;}function changeFont(){var oNewsText = document.getElementById("newstext");oNewsText.style.fontSize="20pt";}function changeFont2(){var oNewsText = document.getElementById("newstext");oNewsText.style.fontSize="16pt";}function changeFont3(){var oNewsText = document.getElementById("newstext");oNewsText.style.fontSize="12pt";} 大字体中字体 小字体
<!-- 用HTML的方式手动测试字体设置-->
根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
登录后复制
nbsp;html>DOM--例子:设置新闻字体 p { border: #00ccff solid 1px; width: 500px; height: 300px; } function changeFont(size,color){var objText=document.getElementById("newstext");objText.style.fontSize=size+"pt";objText.style.color=color;} 大字体中字体小字体
根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
登录后复制
nbsp;html>DOM--例子:设置新闻字体 p { border: #00ccff solid 1px; width: 500px; height: 300px; }.norm{color:#000000;font-size:16px;background-color:#cdd8d0;}.min{color:#ff0000;font-size:12px;background-color:#f9fac2;font-family:黑体;}.max{color:#808080;font-size:20px;background-color:#9ce9b4;} function changeFont(selectorName){var objText=document.getElementById("newstext");objText.className=selectorName;} 大字体中字体 小字体
<!--先用HTML的方式测试一下-->
根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
登录后复制
nbsp;html>DOM--例子:设置新闻字体 a:link,a:visited{ color:#ff0000; text-decoration:none; } a:hover{ color:#0000ff; } span:hover{ color:#0000ff;background-color:#80ffff;cursor:pointer; } function changeFont(selectorName){var objText=document.getElementById("newstext");objText.className=selectorName;}function changeSuit(sNum){ var objLink=document.getElementById("link1"); objLink.href="css/"+sNum+".css";} 风格1风格2 大字体中字体 小字体
<!--先用HTML的方式测试一下-->
根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
登录后复制
DOM的一个小例子—制作一个下拉菜单
nbsp;html>3listMenu.html <!----> #newsid ul{list-style:none;}#newslist li{float:left;width:180px;}#newslist li ul{margin:0px;padding:0px;}#newslist li ul li{line-height:25px;}#newslist li a{display:block;color:#ffffff;background-color:#0066cc;text-decoration:none;line-height:25px;text-align:center;}#newslist li a:hover{color:#0066cc;background-color:#999999;}#newslist li ul a{color:#000000;background-color:#0099ff;}#newslist li ul li a:hover{color:#0066ff;background-color:#999999;}#newslist li ul{display:none;}function list(liNode){ var ulNode=document.getElementsByTagName("ul")[0];with(ulNode.style){display= display=="block"?"none":"block" ;}}
登录后复制 城院新闻 校园新闻内容摘要 校园新闻内容摘要 校园新闻内容摘要 校园新闻内容摘要 大学新闻 大学新闻内容摘要 大学新闻内容摘要 大学新闻内容摘要 大学新闻内容摘要 社会新闻 社会新闻内容摘要 社会新闻内容摘要 社会新闻内容摘要 社会新闻内容摘要 就业新闻 就业新闻内容摘要 就业新闻内容摘要 就业新闻内容摘要 就业新闻内容摘要
用表格+列表封装菜单
nbsp;html>用表格+列表封装菜单 table ul{list-style:none;/*background-color:#ff0000;*/padding:0px;margin:0px;display:none; /*display:block; */}table{border: #8080ff;width:100px;}table td{border: #8080ff 1px solid;}table td a:link, table td a:visited{text-decoration:none;}table td a:hover{color:#df4011;}/*预定义两种菜单显示的类样式*/.open{display:block;}.close{display:none;} function list(objANode){var oTdNode=objANode.parentNode;//当前用户点击的菜单块对象：oulNodevar oulNode=oTdNode.getElementsByTagName("ul")[0];//遍历所有"菜单ul"，如果是当前菜单块且处于"非open"状态则设样式为"open",否则全部设成"close"样式var oTableNode=document.getElementById("tabFriends");var collUlNodes=oTableNode.getElementsByTagName("ul");for(var x=0;x<collUlNodes.length;x++){if(collUlNodes[x]==oulNode && oulNode.className !="open"){collUlNodes[x].className = "open";}else{collUlNodes[x].className = "close";}}/*过渡版本//ul的类样式有三种状态：open, close,空(初始时还未设)if(oUlNode.className=="open"){oUlNode.className="close";}else{oUlNode.className="open";}*/}
登录后复制好友菜单1一个好友11一个好友12一个好友13一个好友14好友菜单2一个好友21一个好友22一个好友23一个好友24好友菜单3一个好友31一个好友32一个好友33一个好友34好友菜单4一个好友41一个好友42一个好友43一个好友44
相关文章：
第1篇快速入门—js基础实战中的Date、Math、Global对象
第2篇快速入门 —js基础实战BOM–浏览器对象模型、DOM
相关视频：
前端JS开发27个经典实战视频教程-免费在线视频教程
以上就是第3篇快速入门—js基础实战应用代码分享的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2744926.html
