現在我們就開始認識什麼是DOM？
DOM-文檔對象模型（Document Object Moel）,定義訪問和處理HTML文檔的標準方法。
DOM將HTML文檔呈現爲帶有元素，屬性和文本的樹結構（節點樹）
HTML文檔由以下三種節點構成
1.元素節點:<html><head><body><p>等都是元素節點，即標籤；
2.屬性節點:元素屬性，<input>標籤的type屬性可以是button，text等；
3.文本節點:向用戶展示的內容，如<li>...<li>中的JavaScript,DOM,CSS等文本；
例子
<div id="" class="">Hello</div>//<div>是元素節點，id，class是屬性節點，Hello是文本節點1.通過ID獲取元素
標籤的id屬性值是唯一的，我們可以通過id找到指定的標籤再對其操作
語法:
document.getElementById(“id”) ;key:這裏獲取的元素是一個對象，如果要對元素進行操作必須通過他的屬性和方法。
2.innerHTML屬性-用於獲取和替換HTML元素的內容
語法:Object.innerHTML
key:innerHTML區分大小寫
var mychar= document.getElementById("test").innerHTML;
document.write("結果:"+mychar); //輸出獲取的id名爲test的內容（文本節點）3.改變 HTML 樣式
語法:Object.style.property = new style;
例子如下
var mychar= document.getElementById("test");
mychar.style.color = "white";
mychar.style.fontSize = "20px";
mychar.style.backgroundColor='#ccc';
mychar.style.width="300px"在這裏介紹一點基本屬性，只包括一小部分CSS樣式屬性，其他樣式也可以通過該方法進行設置和修改
屬性 描述
font 在一行設置所有字體屬性
fontSize 字體大小
fontFamily 字體系列
color 字體顏色
width 元素寬度
height 元素高度
backgroundColor 元素背景顏色
這個例子是動態改變字體的大小
<div style="width:200px;height:120px;" id="test">測試改變字體大小</div>
<input name="" type="button" οnclick="document.getElementById('test').style.fontSize='20px';" value="big"/>
<input name="" type="button" οnclick="document.getElementById('test').style.fontSize='16px';" value="medium"/>
<input name="" type="button" οnclick="document.getElementById('test').style.fontSize='12px';" value="small"/>key:更改屬性的時候記得帶上單位px，注意css樣式屬性的駝峯命名法
4.顯示和隱藏（display屬性)
語法:Object.style.display = value
value取值:
none 此元素不會被現實
block 此元素被顯示爲塊級元素
key:使用的時候記得帶上雙引號
5.控制類名（className 屬性)-設置或返回元素的class屬性
語法:Object.className = classname
作用:1.獲取元素的class屬性
2.爲網頁內的某一個元素指定一個css樣式來更改該元素的外觀
<!DOCTYPE HTML>
<html>
<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" > 爲網頁內的某一元素指定一個css樣式</p>
<input type="button" value="添加樣式" οnclick="add()"/>
<p id="p2" class="one">JavaScript使網頁顯示動態效果並實現與用戶交互功能。</p>
<input type="button" value="更改外觀" οnclick="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>
</html>這是一個綜合性的小例子
<!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入門</p>
<p>2. JavaScript進階，掌握JS的基礎語法、函數、數組、事件、內置對象、BOM瀏覽器、DOM操作。</p>
<p>3. 深入學習JavaScript的變量作用域、事件、對象、運動、cookie、正則表達式、ajax等課程。</p>
</div>
<form>
<!--當點擊相應按鈕，執行相應操作，爲按鈕添加相應事件-->
<input type="button" value="改變顏色" οnclick="changeColor()">
<input type="button" value="改變寬高" οnclick='changeWandH()'>
<input type="button" value="隱藏內容" οnclick="hideContent()">
<input type="button" value="顯示內容" οnclick="displayContent()">
<input type="button" value="取消設置" οnclick="cancelSetting()">
</form>
<script type="text/javascript">
var txt = document.getElementById('txt');
//定義"改變顏色"的函數
function changeColor(){
txt.style.color="#ff0000";
txt.style.backgroundColor='#124512';
}
//定義"改變寬高"的函數
function changeWandH(){
txt.style.width="200px";
txt.style.height="300px";
}
//定義"顯示內容"的函數
function displayContent(){
txt.style.display="block"
}
//定義"隱藏內容"的函數
function hideContent(){
txt.style.display="none"
}
//定義"取消設置"的函數
function cancelSetting(){
if(confirm("確定取消設置？")){
txt.removeAttribute('style');
}
}
</script>
</body>
</html>