您好,登錄后才能下訂單哦!
本文實(shí)例講述了JS document對(duì)象簡(jiǎn)單用法。分享給大家供大家參考,具體如下:
<html> <head> <title>js-document對(duì)象學(xué)習(xí)</title> <meta charset="UTF-8"/> <script type="text/javascript"> // 直接獲取對(duì)象 function testGetElementById(){ //通過(guò)id獲取對(duì)象 // var gby=window.document.getElementById(); //window可以省去不寫(xiě) var gby=document.getElementById("sid"); alert(gby); //輸出的返回值是標(biāo)簽的類型[object HTMLInputElement] } function testGetElementsByName(){ //通過(guò)name獲取對(duì)象 var gbn=document.getElementsByName("umane"); alert(gbn); //輸出的返回值類型是[object NodeList]一個(gè)對(duì)象類型的數(shù)組 alert(gbn.length); //Nodelist的元素是節(jié)點(diǎn)元素,長(zhǎng)度是節(jié)點(diǎn)的個(gè)數(shù)。每一個(gè)容器或標(biāo)簽算是一個(gè)節(jié)點(diǎn)。 } function testGetElementsByTagName(){ //通過(guò)TagName(標(biāo)簽)獲取對(duì)象 var gbt=document.getElementsByTagName("input"); alert(gbt); //輸出返回值類型是[object HTMLCollection]是一個(gè)對(duì)象元素的集合 alert(gbt.length); //其集合的數(shù)目是所有input個(gè)數(shù) } function testGetElementsByClassName(){ //通過(guò)class獲取對(duì)象 var gbc=document.getElementsByClassName("clname"); alert(gbc); //輸出返回值類型是[object HTMLCollection]是一個(gè)對(duì)象元素的集合 alert(gbc.length); //集合元素的長(zhǎng)度是含有傳入類屬性的元素個(gè)數(shù)。 } // 間接獲取對(duì)象 function testParent(){ //利用父節(jié)點(diǎn)調(diào)用其節(jié)點(diǎn)對(duì)象 var showdiv=document.getElementById("showdiv"); var tchild=showdiv.childNodes; alert(tchild); //輸出返回值類型是[object NodeList]的一個(gè)list數(shù)組 alert(tchild.length); //返回子節(jié)點(diǎn)的長(zhǎng)度 13,是由于在div中和text有換行符算一個(gè)子節(jié)點(diǎn) } function testChild(){ //利用子節(jié)點(diǎn)調(diào)用其父節(jié)點(diǎn) var showdiv=document.getElementById("child"); var tparent=showdiv.parentNode; alert(tparent); //輸出返回值類型是[object HTMLDivElement](其父節(jié)點(diǎn)的類型) } function testBorther(){ //利用子節(jié)點(diǎn)調(diào)用其父節(jié)點(diǎn) var showdiv=document.getElementById("target"); var topBorther=showdiv.previousSibling; //輸出參考對(duì)象上面的元素 var lowBorther=showdiv.nextSibling //輸出參考元素的下面的元素 alert(topBorther+":::"+lowBorther); //輸出返回值類型是[object HTMLDivElement](其父節(jié)點(diǎn)的類型) } </script> <style type="text/css"> .clname{} #showdiv{ border: solid 2px cyan; width: 300px; height: 400px; } input[type=text]{ margin-left: 3px; } </style> </head> <body> <h4>js-document對(duì)象學(xué)習(xí)</h4> <h5>直接調(diào)用</h3> <input type="button" name="" id="sid" value="測(cè)試GetElementById" onclick="testGetElementById()" /> <input type="button" name="umane" id="" value="測(cè)試GetElementByName" onclick="testGetElementsByName()" /> <input type="button" name="" id="" value="測(cè)試GetElementsByTagNames" class="clname" onclick="testGetElementsByTagName()" /> <input type="button" name="" id="" value="測(cè)試GetElementsByClassName" class="clname" onclick="testGetElementsByClassName()" /> <hr /><br /> <h5>間接調(diào)用</h3> <input type="button" name="" id="" value="測(cè)試Parent" onclick="testParent()" /> <input type="button" name="" id="" value="測(cè)試 Child" onclick="testChild()" /> <input type="button" name="" id="" value="測(cè)試Borther" onclick="testBorther()" /> <div id="showdiv"> <input type="text" name="" id="parent" value="" /> <input type="text" name="" id="child" value="" /> <input type="text" name="" id="target" value="" /> <input type="text" name="" id="" value="" /> <input type="text" name="" id="" value="" /> <input type="text" name="" id="" value="" /> </div> </body> </html>
運(yùn)行結(jié)果:
Document:
獲取HTML元素:
1:直接獲取方式:通過(guò)id 通過(guò)name屬性值 通過(guò)標(biāo)簽名 通過(guò)class屬性值
2:間接獲取方式:父子關(guān)系 子父關(guān)系 兄弟關(guān)系
3:操作HTML元素對(duì)象的屬性
操作HTML元素對(duì)象的內(nèi)容和樣式
操作HTML的文檔結(jié)構(gòu)
document操作Form元素
document操作表格
document對(duì)象實(shí)現(xiàn)form表單校驗(yàn)
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。