3.15號上午授課內容
今天上午講的章節是時間物件的語法和Dom 元素獲取的語法
一、時間語法
var date=new Date(); 這是語法
第一個示例：對本機的時間獲取
寫法如下：
<script type="text/javascript">
var date=new Date();
document.write(date);
</script>
第二個示例：對本機當前時間 分別獲取
寫法如下：
<script type="text/javascript">
var rq=new Date();
// 獲取年份
document.write(rq.getFullYear())
document.write("<br>")
// 獲取月份 月份加1 0-11月
document.write(rq.getMonth()+1)
document.write("<br>")
// 獲取當天日期
document.write(rq.getDate())
document.write("<br>")
// 獲取星期
document.write(rq.getDay()+"<br>")
// 獲取小時 分 秒
document.write(rq.getHours()+"<br>")
document.write(rq.getMinutes()+"<br>")
document.write(rq.getSeconds()+"<br>")
document.write("<br>")
document.write(rq);
document.write("<br>")
// 這是當前時間的組合寫法
var str=rq.getFullYear()+"-"+(rq.getMonth()+1)+"-"+rq.getDate()+"\t"+
rq.getHours()+":"+rq.getMinutes()+":"+rq.getSeconds()
document.write(str)
</script>
二、DOM
（1）dom的關鍵詞是document
dom 的概括簡介示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#aa {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="aa"></div>
</body>
</html>
<script type="text/javascript">
// 1、js的基礎語法 結構
// 2、dom操作 操作我們的document html body div Image
// 3、bom操作 操作瀏覽器 定時 彈窗....
//dom：document 學習dom的關鍵詞
//dom操作的三個步驟：1、事件源（先找到dom元素）2、事件型別（對元素進行怎樣的操作：點選、移入）3、事件的執行程式（樣式、內容》。。。）
//1 先找到div元素
var aa = document.getElementById("aa")
//2 事件型別 --點選 移入移出
// aa.onclick = function(){
// }
//3 事件執行程式
aa.onclick = function() {
this.style.backgroundColor = "red"
}
</script>
（2）dom對元素獲取的語法
第一個示例：對ID、標籤名、class名的選取 語法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="aa">我是id=aa的元素</div>
<ul> <!-- 標籤名 -->
<li>我是li元素1</li>
<li>我是li元素2</li>
<li>我是li元素3</li>
<li>我是li元素4</li>
</ul>
<div class="bb">我是class=bb的元素</div>
<div class="bb">我是class=bb的元素</div>
<div class="bb">我是class=bb的元素</div>
<div class="bb">我是class=bb的元素</div>
</body>
</html>
<script type="text/javascript">
// 先找到div 元素
// 1.通過id名找元素 唯一性
var aa=document.getElementById("aa");
// console.log(aa);
// 2.通過標籤名找元素
var li_list=document.getElementsByTagName("li");
// console.log(li_list[0]);
// 索引號第2專案 改成紅色
// li_list[2].style.color="red";
這是給id加一個滑鼠左擊時候變紅色的示例
aa.onclick =function(){
li_list[2].style.color="red";
}
// 3.通過class找元素
var bb=document.getElementsByClassName("bb");
console.log(bb);
</script>
（3）querySelector() 只查詢符合條件的第一個元素物件 querySelectorAll() 查詢所有符合條件的元素
第二個示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="aa">我是id=aa的元素</div>
<ul> <!-- 標籤名 -->
<li>我是li元素1</li>
<li>我是li元素2</li>
<li>我是li元素3</li>
</ul>
<div class="bb">我是class=bb的元素</div>
<div class="bb">我是class=bb的元素</div>
<div class="bb">我是class=bb的元素</div>
</body>
</html>
<script type="text/javascript">
// querySelector() 只查詢符合條件的第一個元素物件 querySelectorAll() 查詢所有符合條件的元素
// 查詢id 語法 querySelector("#box");
var newaa=document.querySelector("#aa");
console.log(newaa);
// 查詢標籤名 語法 querySelector("div");
// var newli=document.querySelector("li");
// console.log(newli);
// 查詢所以符合條件的標籤名元素
var newlist=document.querySelectorAll("li");
console.log(newlist);
// 查詢class 語法 querySelector(".box");
var newbb=document.querySelectorAll(".bb");
console.log(newbb);
</script>
（4）特殊元素的選取語法
示例寫法：
<script type="text/javascript">
// 特殊元素 body html
// 獲取body的語法
var by=document.body
//console.log(by)
// 獲取html的語法
var ht=document.documentElement
console.log(ht)
</script>