摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学习总结</title> <style&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习总结</title>
<style>
*{
margin: 0px;
padding: 0px;
}
ul li{
background-color: rgb(239, 243, 17);
width: 120px;
height: 30px;
margin: 5px 10px 0 15px;
line-height: 30px;
text-align: center;
float: left;float: left;
list-style: none;
border-radius: 10px;
}
a{
font-weight: bold;
color: red;
text-decoration: none;
}
a[href="http://www.php.cn"]{
color: aqua;
}
a:hover{
font-size: 20px;
color:deeppink;
text-decoration:underline;
}
#left{
width: 400px;
height: 500px;
background-color: darkorange;
border-radius: 10px;
float: left;
margin:10px 10px 0px 10px;
}
.userinfo {
margin: 20px 0px 0px 50px; /*设置用户名位置*/
}
.input {
margin-left:5px; /*用户名和密码 从左往右移动5px*/
}
#myDay{
margin: 15px 0 0 30px;
}
#right{
width: 550px;
height: 500px;
background-color:red;
border-radius: 10px;
float: left;
margin: 10px 0px 10px 0px;
}
.main-right2{
width: 500px;
margin: 20px 30px 0 30px;
}
#bbb{
color:mediumvioletred;
text-align: center;
}
p{
text-indent: 2em;
}
#foot{
float: left;
width: 960px;
height: 40px;
background-color: darkorange;
border-radius: 10px;
margin: 0px 0 10px 10px;
}
.clear{clear:both;}
</style>
</head>
<body>
<div id="container">
<div id="top">
<ul>
<li><a href="#">首页</a> </li>
<li><a href="http://www.php.cn">PHP中文网</a></li>
<li><a href="#">百度</a> </li>
<li><a href="#">网易</a> </li>
<li><a href="#">腾讯</a></li>
</ul>
<img src="/xuexi/static/images/banner1.jpg" onmouseover="myimg(this)" id="img_1">
</div>
<div class="clear"></div>
<div id=left>
<div class="userinfo">
<form method="get/post" action="url地址">
用户名 <input type="text" name="username" size="14" class="input" /><br/><br/>
密 码 <input type="text" name="username" size="14"class="input" /><br/><br/>
密 码 <input type="text" name="username" size="14"class="input" /><br/><br/>
<button>提交按钮按钮</button>
<input name="提交按钮名称" type="submit" value="提交"/>
<input type="reset" value="重置按钮"/> <br/>
</form>
</div>
<hr>
<div id="myDay">
<button onclick="myday(this)">点击显示当前标准时间英文</button>
<p id=myDay_1></p>
<br>
<hr>
<br>
<button onclick="myday_3(this)">点击显示数字事件</button>
<p id="myday_12"></p>
</div>
</div>
<div id="right">
<div class="main-right2">
<h1 id="bbb" onclick="guoxue(tihs)">国学鉴赏</h1>
<p>一般来说<em>“国学”</em>又称“汉学”或“中国学”，泛指传统的中华文化与学术。国学包括
中国古代的哲学、史学、宗教学、文学、礼俗学、考据学、伦理学以及中医学、农学、术数、地理、
政治、经济及书画、音乐、建筑等诸多方面。现“国学”概念产生于二十世纪二十年代，当时 “西学
东渐”改良之风正值炽热，张之洞、魏源等人为了与西学相对，提出“中学”（中国之学）这一概念，
并主张 “中学为体，西学为用”，一方面学习西方文明，同时又恢复两汉经学。
</p>
</div>
</div>
<div id="foot">
<div class="foot1">
<ul>
<li ><a href="#">联系我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<script>
//获取当前时间
function myday(X){
myday_2 = new Date();
document.getElementById("myDay_1").innerHTML=(myday_2);
}
//显示数字的时间
function myday_3(x){
var myday_b= new Date();
var myday_4= myday_b.getFullYear();
var b=["01","02","03","04","05","06","07","08","09","10","11","12"]
var myday_5=b[myday_b.getMonth()];
var myday_6= myday_b.getDate();
var myday_7= myday_b.getDay();
var myday_8= myday_b.getHours();
var myday_9= myday_b.getMinutes();
var myday_10= myday_b.getSeconds();
var myday_11=document.getElementById("myday_12")
myday_11.innerHTML=(myday_4+"年"+myday_5+"月"+myday_6+"日"+"今天是星期"+myday_7+",时间"+ myday_8+"点"+myday_9+"分"+myday_10+"秒");
}
//头部container 部分JS ID获取
var container = document.getElementById("container");
container.style.width="980px";
container.style.margin="0px auto";
container.style.paddingTop="10px";
container.style.backgroundColor="#CCCC";
container.style.borderRadius="10px";
//头部 top
var top_a=document.getElementById("top");
top_a.style.width="960px";
top_a.style.height="40px";
top_a.style.backgroundColor="darkorange";
top_a.style.borderRadius="10px";
top_a.style.margin="0px auto"
//控制图片大小 鼠标放到上面换图
function myimg(x){
var a= document.getElementById("img_1")
a.src="/xuexi/static/images/music.jpg"
a.style.width="200px"
}
//以下的 获取ID / P标签 / class名 都不成功. 单独在一个网页上运行都可以,但是在这个里面就获取不到.
//望与指导,谢谢!!!
//h1 修改内容
function guoxue(x){
document.getElementById("bbb").innerHTML="修改的内容";
}
//p 标签内容修改
document.getElementsByTagName("p").innerHTML="p标签修改内容"
//清除浮动
document.getElementsByClassName("clear").style.clear="both";
</script>
</body>
</html>
总结:查找html 元素,必须通过 CLASS名或者ID名称或者标签来获得html元素节点,
通过 id来查找: document.getElementById("id名");
通过class查找: document.getElementsByClassName("class名");
通过标签名(tag name)查找: document.getElementsByTagName("标签名");
获得了huml元素后,如果要修改内容可以使用innerHTML来改变huml元素内容.
如果要修改CSS样式, 也是获取html元素后,使用.style.属性名="属性值"来修改CSS样式.
时间对象:要获取某一个时间(比如年/月/日/星期/小时等),必须先获取当前时间的基础之上,然后才能获取到当前
某一个时间的节点.
备注: 老师您好, h1我使用了一个id名称来获取并修改内容,但在这个网页上获取不到h1的id信息,在单独一个
网页上就能获取的到,并能成功修改.
使用document.getElementsByTagName("p")的方法也是获取不到p 标签.
使用document.getElementsByClassName("clear")也是获取不到class名为clear的的标签.
请给与指导,谢谢!
批改老师：天蓬老师批改时间：2019-01-28 17:42:58
老师总结：document.getElementsByTagName("p"), document.getElementsByClassName("clear"), 返回的是一个HTMLColection对象, 即HTML对象集合, 是一个由整数索引元素与length属性组成的类数组数据结构, 需要通过索引属性来访问, 如:
document.getElementsB
