第3篇快速入门—js基础实战应用代码分享
DOM--节点的增删改查CRUD，DOM--例子:设置新闻字体， DOM的一个小例子---制作一个下拉菜单
DOM--节点的增删改查CRUD
<!DOCTYPE html>
<html>
<head>
<title>DOM--节点的增删改查CRUD</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
p {
border: #00ccff solid 1px;
width: 200px;
height: 30px;
}
</style>
<script type="text/javascript">
//创建纯"文本节点"
function createAndAdd1(){
var objp = document.getElementById("p1");
var oTextNode = document.createTextNode("this is a text");
objp.appendChild(oTextNode);
}
//创建"标签元素"
function createAndAdd2(){
//创建一个标签节点:<input type="button" value="OK"/>
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 = "<input type='button' value='OK'/>";
//objp3.innerHTML += "<input type='button' value='OK'/>";
objp3.innerHTML += "<a href='http://www.baidu.com'>百度</a>";
}
//////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查////前面早讲了
</script>
</head>
<body>
<p id="p1">
111
</p>
<p id="p2">
222
</p>
<p id="p3">
3333
</p>
<input type="button" value="创建并添加节点1" onclick="createAndAdd1();">
<br/>
<input type="button" value="创建并添加节点2" onclick="createAndAdd2();">
<br/>
<input type="button" value="创建并添加节点3" onclick="createAndAdd3();">
<br/>
<br/>
<br/>
<input type="button" value="删除节点" onclick="delNode();">
<br/>
<input type="button" value="移动替换节点" onclick="updateNode();">
<br/>
<input type="button" value="拷贝替换节点" onclick="updateNode2();">
<br/>
<br>
</body>
</html>登录后复制
DOM--例子:设置新闻字体
<!DOCTYPE html>
<html>
<head>
<title>DOM--例子:设置新闻字体</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
p{
border:#00ccff solid 1px;
width:500px;
height:300px;
}
</style>
<script type="text/jscript">
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";
}
</script>
</head>
<body>
<a href="#" onclick="changeFont();">大字体</a>
<a href="javascript:changeFont2();">中字体</a>
<a href="javascript:void(0);" onclick="changeFont3();"> 小字体</a>
<hr/>
<!-- 用HTML的方式手动测试字体设置
<p id="newstext" style="font-size:18pt;">
-->
<p id="newstext">
根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
</p>
</body>
</html>登录后复制
<!DOCTYPE html>
<html>
<head>
<title>DOM--例子:设置新闻字体</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
p {
border: #00ccff solid 1px;
width: 500px;
height: 300px;
}
</style>
<script type="text/javascript">
function changeFont(size,color){
var objText=document.getElementById("newstext");
objText.style.fontSize=size+"pt";
objText.style.color=color;
}
</script>
</head>
<body>
<a href="javascript:changeFont(20,'red');">大字体</a>
<a href="javascript:changeFont(18,'yellow');">中字体</a>
<a href="javascript:changeFont(16,'blue');">小字体</a>
<hr/>
<p id="newstext">
根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
</p>
</body>
</html>登录后复制
<!DOCTYPE html>
<html>
<head>
<title>DOM--例子:设置新闻字体</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
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;
}
</style>
<script type="text/javascript">
function changeFont(selectorName){
var objText=document.getElementById("newstext");
objText.className=selectorName;
}
</script>
</head>
<body>
<a href="javascript:changeFont('max');">大字体</a>
<a href="javascript:changeFont('norm');">中字体</a>
<a href="javascript:changeFont('min');"> 小字体</a>
<hr/>
<!--先用HTML的方式测试一下
<p id="newstext" class="max">
-->
<p id="newstext">
根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
</p>
</body>
</html>登录后复制
<!DOCTYPE html>
<html>
<head>
<title>DOM--例子:设置新闻字体</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/2.css" id="link1"/>
<style type="text/css">
a:link,a:visited{
color:#ff0000;
text-decoration:none;
}
a:hover{
color:#0000ff;
}
span:hover{
color:#0000ff;
background-color:#80ffff;
cursor:pointer;
}
</style>
<script type="text/javascript">
function changeFont(selectorName){
var objText=document.getElementById("newstext");
objText.className=selectorName;
}
function changeSuit(sNum)
{
var objLink=document.getElementById("link1");
objLink.href="css/"+sNum+".css";
}
</script>
</head>
<body>
<span onclick="changeSuit('1')">风格1</span>
<span onclick="changeSuit('2')">风格2</span>
<a href="javascript:changeFont('max');">大字体</a>
<a href="javascript:changeFont('norm');">中字体</a>
<a href="javascript:changeFont('min');"> 小字体</a>
<hr/>
<!--先用HTML的方式测试一下
<p id="newstext" class="max">
-->
<p id="newstext">
根据《教育部学位中心关于2018年中外合作办学评估网上公示工作的通知》（学位中心[2018]55号）的相关要求，现将湖南城市学院与新西兰维特利亚理工学院合作举办视觉传达设计专业本科教育项目的2018年评估信息进行网上公示，接受社会监督。
</p>
</body>
</html>登录后复制
DOM的一个小例子---制作一个下拉菜单
<!DOCTYPE html>
<html>
<head>
<title>3listMenu.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
#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;
}
</style>
<script type="text/jscript">
function list(liNode){
var ulNode=document.getElementsByTagName("ul")[0];
with(ulNode.style){
display= display=="block"?"none":"block" ;
}
}
</script>
</head>
<body background="bg-img.jpg">
<!-- 制作一个下拉菜单：1)封装数据 2)定义基本样式 -->
<p id="newsid">
<ul id="newslist">
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">城院新闻</a>
<ul style="display:none;">
<li>
<a href="http://www.hncu.net/">校园新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">校园新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">校园新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">校园新闻内容摘要</a>
</li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">大学新闻</a>
<ul style="display:none;">
<li>
<a href="http://www.hncu.net/">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">大学新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">大学新闻内容摘要</a>
</li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">社会新闻</a>
<ul style="display:none;">
<li>
<a href="http://www.hncu.net/">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">社会新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">社会新闻内容摘要</a>
</li>
</ul>
</li>
<li onmouseover="list(this)"; onmouseout="list(this)">
<a href="javascript:void(0)">就业新闻</a>
<ul style="display:none;">
<li>
<a href="http://www.hncu.net/">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">就业新闻内容摘要</a>
</li>
<li>
<a href="http://www.hncu.net/">就业新闻内容摘要</a>
</li>
</ul>
</li>
</ul>
</p>
</body>
</html>登录后复制
用表格+列表封装菜单
<!DOCTYPE html>
<html>
<head>
<title>用表格+列表封装菜单</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
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;
}
</style>
<script type="text/javascript">
function list(objANode){
var oTdNode=objANode.parentNode;
//当前用户点击的菜单块对象：oulNode
var 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";
}
*/
}
</script>
</head>
<body>
<table id="tabFriends">
<tr>
<td>
<a href="javascript:void(0);" onclick="list(this);">好友菜单1</a>
<ul>
<li><a href="action1">一个好友11</a></li>
<li><a href="action2">一个好友12</a></li>
<li><a href="action3">一个好友13</a></li>
<li><a href="action4">一个好友14</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0);" onclick="list(this);">好友菜单2</a>
<ul>
<li>一个好友21</li>
<li>一个好友22</li>
<li>一个好友23</li>
<li>一个好友24</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0);" onclick="list(this);">好友菜单3</a>
<ul>
<li>一个好友31</li>
<li>一个好友32</li>
<li>一个好友33</li>
<li>一个好友34</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0);" onclick="list(this);">好友菜单4</a>
<ul>
<li>一个好友41</li>
<li>一个好友42</li>
<li>一个好友43</li>
<li>一个好友44</li>
</ul>
</td>
</tr>
</table>
</body>
</html>登录后复制
相关文章：
第1篇快速入门—js基础实战中的Date、Math、Global对象
第2篇快速入门 —js基础实战BOM--浏览器对象模型、DOM
相关视频：
以上是第3篇快速入门—js基础实战应用代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前
By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何在浏览器中优化JavaScript代码以进行性能？
Mar 18, 2025 pm 03:14 PM
本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。
如何使用浏览器开发人员工具有效调试JavaScript代码？
Mar 18, 2025 pm 03:16 PM
本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。
谁得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。
如何使用源地图调试缩小JavaScript代码？
Mar 18, 2025 pm 03:17 PM
本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。
console.log输出结果差异：两次调用为何不同？
Apr 04, 2025 pm 05:12 PM
深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异，并解释其背后的原因。�...
初学者的打字稿，第2部分：基本数据类型
Mar 19, 2025 am 09:10 AM
掌握了入门级TypeScript教程后，您应该能够在支持TypeScript的IDE中编写自己的代码，并将其编译成JavaScript。本教程将深入探讨TypeScript中各种数据类型。 JavaScript拥有七种数据类型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。TypeScript在此基础上定义了更多类型，本教程将详细介绍所有这些类型。 Null数据类型 与JavaScript一样，TypeScript中的null
