1.getElementsByName():獲取name.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`

例：

 p name= pn hello /p  p name= pn hello /p  p name= pn hello /p  script  function getName(){ var count=document.getElementsByName( pn  alert(count.length); var p=count[2]; p.innerHTML= world  /script 

結(jié)果：界面打印出三個hello，并且伴有一個提示框“3”，當(dāng)點擊確定后，界面顯示的內(nèi)容變?yōu)閔ello hello world

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~··

2.getElementsByTagName():獲取元素。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例

 p hello /p  p hello /p  p hello /p  script  function getName(){ var count=document.getElementsByTagName( p  alert(count.length); var p=count[2]; p.innerHTML= world  /script 

結(jié)果：界面打印出三個hello，并且伴有一個提示框“3”，當(dāng)點擊確定后，界面顯示的內(nèi)容變?yōu)閔ello hello world

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3.getAttribute():獲取元素屬性。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例

 a id= aid title= 得到a的標(biāo)簽屬性 /a  script  function getAttr1(){ var anode=document.getElementById( aid  var attr=anode.getAttribute( id  alert( a的ID是: +attr); function getAttr2(){ var anode=document.getElementById( aid  var attr=anode.getAttribute( title  alert( a的title內(nèi)容是： +attr); getAttr1(); getAttr2(); /script 

結(jié)果：彈出提示框“a的ID是：aid”.點擊確定后，彈出提示框“a的title內(nèi)容是：得到a的標(biāo)簽屬性”。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.setAttribute()設(shè)置元素屬性。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例

 a id= aid2 aid2 /a  script  function setAttr(){ var anode=document.getElementById( aid2  anode.setAttribute( title , 動態(tài)設(shè)置a的title屬性  var attr=anode.getAttribute( title  alert( 動態(tài)設(shè)置的title值為： +attr); setAttr(); /script 

結(jié)果：彈出提示框“動態(tài)設(shè)置的title值為：動態(tài)設(shè)置a的title屬性”。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~

5.childNodes():訪問子節(jié)點。

~~~~~~~~~~~~~~~~~~~~~~~~~~··

例

 ul li 1 /li li 2 /li li 3 /li /ul  script  function getChildNode(){ var childnode=document.getElementsByTagName( ul )[0].childNodes; alert(childnode.length); alert(childnode[0].nodeType); getChildNode(); /script 

結(jié)果：界面打印出.1 .2 .3彈出對話框“3”，按確定后彈出“1”。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

6.parentNode():訪問父節(jié)點。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·

例

 p  p id= pid /p  script  function getParentNode(){ var p=document.getElementById( pid  alert(p.parentNode.nodeName); getParentNode(); /script 

結(jié)果：彈出提示框：p.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

7.createElement():創(chuàng)建元素節(jié)點。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例：

 script  function createNode(){ var body=document.body; var input=document.createElement( input  input.type= button  input.value= 按鈕  body.appendChild(input);//插入節(jié)點 createNode(); /script 

結(jié)果:出現(xiàn)一個按鈕。

~~~~~~~~~~~~~~~~~~~~~~~~~~~

8.createTextNode():創(chuàng)建文本節(jié)點。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例：

 script  function createNode(){ var element = document.createElement( p  element.className = message  var textNode = document.createTextNode( Hello world!  element.appendChild(textNode); document.body.appendChild(element); createNode(); /script 

代碼分析：這個例子創(chuàng)建了一個新 p 元素并為它指定了值為“message”的class特性。然后，又創(chuàng)建了一個文本節(jié)點，并將其添加到前面創(chuàng)建的元素中。最后一步，就是將這個元素添加到了文檔中的 body 元素中，這樣可以在瀏覽器中看到新創(chuàng)建的元素和文本節(jié)點了。

結(jié)果：頁面顯示hello world。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

9.insertBefore():插入節(jié)點。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例

 p id= p  p id= pid p元素 /p  script  function addNode(){ var p=document.getElementById( p  var node=document.getElementById( pid  var newnode=document.createElement( p  newnode.innerHTML= 動態(tài)插入一個p元素  p.insertBefore(newnode,node); addNode(); /script 

結(jié)果：界面打印出：動態(tài)插入一個p元素

p元素

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

10.removeChild():刪除節(jié)點。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·

例

 p id= p  p id= pid p元素 /p  script  function removeNode(){ var p=document.getElementById( p  var p=p.removeChild(p.childNodes[1]); removeNode(); /script 

結(jié)果：界面什么也沒顯示。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

11.offsetHeight:網(wǎng)頁尺寸

12.scrollHeight:網(wǎng)頁尺寸

~~~~~~~~~~~~~~~~~~~~~~~~~~~·

例：

 script  function getSize(){ var width=document.documentElement.offsetWidth||document.body.offsetWidth;//解決兼容問題 var height=document.documentElement.offsetHeight||document.body.offsetHeight; alert(width+ , +height); getSize(); /script 

顯示結(jié)果：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP ！

相關(guān)推薦：

如何在html中顯示JSON數(shù)據(jù)

以上就是如何使用JS中DOM來控制HTML元素的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。