快捷導(dǎo)航

DOM操作一些常用的屬性匯總

更新時(shí)間：2015年03月13日 09:36:34 投稿：hebedich

這篇文章主要介紹了DOM操作一些常用的屬性匯總，總結(jié)的相當(dāng)全面，附上示例，是篇非常不錯(cuò)的學(xué)習(xí)提高DOM操作的文章，推薦給大家。

1.DOM：文檔對(duì)象模型DOM（Document Object Model）定義訪問(wèn)和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）。

2.DOM的一些常用的屬性

　　2.1 通過(guò)ID獲取元素

　　　　（1）語(yǔ)法：

復(fù)制代碼代碼如下:

document.getElementById("id");

　　　?。?）作用：id就向一個(gè)人的身份證，我們可以通過(guò)尋找標(biāo)簽的id來(lái)尋找標(biāo)簽，然后進(jìn)行相應(yīng)的操作。

　　　?。?）注意：不要忘記寫document！

　　2.2 innerHTML屬性

　　　?。?）語(yǔ)法：

復(fù)制代碼代碼如下:

Obgect.innerHTML="Hello World"

　　　　（2）作用：主要是對(duì)標(biāo)簽內(nèi)的內(nèi)容進(jìn)行獲取或替換

　　　?。?）例子：

復(fù)制代碼代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>innerHTML</title>

</head>

<body>

<h2 id="con">javascript</H2>

<p> JavaScript是一種基于對(duì)象、事件驅(qū)動(dòng)的簡(jiǎn)單腳本語(yǔ)言，嵌入在HTML文檔中，由瀏覽器負(fù)責(zé)解釋和執(zhí)行，在網(wǎng)頁(yè)上產(chǎn)生動(dòng)態(tài)的顯示效果并實(shí)現(xiàn)與用戶交互功能。</p>

<script type="text/javascript">

  var mychar=document.getElementById("con");

  document.write("原標(biāo)題:"+mychar.innerHTML+"<br>"); //輸出原h(huán)2標(biāo)簽內(nèi)容

  mychar.innerHTML="Hello World!";

  document.write("修改后的標(biāo)題:"+mychar.innerHTML); //輸出修改后h2標(biāo)簽內(nèi)容

</script>

</body>

</html>

　　　?。?）注意：Object是獲取的元素對(duì)象，如通過(guò)document.getElementById("ID")獲取的元素。

　　2.3 改變HTML樣式

　　　?。?）語(yǔ)法：

復(fù)制代碼代碼如下:

Object.style.property

　　　?。?）作用：用于修改HTML樣式

　　　?。?）例子：

復(fù)制代碼代碼如下:

<body>

  <h2 id="con">I love JavaScript</H2>

  <p> JavaScript使網(wǎng)頁(yè)顯示動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互功能。</p>

  <script type="text/javascript">

    var mychar= document.getElementById("con");

    mychar.style.color="red";

    mychar.style.backgroundColor="#ccc";

    mychar.style.width="300px";

  </script>

</body>

　　　?。?）注意：property有很多的樣式，比如color，height等等都可以用這個(gè)方法去修改,在一個(gè)就是不要忘記屬性后面都要加分號(hào)”“。

　　2.4 顯示和隱藏（display屬性）

　　　?。?）語(yǔ)法：

Object.style.display=value
　　　　（2）作用：網(wǎng)頁(yè)中?？吹斤@示和隱藏，就是用display屬性來(lái)實(shí)現(xiàn)的

　　　?。?）例子：

復(fù)制代碼代碼如下:

<script type="text/javascript">

        function hidetext() 

        { 

        var mychar = document.getElementById("con");

        mychar.style.display="none";

        } 

        function showtext() 

        { 

        var mychar = document.getElementById("con");

        mychar.style.display="block";

        }

    </script>

　　　　（4）注意：value的值為none和block，其中none為不顯示內(nèi)容，而block為顯示內(nèi)容

　　2.5 className屬性

　　　?。?）語(yǔ)法：

復(fù)制代碼代碼如下:

Object.className=classname

　　　?。?）作用：1.獲取元素的class屬性；2.為網(wǎng)頁(yè)中的某一個(gè)元素指定一個(gè)css樣式來(lái)改變改元素的外觀

　　　?。?）例子：

復(fù)制代碼代碼如下:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>className屬性</title>

<style>

    body{ font-size:16px;}

    .one{

        border:1px solid #eee;

        width:230px;

        height:50px;

        background:#ccc;

        color:red;

    }

    .two{

        border:1px solid #ccc;

        width:230px;

        height:50px;

        background:#9CF;

        color:blue;

    }

    </style>

</head>

<body>

    <p id="p1" > JavaScript使網(wǎng)頁(yè)顯示動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互功能。</p>

    <input type="button" value="添加樣式" onclick="add()"/>

    <p id="p2" class="one">JavaScript使網(wǎng)頁(yè)顯示動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互功能。</p>

    <input type="button" value="更改外觀" onclick="modify()"/>

    <script type="text/javascript">

       function add(){

          var p1 = document.getElementById("p1");

          p1.className="one";

       }

       function modify(){

          var p2 = document.getElementById("p2");

          p2.className="two";

       }

    </script>

</body>