DOM（Document Object Model 文檔對象模型）

1、包含了整個頁面的所有功能，可以通過調用方法的形式來對頁面進行操作；

2、JavaScript與Dom的區別：

　　JavaScript是腳本語言，可以寫邏輯性代碼；而Dom是文檔對象模型，可以直接操作頁面；

　　JavaScript+Dom：可以有邏輯的操作頁面

3、獲取標籤

1 //直接獲取標籤
 2 document.getElementById('inner1');  //通過ID獲取標籤
 3 document.getElementsByClassName('inner');  //通過class獲取標籤數組
 4 document.getElementsByTagName('div');  //通過標籤名稱獲取標籤數組
 5 document.getElementsByName('username');  //通過標籤的屬性為name的值定位標籤數組
 6 
 7 //間接獲取標籤
 8 var tmp = document.getElementById('inner1');
 9 tmp.children   //獲取標籤下的所有子元素，返回一個列表
10 tmp.children[1]  //獲取第二個子標籤
11 tmp.firstElementChild  //獲取第一個子標籤
12 tmp.parentElement  //獲取父節點標籤
13 tmp.nextElementSibling  //獲取下一個兄弟標籤
14 tmp.previousElementSibling  //獲取上一個兄弟標籤
15 
16 //例子
17 tmp.parentElement.nextElementSibling.children[4].children[1]

 4、操作標籤

1 //操作select元素
2 var tmp = document.getElementById('s1');  //根據標籤獲取元素
3 tmp.value   //獲取selected的值
4 tmp.value='shanghai'   //修改select選項
5 tmp.selectedIndex=1  //修改select下標

 innerText 與 innerHTML：

1 innerText 與 innerHTML 
2 var tmp = document.getElementById('inner1');  //根據ID獲取元素
3 tmp.innerText   //獲取標籤中的文本內容
4 tmp.innerHTML  //獲取標籤中的所有內容，包含html代碼
5 tmp.innerText = '測試'  //更改便籤內的文本內容，如果賦值的內容包含標籤的字符串，依舊會以字符串的形式存儲
6 tmp.innerHTML='"<a href='http://www.baidu.com'>測試一下</a>"' 
7   //如果賦值的內容包含標籤的字符串，它會直接轉換成標籤元素

 5、操作樣式

1 tmp.className    //獲取class
2 tmp.className='tmp1'    //修改class的值
3 tmp.classList   //獲取樣式數組
4 tmp.classList.add('aaa'); //添加樣式 數組
5 tmp.classList.remove('aaa'); //刪除樣式
6 
7 操作單獨樣式
8 style.xxx //操作樣式的粒度更加細化，操作單個樣式屬性，相當於在標籤中增加一個style屬性
9 style.backgroundColor // 例:在css中樣式可以通過【-】進行連接，在JavaScript中，所有的【-】都被去掉，【-】後面的第一個字符大寫

 6、操作屬性

1 var input = document.getElementById('r1')
2 input.attributes   //獲取標籤下的所有屬性
3 input.setAttribute('class','c1')   //setAttribute(key,value): 設置屬性，在標籤中添加屬性或自定義屬性
4 input.removeAttribute('class')  //removeAttribute(key): 刪除屬性，在標籤中刪除指定屬性

7、創建標籤

1 //通過創建對象的形式創建標籤
2 var input = document.createElement('input')  //createElement(tagName): 通過DOM創建一個標籤對象
3 input.setAttribute('type','text')   //添加屬性
4 input.setAttribute('value','這是通過創建對象的形式新增的標籤')   //添加屬性
5 document.getElementById('create').appendChild(input)  //appendChild(tagObj): 在父級標籤內添加一個子標籤對象
1 //通過字符串形式創建標籤
 2 var input = '<input type="text" value="這是通過字符串的形式創建的標籤">'
 3 var div = document.getElementById('create');
 4 div.insertAdjacentHTML('afterBegin',input);
 5 
 6 //insertAdjacentHTML(where,tagStr): 父級標籤內添加一個子標籤字符串
 7 //beforeBegin: 插入到獲取到標籤的前面
 8 //afterBegin: 插入到獲取到標籤的子標籤的前面
 9 //beforeEnd: 插入到獲取到標籤的子標籤的後面
10 //afterEnd: 插入到獲取到標籤的後面