一、獲得元素
通過document對象調用：
- getElementById()：通過id屬性獲取一個元素節點對象
- getElementsByTagName()：通過標簽名獲取一組元素節點對象
- getElementsByName()：通過name屬性來獲取一組元素節點對象
?核心學習代碼
<script>//完成下面的按鈕的功能window.onload = function() {var btn01 = document.getElementById('btn01');// 為id為btn01的按鈕綁定一個單擊響應函數btn01.onclick = function() {// 查找#bj節點var bj = document.getElementById('bj');alert(bj.innerHTML);};// 查找所有li節點var btn02 = document.getElementById('btn02');btn02.onclick = function(){var lis = document.getElementsByTagName('li');// getElementsByTagName獲得的是一組元素節點對象for(var i = 0;i<lis.length;i++){alert(lis[i].innerHTML);}};// 查找name=gender的所有節點var btn03 = document.getElementById('btn03');btn03.onclick = function(){var inputs = document.getElementsByName('gender');for (var i=0;i<inputs.length;i++){// 對于自結標簽可以直接通過標簽名來獲取// 對于class屬性不能直接.class，只能通過className方式alert(inputs[i].value);}}// 查找#city下所有li節點// 返回#city所有子節點// 返回#phone的第一個子節點// 返回#bj的父節點// 返回#android的前一個兄弟節點// 返回#username的value屬性值// 設置#username的value屬性值// 返回#bj的文本值}</script>代碼示例
<!doctype html>
<html><head><meta charset="utf-8"><title></title><script>//完成下面的按鈕的功能window.onload = function() {var btn01 = document.getElementById('btn01');// 為id為btn01的按鈕綁定一個單擊響應函數btn01.onclick = function() {// 查找#bj節點var bj = document.getElementById('bj');alert(bj.innerHTML);};// 查找所有li節點var btn02 = document.getElementById('btn02');btn02.onclick = function(){var lis = document.getElementsByTagName('li');// getElementsByTagName獲得的是一組元素節點對象for(var i = 0;i<lis.length;i++){alert(lis[i].innerHTML);}};// 查找name=gender的所有節點var btn03 = document.getElementById('btn03');btn03.onclick = function(){var inputs = document.getElementsByName('gender');for (var i=0;i<inputs.length;i++){// 對于自結標簽可以直接通過標簽名來獲取// 對于class屬性不能直接.class，只能通過className方式alert(inputs[i].value);}}// 查找#city下所有li節點// 返回#city所有子節點// 返回#phone的第一個子節點// 返回#bj的父節點// 返回#android的前一個兄弟節點// 返回#username的value屬性值// 設置#username的value屬性值// 返回#bj的文本值}</script></head><body><div class="total"><div class="inner"><p>你喜歡哪一個城市？</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>東京</li><li>首爾</li></ul><br /><br /><p>你最喜歡的單機游戲？</p><ul id="game"><li id="rl">紅警</li><li>實況</li><li>極品飛車</li><li>魔獸</li></ul><br /><br /><p>你手機的操作系統？</p><ul id="phone"><li id="phone">IOS</li><li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">genner:<input type="radio" name="gender" value="male" />Male:<input type="radio" name="gender" value="female" />Female:<br /><br />name:<input type="text" name="name" value="abcd" /></div></div><div id="btnList"><div><button id="btn01">查找#bj節點</button></div><div><button id="btn02">查找所有li節點</button></div><div><button id="btn03">查找name=gender的所有節點</button></div><div><button id="btn04">查找#city下所有li節點</button></div><div><button id="btn05">返回#city所有子節點</button></div><div><button id="btn06">返回#phone的第一個子節點</button></div><div><button id="btn07">返回#bj的父節點</button></div><div><button id="btn08">返回#android的前一個兄弟節點</button></div><div><button id="btn09">返回#username的value屬性值</button></div><div><button id="btn10">設置#username的value屬性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body></html>?效果圖
?對于DOM的查詢內容知識點比較多，分成幾個部分學習，這節學習主要掌握三個知識點。
上節學習鏈接：
JavaScript的學習之文檔的加載
？)
)
)
