DOM：文檔對象模型，核心對象document，對html元素的樣式（顏色、屬性、位置）、內容、屬性進行動態的改變和操作

一、document對象

　　1.屬性

　　　　title 返回或設置當前文檔的標題 //document.title="標題名"

　　　　URL 返回當前文檔的url //只能獲取不能設置

　　　　bgColor 設置文檔的背景色

　　　　fgColor 設置文檔的前景色（設置文字顏色）

　　2.方法（獲取元素的方法）

　　　　document.getElementById("") //通過id名獲取元素，id名是唯一的

　　　　document.getElementByTagName() //通過標簽名獲取元素集合，不是數組，但可通過數組的方式訪問

　　　　document.getElementByClassName() //通過類名獲取元素，存在兼容性問題

　　　　document.getElementByName() //通過表單的name名獲取元素

　　　　document.querySelector() //萬能選擇器，與jquery中的$選擇器類似，可通過類名、標簽名等獲取元素

　　　　document.querySelectorAll() //獲取元素集合

　　3.document對象集合

　　　　docment.all 文檔所有元素的集合

　　　　document.forms 文檔forms對象的集合

　　　　document.anchors 文檔錨鏈接的集合

　　　　document.links 文檔所有鏈接的集合，包括圖片地圖

　　　　document.images 文檔所有圖片的集合

二、元素操作

　　1.元素內容的獲取與設置

<div class="word" id="list" str="自定義屬性">
    我是文本內容
</div>

　　　　1）元素內容

var obj=document.querySelector("div");
console.log(obj.innerHTML)
obj.innerText
 
="修改後的文本內容"
console.log(obj.innerText)

　　　　　　獲取：innerHTML 獲取或設置文本節點內容，包括空格文本

　　　　　　　　 innerText 獲取或設置文本內容

　　　　　　ps(innerHTML與document.write 的區別：

　　　　　　　　document.write直接輸出到瀏覽器中，並且可繼續添加write添加內容，innerHTML是對DOM元素的操作，獲取或設置文本內容，並且將所有文本內容替換)

　　　　　　設置：obj.innerHTML="設置的文本內容"

　　　　　　　　　obj.innerText="設置的文本內容"

　　　　2）元素的屬性

　　　　　　獲取：對於標簽自帶屬性id class等可以直接獲取，

　　　　　　　　　對於自定義屬性，可通過getAttribute獲取

console.log(obj.className)
console.log(obj.id)
console.log(obj.getAttribute("class"))
console.log(obj.getAttribute("str"))

　　　　　設置：直接設置 obj.className="aa";

　　　　　　　　 通過setAttribute設置屬性 obj.setAttribute("str","list")

　　　　3）元素的樣式

　　　　　　獲取：

　　　　　　　　obj.style.css屬性 //只能獲取行內樣式

　　　　　　　　getComputedStyle(元素對象，null).css屬性 //獲取非行內樣式,只能獲取不能設置

　　　　　　　　obj.currentStyle.css屬性 //IE瀏覽器中獲取非行內樣式，只能獲取不能設置

　　　　　　　　//對於非行內樣式中的屬性，有連字符的屬性去掉連字符，首字母大寫（W3C標準），getComputedStyle在IE中會直接報錯，有兼容性問題，因此在封裝函數時不可作為判定條件

　　　　　　設置：（設置的屬性都是行內樣式，優先級最高，因此註意樣式的覆蓋）

　　　　　　　　單個屬性樣式的設置 obj.style.css屬性="";

　　　　　　　　多個屬性樣式的設置 obj.style.cssText="width:200px;height:100px"; //多個屬性的設置直接將行內樣式的Style重新設置

　　　　　　　　先給屬性添加樣式，在通過js給元素添加屬性

文檔對象模型——DOM