JavaScript入門篇--你也有控制權（DOM操作）

乘風而歸發表於2017-09-21
JavaScript

1.認識DOM

文件物件模型DOM（Document Object Model）定義訪問和處理HTML文件的標準方法。DOM 將HTML文件呈現為帶有元素、屬性和文字的樹結構（節點樹）。

先來看看下面程式碼:
這裡寫圖片描述

將HTML程式碼分解為DOM節點層次圖:
這裡寫圖片描述

HTML文件可以說由節點構成的集合，三種常見的DOM節點:
1. 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標籤。
2. 文字節點:向使用者展示的內容，如<li>...</li>中的JavaScript、DOM、CSS等文字。
3. 屬性節點:元素屬性，如<a>標籤的連結屬性href=”http://www.imooc.com”。

看下面程式碼:
<a href="http://www.imooc.com">JavaScript DOM</a>
這裡寫圖片描述

2.通過ID獲取元素

學過HTML/CSS樣式，都知道，網頁由標籤將資訊組織起來，而標籤的id屬性值是唯一的，就像是每人有一個身份證號一樣，只要通過身份證號就可以找到相對應的人。那麼在網頁中，我們通過id先找到標籤，然後進行操作。

語法:document.getElementById(“id”)

看看下面程式碼:
這裡寫圖片描述
結果:null或[object HTMLParagraphElement]

這裡寫圖片描述
注:獲取的元素是一個物件，如想對元素進行操作，我們要通過它的屬性或方法。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<div id="con">JavaScript</div>
<script type="text/javascript">
  var mychar=document.getElementById("con");
  document.write("結果:"+mychar); //輸出獲取的P標籤。 
</script>
</body>
</html>

舉例來說為什麼是null或[object HTMLParagraphElement]，null是由於將這個程式碼放在前面時，它獲取的是元素，這個id對應的元素還沒有解析到，所以會是null，解析到了輸出的話，是p標籤元素，就是[object HTMLParagraphElement]，換成div標籤輸出就是[object HTMLDivElement]
所以上面的結果就是
JavaScript
結果:[object HTMLDivElement]

3.innerHTML 屬性

innerHTML 屬性用於獲取或替換 HTML 元素的內容。
語法:Object.innerHTML

注意:
1.Object是獲取的元素物件，如通過document.getElementById(“ID”)獲取的元素。
2.注意書寫，innerHTML區分大小寫。

我們通過id=”con”獲取<p>元素，並將元素的內容輸出和改變元素內容，程式碼如下:
這裡寫圖片描述

結果:
這裡寫圖片描述

<!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是一種基於物件、事件驅動的簡單指令碼語言，嵌入在HTML文件中，由瀏覽器負責解釋和執行，在網頁上產生動態的顯示效果並實現與使用者互動功能。</p>
<script type="text/javascript">
  var mychar=document.getElementById("con");
  document.write("原標題:"+mychar.innerHTML+"<br>"); //輸出原h2標籤內容
  mychar.innerHTML="Hello World!"
  document.write("修改後的標題:"+mychar.innerHTML); //輸出修改後h2標籤內容
</script>
</body>
</html>

輸出結果：
Hello World!

JavaScript是一種基於物件、事件驅動的簡單指令碼語言，嵌入在HTML文件中，由瀏覽器負責解釋和執行，在網頁上產生動態的顯示效果並實現與使用者互動功能。

原標題:javascript
修改後的標題:Hello World!

4.改變 HTML 樣式

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢？

語法:

Object.style.property=new style;
注意:Object是獲取的元素物件，如通過document.getElementById(“id”)獲取的元素。

基本屬性表（property）:
這裡寫圖片描述

注意:該表只是一小部分CSS樣式屬性，其它樣式也可以通過該方法設定和修改。

看看下面的程式碼:

改變 <p>元素的樣式，將顏色改為紅色，字號改為20,背景顏色改為藍：

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

結果:

這裡寫圖片描述

5.顯示和隱藏（display屬性）

網頁中經常會看到顯示和隱藏的效果，可通過display屬性來設定。

語法：

Object.style.display = value
注意:Object是獲取的元素物件，如通過document.getElementById(“id”)獲取的元素。

value取值:
這裡寫圖片描述

看看下面程式碼:
這裡寫圖片描述

6.控制類名（className 屬性）

className 屬性設定或返回元素的class 屬性。

語法：
object.className = classname

作用:
1.獲取元素的class 屬性
2.為網頁內的某個元素指定一個css樣式來更改該元素的外觀

看看下面程式碼，獲得<p> 元素的 class 屬性和改變className：
這裡寫圖片描述

結果:
這裡寫圖片描述

7.程式設計挑戰

任務
一、定義”改變顏色”的函式

提示:
obj.style.color
obj.style.backgroundColor
二、定義”改變寬高”的函式

提示:
obj.style.width
obj.style.height
三、定義”隱藏內容”的函式

提示:
obj.style.display=”none”;
四、定義”顯示內容”的函式

提示:
obj.style.display=”block”;
五、定義”取消設定”的函式

提示:
使用confirm()確定框，來確認是否取消設定。
如是將以上所有的設定恢復原始值,否則不做操作。
removeAttribute()刪除屬性。
六、當點選相應按鈕，執行相應操作，為按鈕新增相應事件

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
    height:400px;
    width:600px;
    border:#333 solid 1px;
    padding:5px;}
p{
    line-height:18px;
    text-indent:2em;}
</style>
</head>
<body>
  <h2 id="con">JavaScript課程</H2>
  <div id="txt"> 
     <h5>JavaScript為網頁新增動態效果並實現與使用者互動的功能。</h5>
        <p>1. JavaScript入門篇，讓不懂JS的你，快速瞭解JS。</p>
        <p>2. JavaScript進階篇，讓你掌握JS的基礎語法、函式、陣列、事件、內建物件、BOM瀏覽器、DOM操作。</p>
        <p>3. 學完以上兩門基礎課後，在深入學習JavaScript的變數作用域、事件、物件、運動、cookie、正規表示式、ajax等課程。</p>
  </div>
  <form>
  <!--當點選相應按鈕，執行相應操作，為按鈕新增相應事件-->
    <input type="button" value="改變顏色" onclick="st1()" >  
    <input type="button" value="改變寬高" onclick="st3()">
    <input type="button" value="隱藏內容" onclick="st5()">
    <input type="button" value="顯示內容" onclick="st7()">
    <input type="button" value="取消設定" onclick="st9()">
  </form>
  <script type="text/javascript">
//定義"改變顏色"的函式
    function st1(){
     var st2=document.getElementById("txt");
     st2.style.color="red";
     st2.style.backgroundColor="blue";
    }
//定義"改變寬高"的函式
    function st3(){
       var st4=document.getElementById("txt"); 
       st4.style.width="300px";
       st4.style.height="200px";
    }
//定義"隱藏內容"的函式
    function st5(){
      var st6=document.getElementById("txt");
      st6.style.display="none";
    }
//定義"顯示內容"的函式
    function st7(){
      var st8=document.getElementById("txt");
      st8.style.display="block";
    }

//定義"取消設定"的函式
    function st9(){
     var st10=confirm("是否取消設定？");
     if(st10==true){
          txt.removeAttribute('style'); 
     }
    }
  </script>
</body>
</html>

相關文章