摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>學(xué)習(xí)總結(jié)</title> <style&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>學(xué)習(xí)總結(jié)</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://ipnx.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; /*設(shè)置用戶名位置*/
}
.input {
margin-left:5px; /*用戶名和密碼 從左往右移動(dòng)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="#">首頁(yè)</a> </li>
<li><a href="http://ipnx.cn">PHP中文網(wǎng)</a></li>
<li><a href="#">百度</a> </li>
<li><a href="#">網(wǎng)易</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)">點(diǎn)擊顯示當(dāng)前標(biāo)準(zhǔn)時(shí)間英文</button>
<p id=myDay_1></p>
<br>
<hr>
<br>
<button onclick="myday_3(this)">點(diǎn)擊顯示數(shù)字事件</button>
<p id="myday_12"></p>
</div>
</div>
<div id="right">
<div class="main-right2">
<h1 id="bbb" onclick="guoxue(tihs)">國(guó)學(xué)鑒賞</h1>
<p>一般來(lái)說(shuō)<em>“國(guó)學(xué)”</em>又稱“漢學(xué)”或“中國(guó)學(xué)”，泛指?jìng)鹘y(tǒng)的中華文化與學(xué)術(shù)。國(guó)學(xué)包括
中國(guó)古代的哲學(xué)、史學(xué)、宗教學(xué)、文學(xué)、禮俗學(xué)、考據(jù)學(xué)、倫理學(xué)以及中醫(yī)學(xué)、農(nóng)學(xué)、術(shù)數(shù)、地理、
政治、經(jīng)濟(jì)及書(shū)畫(huà)、音樂(lè)、建筑等諸多方面?，F(xiàn)“國(guó)學(xué)”概念產(chǎn)生于二十世紀(jì)二十年代，當(dāng)時(shí) “西學(xué)
東漸”改良之風(fēng)正值熾熱，張之洞、魏源等人為了與西學(xué)相對(duì)，提出“中學(xué)”（中國(guó)之學(xué)）這一概念，
并主張 “中學(xué)為體，西學(xué)為用”，一方面學(xué)習(xí)西方文明，同時(shí)又恢復(fù)兩漢經(jīng)學(xué)。
</p>
</div>
</div>
<div id="foot">
<div class="foot1">
<ul>
<li ><a href="#">聯(lián)系我們</a></li>
<li><a href="#">聯(lián)系我們</a></li>
<li><a href="#">聯(lián)系我們</a></li>
<li><a href="#">聯(lián)系我們</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<script>
//獲取當(dāng)前時(shí)間
function myday(X){
myday_2 = new Date();
document.getElementById("myDay_1").innerHTML=(myday_2);
}
//顯示數(shù)字的時(shí)間
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+",時(shí)間"+ myday_8+"點(diǎn)"+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"
//控制圖片大小 鼠標(biāo)放到上面換圖
function myimg(x){
var a= document.getElementById("img_1")
a.src="/xuexi/static/images/music.jpg"
a.style.width="200px"
}
//以下的 獲取ID / P標(biāo)簽 / class名 都不成功. 單獨(dú)在一個(gè)網(wǎng)頁(yè)上運(yùn)行都可以,但是在這個(gè)里面就獲取不到.
//望與指導(dǎo),謝謝!!!
//h1 修改內(nèi)容
function guoxue(x){
document.getElementById("bbb").innerHTML="修改的內(nèi)容";
}
//p 標(biāo)簽內(nèi)容修改
document.getElementsByTagName("p").innerHTML="p標(biāo)簽修改內(nèi)容"
//清除浮動(dòng)
document.getElementsByClassName("clear").style.clear="both";
</script>
</body>
</html>
總結(jié):查找html 元素,必須通過(guò) CLASS名或者ID名稱或者標(biāo)簽來(lái)獲得html元素節(jié)點(diǎn),
通過(guò) id來(lái)查找: document.getElementById("id名");
通過(guò)class查找: document.getElementsByClassName("class名");
通過(guò)標(biāo)簽名(tag name)查找: document.getElementsByTagName("標(biāo)簽名");
獲得了huml元素后,如果要修改內(nèi)容可以使用innerHTML來(lái)改變huml元素內(nèi)容.
如果要修改CSS樣式, 也是獲取html元素后,使用.style.屬性名="屬性值"來(lái)修改CSS樣式.
時(shí)間對(duì)象:要獲取某一個(gè)時(shí)間(比如年/月/日/星期/小時(shí)等),必須先獲取當(dāng)前時(shí)間的基礎(chǔ)之上,然后才能獲取到當(dāng)前
某一個(gè)時(shí)間的節(jié)點(diǎn).
備注: 老師您好, h1我使用了一個(gè)id名稱來(lái)獲取并修改內(nèi)容,但在這個(gè)網(wǎng)頁(yè)上獲取不到h1的id信息,在單獨(dú)一個(gè)
網(wǎng)頁(yè)上就能獲取的到,并能成功修改.
使用document.getElementsByTagName("p")的方法也是獲取不到p 標(biāo)簽.
使用document.getElementsByClassName("clear")也是獲取不到class名為clear的的標(biāo)簽.
請(qǐng)給與指導(dǎo),謝謝!
批改老師：天蓬老師批改時(shí)間：2019-01-28 17:42:58
老師總結(jié)：document.getElementsByTagName("p"), document.getElementsByClassName("clear"), 返回的是一個(gè)HTMLColection對(duì)象, 即HTML對(duì)象集合, 是一個(gè)由整數(shù)索引元素與length屬性組成的類數(shù)組數(shù)據(jù)結(jié)構(gòu), 需要通過(guò)索引屬性來(lái)訪問(wèn), 如:
document.getElementsB