標籤：取消 function 標籤 平台 indicator strong 瀏覽器 [1] als
DOM（文件物件模型(Document Object Model)）文件物件模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴充標誌語言的標準編程介面。在網頁上，組織頁面（或文檔）的對象被組織在一個樹形結構中，用來表示文檔中對象的標準模型就稱為DOM。Document Object Model的曆史可以追溯至1990年代後期微軟與Netscape的“瀏覽器大戰”，雙方為了在JavaScript與JScript一決生死，於是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，既有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平台及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的傑作
1、尋找元素
① 直接尋找
document.getElementById 根據ID擷取一個標籤document.getElementsByName 根據name屬性擷取標籤集合document.getElementsByClassName 根據class屬性擷取標籤集合document.getElementsByTagName 根據標籤名擷取標籤集合
② 間接尋找
parentNode // 父節點childNodes // 所有子節點firstChild // 第一個子節點lastChild // 最後一個子節點nextSibling // 下一個兄弟節點previousSibling // 上一個兄弟節點 parentElement // 父節點標籤元素children // 所有子標籤firstElementChild // 第一個子標籤元素lastElementChild // 最後一個子標籤元素nextElementtSibling // 下一個兄弟標籤元素previousElementSibling // 上一個兄弟標籤元素
2、操作
① 內容
innerText 文本outerTextinnerHTML HTML內容innerHTML value 值
② 屬性
attributes // 擷取所有標籤屬性setAttribute(key,value) // 設定標籤屬性getAttribute(key) // 擷取指定標籤屬性 /*var atr = document.createAttribute("class");atr.nodeValue="democlass";document.getElementById(‘n1‘).setAttributeNode(atr);*/
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <input type="button" value="全選" onclick="CheckAll();"/> <input type="button" value="取消" onclick="CancelAll();"/> <input type="button" value="反選" onclick="ReverseCheck();"/> <table border="1" > <thead> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> </tbody> </table> <script> function CheckAll(ths){ var tb = document.getElementById(‘tb‘); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0]; inp.checked = true; } } } function CancelAll(ths){ var tb = document.getElementById(‘tb‘); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0]; inp.checked = false; } } } function ReverseCheck(ths){ var tb = document.getElementById(‘tb‘); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0]; if(inp.checked){ inp.checked = false; }else{ inp.checked = true; } } } } </script></body></html>DemoDemo
3、擴充練習
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id = "i1">我是i1</div> <a>aaaaa</a> <a>bbbbb</a> <a>ccccc</a></body></html>練習的html檔案
//擷取ID>document.getElementById(‘i1‘);< <div id=?"i1">?我是i1?</div>? //擷取內容>document.getElementById(‘i1‘).innerText<"我是i1" //重新賦值>document.getElementById(‘i1‘).innerText = ‘新內容‘<"新內容" //擷取tagname集合>document.getElementsByTagName(‘a‘);<[<a>?aaaaa?</a>?, <a>?bbbbb?</a>?, <a>?ccccc?</a>?] //擷取集合指定索引元素>document.getElementsByTagName(‘a‘)[1]< <a>?bbbbb?</a>? //對單個元素重新賦值>document.getElementsByTagName(‘a‘)[1].innerText = 66666;<66666 //對集合中所有檔案賦值>tags = document.getElementsByTagName(‘a‘);<[<a>?aaaaa?</a>?, <a>?66666?</a>?, <a>?ccccc?</a>?]>for(var i=0;i<tags.length;i++){tags[i].innerText=99999;}<99999>tags<[<a>?99999?</a>?, <a>?99999?</a>?, <a>?99999?</a>?]
Python開發【前端】：DOM
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
