javascript基礎使用筆記

document：文件
1、document.write("hello"); 文件輸出 hello
2、 document.getElementById("p1").style.color="blue"; 獲取p1物件 並設定其顏色
3、

4、JavaScript程式碼只能寫在HTML檔案中嗎?當然不是，我們可以把HTML檔案和JS程式碼分開,並單獨建立一個JavaScript檔案(簡稱JS檔案),其檔案字尾通常為.js，然後將JS程式碼直接寫在JS檔案中。注意:在JS檔案中，不需要

5、我們可以將JavaScript程式碼放在html檔案中任何位置，但是我們一般放在網頁的head或者body部分。
放在

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

HTML文件可以說由節點構成的集合，三種常見的DOM節點:

1. 元素節點：上圖中、、

   等都是元素節點，即標籤。

2. 文字節點:向使用者展示的內容，如
3. ...
中的JavaScript、DOM、CSS等文字。
4. 屬性節點:元素屬性，如標籤的連結屬性href=""。
   看下面程式碼:
   DOM

17innerHTML 屬性
innerHTML 屬性用於獲取或替換 HTML 元素的內容。
語法:
Object.innerHTML
注意:
1.Object是獲取的元素物件，如透過document.getElementById("ID")獲取的元素。
2.注意書寫，innerHTML區分大小寫。
demo var mychar= document.getElementById("con"); ;
document.write("原標題:"+mychar.innerHTML+"
"); //輸出原h2標籤內容
mychar.innerHTML="helloword"
document.write("修改後的標題:"+mychar.innerHTML); //輸出修改後h2標籤內容

18 改變 HTML 樣式
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢？
語法:
Object.style.property=new style;
注意:Object是獲取的元素物件，如透過document.getElementById("id")獲取的元素。
demo :
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor="#ccc";
mychar.style.width="300";

19
顯示和隱藏（display屬性）
網頁中經常會看到顯示和隱藏的效果，可透過display屬性來設定。
語法：
Object.style.display = value
注意:Object是獲取的元素物件，如透過document.getElementById("id")獲取的元素。
value取值:

function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display="none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display="block";
}

20
className 屬性設定或返回元素的class 屬性。
語法：
object.className = classname
作用:
1.獲取元素的class 屬性

1. 為網頁內的某個元素指定一個css樣式來更改該元素的外觀
   function add(){
   var p1 = document.getElementById("p1");
   p1.className="one";

   }
   function modify(){
   var p2 = document.getElementById("p2");
   p2.className="two";

   }

21