DOM

DOM Document Object Model

document可以獲取頁面的元素，根據不同的方法返回的可能是一個集合

選擇元素的時候使用更多的是querrySelector或者querrySelectorAll,相比於getElementBy…更高效更精準

document可以獲得整個頁面的信息.
document.getElementsByTagName("body")[0];
document.querrySelector("li");//使用元素去選擇
//#代表選擇id，元素.的方式是選擇class
document.querrySelector("#sp-list li");//使用id去選擇，表示選擇出id=”sp-list“元素下的li元素
document.querrySelector("#sp-list li.list");//表示選擇id=”sp-list“元素下class="list"的li元素

通過document獲得到元素後就可以改變其屬性等信息

通過元素的style的可以改變css的屬性

document.querrySelector("h1").style.color="red";
//也可以使用一個變量去保存獲取到的元素便於以後操作
var title = document.querrySelector("h1");
//獲得元素的類
document.querrySelector("h1").classList;
//如果元素沒有類class還可以給元素設置類
document.querrySelector("h1").classList.add("title");
//也可以移除元素的類
document.querrySelector("h1").classList.remove("title");
//toggle命令可以刪減calss命令
document.querrySelector("h1").classList.toggle("title");

給按鈕添加監聽事件

document.querrySelector("button").addEventListener("click",function(){
document.querrySelector("h1").classList.toggle("title");});//兩個參數，第一個指定監聽的具體事件，第二個參數指定事件被觸發後進行的操作

改變元素中的內容

document.querrySelector("h1").innerHTML = "<em>goodBye</em>";
document.querrySelector("h1").innerHTML;//返回的內容是h1元素裏的所有內容包括<em>
document.querrySelector("h1").textContent;//返回的只是文本內容

獲取元素的attributes

何爲attributes，元素名以後的東西都是attributes，比如id，class

document.querrySelector("ul").attributes;
//只是獲得class屬性
//與classList的區別，這個方法只是獲得了class的名字但是這個方法還可以操作別的屬性比如id等，而class還可以進行增刪class，
document.querrySelector("ul").getAttribute("class");
//修改屬性class的值
document.querrySelector("ul").attributes.class.value = "title";
//增加class屬性
document.querrySelector("ul").setAttibute("class","title");