abstrait：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>學習總結(jié)</title> <style&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>學習總結(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; /*用戶名和密碼 從左往右移動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://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)">點擊顯示當前標準時間英文</button>
<p id=myDay_1></p>
<br>
<hr>
<br>
<button onclick="myday_3(this)">點擊顯示數(shù)字事件</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>又稱“漢學”或“中國學”，泛指傳統(tǒng)的中華文化與學術(shù)。國學包括
中國古代的哲學、史學、宗教學、文學、禮俗學、考據(jù)學、倫理學以及中醫(yī)學、農(nóng)學、術(shù)數(shù)、地理、
政治、經(jīng)濟及書畫、音樂、建筑等諸多方面。現(xiàn)“國學”概念產(chǎn)生于二十世紀二十年代，當時 “西學
東漸”改良之風正值熾熱，張之洞、魏源等人為了與西學相對，提出“中學”（中國之學）這一概念，
并主張 “中學為體，西學為用”，一方面學習西方文明，同時又恢復兩漢經(jīng)學。
</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>
//獲取當前時間
function myday(X){
myday_2 = new Date();
document.getElementById("myDay_1").innerHTML=(myday_2);
}
//顯示數(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+",時間"+ 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名 都不成功. 單獨在一個網(wǎng)頁上運行都可以,但是在這個里面就獲取不到.
//望與指導,謝謝!!!
//h1 修改內(nèi)容
function guoxue(x){
document.getElementById("bbb").innerHTML="修改的內(nèi)容";
}
//p 標簽內(nèi)容修改
document.getElementsByTagName("p").innerHTML="p標簽修改內(nèi)容"
//清除浮動
document.getElementsByClassName("clear").style.clear="both";
</script>
</body>
</html>
總結(jié):查找html 元素,必須通過 CLASS名或者ID名稱或者標簽來獲得html元素節(jié)點,
通過 id來查找: document.getElementById("id名");
通過class查找: document.getElementsByClassName("class名");
通過標簽名(tag name)查找: document.getElementsByTagName("標簽名");
獲得了huml元素后,如果要修改內(nèi)容可以使用innerHTML來改變huml元素內(nèi)容.
如果要修改CSS樣式, 也是獲取html元素后,使用.style.屬性名="屬性值"來修改CSS樣式.
時間對象:要獲取某一個時間(比如年/月/日/星期/小時等),必須先獲取當前時間的基礎(chǔ)之上,然后才能獲取到當前
某一個時間的節(jié)點.
備注: 老師您好, h1我使用了一個id名稱來獲取并修改內(nèi)容,但在這個網(wǎng)頁上獲取不到h1的id信息,在單獨一個
網(wǎng)頁上就能獲取的到,并能成功修改.
使用document.getElementsByTagName("p")的方法也是獲取不到p 標簽.
使用document.getElementsByClassName("clear")也是獲取不到class名為clear的的標簽.
請給與指導,謝謝!
Professeur correcteur：天蓬老師Temps de correction：2019-01-28 17:42:58
Résumé du professeur：document.getElementsByTagName("p"), document.getElementsByClassName("clear"), 返回的是一個HTMLColection對象, 即HTML對象集合, 是一個由整數(shù)索引元素與length屬性組成的類數(shù)組數(shù)據(jù)結(jié)構(gòu), 需要通過索引屬性來訪問, 如:
document.getElementsB