前端基礎知識-DOM操做

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

一、包含了整個頁面的全部功能，能夠經過調用方法的形式來對頁面進行操做；

二、JavaScript與Dom的區別：

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

　　JavaScript+Dom：能夠有邏輯的操做頁面

三、獲取標籤

 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]

 四、操做標籤

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   //若是賦值的內容包含標籤的字符串，它會直接轉換成標籤元素

 五、操做樣式

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中，全部的【-】都被去掉，【-】後面的第一個字符大寫

 六、操做屬性

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

七、建立標籤

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: 插入到獲取到標籤的後面