html_JavaScript獲取元素_事件_屬性操作_樣式操作_類名操作
為什麼要獲取元素？
我們想要操作頁面上的某部分（顯示/隱藏，動畫），需要先獲取到該部分對應的元素，才進行後續操作
1. 根據id獲取元素
document.getElementById("bo1x");
注意：①如果沒有指定的id，則返回值為null
- 檔是從上往下一次執行
- console.dir() 輸出的是元素對應的標籤的內容
- 如何獲取物件的型別（物件是有型別的）
Typeof 不能獲取物件的具體型別，返回值始終是object
- console.log(物件.constructor) constructor 構造器,返回物件的建構函式
- 獲取到的資料型別HTMLDivElement，物件都是有型別的
2.根據標籤名獲取元素
document.getElementsByTagName('div');
偽陣列，返回值就是一個偽陣列，但是不具備陣列的方法
3.根據name獲取元素
document.getElementsByName('div');
- 返回的是NodeList型別（節點的集合），返回值是元素
4.根據classname獲取元素
document.getElementsByClassName("div1");
返回值是HTMLCollection，是一個集合
5. querySelector （HTML5中新增的方法）
Document.querySelector(“選擇器名稱”)
查詢一個元素，如果頁面上有多個符合條件的元素，只返回第一個標籤。
返回值為Nodelist（元素）
6. querySelector （HTML5中新增的方法）
Document.querySelectorAll(“選擇器名稱”)
返回一個集合，還是一個Nodelist（元素）的集合
事件
Onclick
事件的名稱是click，on是事件的開頭
事件的三要素：
事件源：觸發事件的元素
事件名稱：click
事件處理函式：觸發事件之後做的事情
如果想取消後續內容的時候在程式碼後新增如下程式碼：
Return false；
EG1:實現單擊按鈕切換圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="button" id="bu1" value="切換"><br>
<img src="./img/4.jpg" alt="" id="im1">
<script>
//1.獲取超連結
var link = document.getElementById("bu1");
// flag=1 4.jpg flag=2 5.jpg
var flag = 1;
//2.給超連結註冊圖片
link.onclick = function (){
//3.切換圖片
var im = document.getElementById("im1");
if (flag ==1){
flag=2;
im.src = "./img/5.jpg";
}else{
flag=1;
im.src = "./img/4.jpg";
};
//4.取消a標籤的預設行為
return false;
}
</script>
</body>
</html>
屬性操作
非表單元素的屬性
Href,title.id,sec,className
注意:標籤中有什麼屬性，使用document.getElementById後的物件就有相同名的屬性，但是class除外，它的名是className，因為class是關鍵字
補充：
1.disabled 屬性規定應該禁用 input 元素。
被禁用的 input 元素既不可用，也不可點選。可以設定 disabled 屬性，直到滿足某些其他的條件為止（比如選擇了一個複選框等等）。然後，就需要通過 JavaScript 來刪除 disabled 值，將 input 元素的值切換為可用。
2.在事件處理函式中，this---事件源觸發事件的物件。
函式中this--->window物件
Function fn(){
Console.log(this)
}
方法中this--->是呼叫該方法的物件
var obj ={
Name:”zs”,
Say:function (){
Console.log(this);
}
}
obj.say();
建構函式中this--->當前物件
事件處理函式中this--->觸發事件的物件，事件源
補充：innerHTML 和innerTEXT的區別(innerHTML不是標準的DOM標準
使用innerHTML的時候一般當插入的內容中存在開始和結束標籤。
獲取內容：
InnerHTML 獲取內容的時候，會把標籤也獲取到+
InnerTEXT 獲取內容的時候，會把標籤過濾掉
設定內容：
InnerHTML 設定內容的時候，會把標籤進行解析
InnerTEXT 設定內容的時候，會把標籤進行轉義
另外：低版本瀏覽器不支援innerText，支援textContent
表單元素屬性
value 用於大部分表單元素的內容獲取（option除外）
type 可以獲取input標籤的型別（輸入框或複選框等）
disabled 禁用屬性
checked 複選框選中屬性
selected下拉選單選中屬性
補充：禁用屬性(disabled)
當標籤的屬性只有一個值的情況下，一般DOM元素對應的此屬性的型別是布林型別
自定義屬性操作
樣式操作
類名操作
Var btn = document.getElementById(“btn”);
btn.className = “current”