DOM對象，它其實(shí)就是document對象document object model 簡單地說就是文檔對象模型注意：”W3C文檔對象模型(DOM)是中立于平臺(tái)和語言的接口，它允許程序和腳本動(dòng)態(tài)的訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式”html和css 他們組成了我們看到的頁面的內(nèi)容JavaScript 它們是組成了我們網(wǎng)頁上的交互，頁面行為的操作如果我們想要通過JavaScript來對html和css進(jìn)行一些數(shù)據(jù)的操作，我們就需要DOM來將這兩塊打通即：DOM是打通html和css壁壘的一個(gè)工具D：文檔，理解為整個(gè)Web加載的網(wǎng)頁文檔;O：對象，理解為類似window對象之類的東西，可以調(diào)用屬性和方法，這里我們說的是document對象;M：模型，理解為網(wǎng)頁文檔的樹型結(jié)構(gòu)什么是樹型結(jié)構(gòu)，我們都知道html標(biāo)簽都有不同的結(jié)構(gòu)，通過縮進(jìn)分級<body> <div title=”屬性節(jié)點(diǎn)”>測試Div</div></body> 【注】在JavaScript中，所有的節(jié)點(diǎn)都是對象<divtitle = "屬性節(jié)點(diǎn)">測試Div</div>元素節(jié)點(diǎn) <div></div>屬性節(jié)點(diǎn) title = "屬性節(jié)點(diǎn)"我們要去對節(jié)點(diǎn)中的屬性和方法進(jìn)行操作，首先就是要先找到這個(gè)節(jié)點(diǎn)document.getElementById( id );功能：通過當(dāng)前元素節(jié)點(diǎn)的id來獲取對應(yīng)的元素節(jié)點(diǎn)，由于id是唯一的，所以它只能獲取一個(gè)元素<head> <metacharset="utf-8"> <title></title> <script> var oDiv =document.getElementById("div1"); alert(oDiv);</script></head><body> <div id = "div1"></div></body>原因我們也講過，因?yàn)榇a是自上而下運(yùn)行的，當(dāng)我們獲取節(jié)點(diǎn)的時(shí)候，下面body中的節(jié)點(diǎn)還沒有去運(yùn)行第一種是將script標(biāo)簽寫在div標(biāo)簽的下面第二種方法是添加window.onload函數(shù)，它是在頁面加載以后執(zhí)行的函數(shù)<head> <metacharset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); alert(oDiv); }</script></head><body> <div id = "div1"></div></body>這樣就可以獲取到元素節(jié)點(diǎn)的內(nèi)容了獲取到元素節(jié)點(diǎn)對象后，我們可以去訪問元素節(jié)點(diǎn)中的屬性先來獲取tagName節(jié)點(diǎn)標(biāo)簽名的屬性：<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); alert(oDiv.tagName); }</script></head><body> <div id = "div1"></div></body>再來獲取innerHTML元素節(jié)點(diǎn)的內(nèi)容：<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); alert(oDiv.tagName); }</script></head><body> <div id = "div1"><p>早安打工人</p></div></body>如果我們要給innerHTML賦值的話，它會(huì)直接把效果反饋在網(wǎng)頁上<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); oDiv.innerHTML = "<h1>你好打工人</h1>" }</script></head><body> <div id = "div1"><p>早安打工人</p></div></body>以上是關(guān)于元素節(jié)點(diǎn)的兩個(gè)屬性document.getElementById( “box” ).id; //獲取iddocument.getElementById( “box” ).id=”person”; //設(shè)置iddocument.getElementById( “box” ).title; //獲取titledocument.getElementById( “box” ).title=”標(biāo)題”; //設(shè)置titledocument.getElementById( “box” ).style; //獲取CSSstyleDeclaration對象document.getElementById( “box” ).sytle.color; //獲取style對象中的color的值document.getElementById( “box” ).style.color=”red”; //設(shè)置style對象中color的值document.getElementById( “box” ).className; //獲取class類document.getElementById( “box” ).className=”box”; //設(shè)置class類alert( document.getElementById( “box” ).bbb ); //獲取自定義屬性的值，不支持<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); oDiv.innerHTML = "<h1>你好打工人</h1>" alert(oDiv.id); alert(oDiv.title); alert(oDiv.className); //以上是獲取 document.getElementById("div1").className="aaa"; //這是修改class名 }</script></head><body> <div id = "div1" title="hello" class="box" style="width: 300px; height: 300px;background-color: red;"><p>早安打工人</p></div></body><head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); oDiv.innerHTML = "<h1>你好打工人</h1>" alert(oDiv.style.width); //獲取div的寬度 }</script></head><body> <div id = "div1" title="hello" class="box" style="width: 300px; height: 300px;background-color: red;"><p>早安打工人</p></div></body><head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); oDiv.innerHTML = "<h1>你好打工人</h1>" oDiv.style.width = "666px";//修改div的寬度 alert(oDiv.style.width); //獲取div的寬度 }</script></head><body> <div id = "div1" title="hello" class="box" style="width: 300px; height: 300px;background-color: red;"><p>早安打工人</p></div></body>我們要把 – 去掉，然后將color的首字母c大寫C<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); oDiv.innerHTML = "<h1>你好打工人</h1>" alert(oDiv.style.backgroundColor); //獲取背景顏色 }</script></head><body> <div id = "div1" title="hello" class="box" style="width: 300px; height: 300px;background-color: red;"><p>早安打工人</p></div></body>同樣在設(shè)置的時(shí)候也要首字母大寫：<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varoDiv = document.getElementById("div1"); oDiv.innerHTML = "<h1>你好打工人</h1>" oDiv.style.backgroundColor="yellow"; //設(shè)置背景色 alert(oDiv.style.backgroundColor); } </script></head><body> <div id = "div1" title="hello" class="box" style="width:300px; height: 300px; background-color: red;"><p>早安打工人</p></div></body>
|
