web前端之DOM初識element

在上一篇章，和你們分享了DOM的Node節點，本篇章繼續分享關於DOM的知識element，element繼承自Node，在原型鏈上，Node是element的父級，element是Node的子級，所以element可使用絕大部分node的屬性和方法，那麼element是什麼呢，element就是咱們常見的HTML標籤，node的元素節點，也就是nodeType等於1的。

一. 屬性

element不止有父原型node的屬性，也有本身的一些屬性，下面我一塊兒來看element的經常使用屬性以及使用方式：

1. element基礎屬性，element基礎屬性指的是標籤元素自己能夠設置的相關屬性，包含以下：

• element.id可讀寫屬性，設置或者獲取element.id值；
• element.tagName返回元素的大寫標籤名；
• element.src img標籤的src屬性，屬性值通常是：圖片的相對路徑；
• element.href a標籤的href屬性，該屬性的屬性值通常超連接的跳轉路徑；
• element.title可讀寫屬性，該屬性能夠用做鼠標移入元素的提示框信息；

`

<div id='div1'>div標籤</div>
var div = document.getElementById('div1');
div.id  // 'div1'
div.tagName  // 'DIV'
div.title = 'div標籤'   // 設置title提示
複製代碼

` 2. element狀態屬性，element狀態屬性指當前元素的狀態，請看詳細屬性名稱：

• element.hidden 可讀寫屬性，該屬性用做元素是否可見，返回的是個布爾值，true表示隱藏，false表示不隱藏；注意：使用hidden屬性隱藏時，隱藏的元素自己不會佔據空間，和css：display:none功能同樣
• element.contenteditable 可讀寫屬性，該屬性用做該元素內容是否可編輯，返回的是個布爾值，true表示能夠，false表示不能夠；注意：該屬性不止是能夠控制元素自己的文本節點能夠編輯，只要設置了該屬性，一樣能夠編輯子級元素的內容

`

<div id='div1'>
    div標籤
    <span id='span'>span標籤</span>
    <b>標籤</b>
</div>
var div = document.getElementById('div1');
var span = document.getElementById('span');
div.contenteditable = true; // 元素內容能夠編輯
span.hidden = true; // span元素隱藏
複製代碼

`

3. element.className,element.classList,className可讀寫屬性，用來設置或讀取元素的class值，classList返回一個相似數組的對象，返回的對象包含了當前元素的全部class值，而classList這個對象擁有本身的一系列方法，用做對class的操做。

• element.classList.add(): 增長一個 class;
• element.classList.remove(): 移除一個 class。
• element.classList.toggle(): 切換當前元素某個class,當前class存在則移除，不存在則添加
• element.classList.contains(): 檢查當前元素是否包含某個class值，返回true或者false
• element.classList.item(): 取指定索引位置的class值
• element.classList.toString(): 將 class 的列表轉爲字符串

`

<div class="div1 left">div標籤</div>
var div = document.getElementByClassName('div1')[0];

div.classList // ["div1", "left", value: "div1 left"]

div.classList.add('size') //增長'size' class，  <div id="div1" class="div1 left size">div標籤</div>

div.classList.remove('size') //刪除'size'  <div id="div1" class="div1 left">div標籤</div>

div.classList.toggle('size')// 切換'size' <div id="div1" class="div1 left size">div標籤</div>

div.classList.contains('size')  // 返回true或者false

div.classList.item(0)   // 'div1'
複製代碼

`

4. element.attributes返回一個相似數組的動態對象，成員是該元素標籤的全部屬性節點對象，屬性的實時變化都會反映在這個節點對象上。元素節點還提供六個方法用來操做屬性：

• element.getAttribute()該方法獲取當前元素節點的指定屬性值，不存在則返回null，該方法接收一個參數：就是須要獲取的屬性名稱;
• element.getAttributeNames()返回一個數組，成員是當前元素的全部屬性的名字;
• element.setAttribute()該方法是設置當前元素節點指定屬性的屬性值，該方法接收兩個參數，參數一：須要設置的屬性名稱，參數二：設置的屬性值；
• element.hasAttribute()該方法是檢測當前元素是否含有指定屬性，返回一個布爾值；該方法接收一個參數：就是須要檢測的屬性名稱;
• element.hasAttributes()注意：該方法比上面這個方法多了個字母s,該方法是用來檢測當前元素是否擁有屬性的，若是沒有任何屬性則返回false,有則返回true;
• element.removeAttribute()該方法用來刪除當前元素指定的屬性，該方法接收一個參數，就是須要刪除的屬性名稱。

`

<div id='div1' title='div標籤'>div標籤</div>

var div = document.getElementById('div1');

div.attributes  //輸出類數組對象 {0: id, 1: title, id: id, title: title, length: 2}

div.getAttribute('title')  // 輸出：'div標籤'

div.getAttributeNames() // ["id", "title"]

div.setAttribute('name', 'html標籤')   //  <div id='div1' title='div標籤' name="html標籤">div標籤</div>

div.hasAttribute('name')    // true

div.hasAttributes()     // true

div.removeAttribute('title')    // <div id='div1' name="html標籤">div標籤</div>
複製代碼

` 注意：這幾個方法對全部屬性都適用，包括自定義屬性

5. element.dataset數據存取屬性，dataset它指向一個對象，能夠用來操做 HTML 元素標籤的data-*屬性。data-*是官方提供標準的在元素上進行數據存儲的一個標準屬性。

`

<div id='div1' data-msg = "信息">div標籤</div>

var div = document.getElementById('div1');

div.dataset.msg     // '信息'；

div.dataset.msg = '數據信息'// <div id='div1' data-msg = "數據信息">div標籤</div>
複製代碼

`

上面是用dataset對象對data-*屬性進行存取操做，data-*屬性也可使用getAttribute()和setAttribute()操做。注意：data-屬性的屬性名，只能包含英文字母、數字、連詞線（-）、點（.）、冒號（:）和下劃線（_）。

6. element.innerHTML, element.innerText:兩個都是可讀寫屬性，element.innerHTML屬性返回一個字符串，返回當前元素包含的全部 HTML 代碼和文本,element.innerText屬性一樣是返回一個字符串，不過它返回的是當前元素包括的全部text文本，若是有子元素節點，則一併子元素節點裏的文本，不會返回子元素標籤代碼。

`

<div id='div1'>div標籤<span>span標籤</span></div>

var div = document.getElementById('div1');

div.innerHTML   // div標籤<span>span標籤</span>

div.innerText   // div標籤span標籤

div.innerHTML = ''  // <div id='div1'></div>
複製代碼

` 注意：innerHTML在賦值操做時，若是值包含有合法的html標籤字符串，賦值操做完成後，瀏覽器是能夠解析爲正常的html標籤的，innerText在IE9如下是不兼容的

7. element.clientHeight,element.clientWidth返回當前元素的高度和寬度值，高度值和寬度值會包含padding；
8. element.clientLeft，element.clientTop返回當前元素的邊框的寬度值，clientLeft返回左邊框，clientTop返回頂部邊框;
9. element.scrollHeight，element.scrollWidth返回當前元素總高度值，和寬度值，高度和寬度包含由於滾動條隱藏的不可見部分。高度值和寬度值包含元素的padding值，可是不包含border值。
10. element.scrollLeft，element.scrollTop返回當前元素滾動隱藏的寬度值和高度值；scrollLeft是左邊滾動隱藏的值，scrollTop是頂部滾動隱藏的值。
11. element.offsetHeight，element.offsetWidth返回當前元素的高度值和寬度值，高度值和寬度值會包含padding和boeder值。
12. element.offsetLeft，element.offsetTop返回當前元素相對於當前文檔左偏移距離和頂部偏移距離。注意：若是當前元素是相對於父元素作絕對定位的，返回的則是相對於父元素的偏移距離
13. element.offsetParent返回當前元素相對定位的父元素節點。
14. element.style讀取屬性，用來獲取當前元素指定的css樣式：

`

<style>
    div{
        width:100px;
        height:100px;
    }
</style>
<div id='div1'>div標籤</div>

var div = document.getElementById('div1');
div.style.height    // `100px`
div.style.fontSize = '24px'
複製代碼

` 注意：該屬性設置的樣式都是行間樣式

15. element.children, element.firstElementChild, element.lastElementChild, element.nextElementSibling, element.previousElementSibling：element.children全部子元素，element.firstElementChild獲取第一個子元素,element.lastElementChild獲取最後一個子元素節，element.nextElementSibling獲取後一個兄弟元素，element.previousElementSibling獲取上一個兄弟元素。

二. 方法

1. element.querySelector(),接收一個css選擇器做爲參數，返回當前元素下該參數匹配到的第一個元素。
2. element.querySelectorAll(),接收一個css選擇器參數，返回一個類數組，類數組裏包含了當前元素下全部符合匹配條件的元素。
3. element.getElementsByClassName()接收一個calss選擇器參數,返回一個類數組，類數組裏包含了當前元素下全部符合匹配條件的元素。
4. element.getElementById()接收一個id選擇器參數，返回當前元素下符合匹配條件的元素。
5. element.addEventListener()添加二級DOM事件監聽函數。
6. element.removeEventListener()移除二級DOM事件監聽函數。
7. element.dispatchEvent() 事件觸發函數。

注意：方法5,6,7會在event事件篇章詳細分享，本篇章只作提示，還有屬性方法在本篇章上半部分已經作了介紹，因此這裏也沒有介紹了，另外element方法其實還有很多並未介紹到，沒有介紹到的好比有各種事件，這些方法我的以爲，介紹起來繁瑣而且並無什麼特別的知識點，因此就未作介紹了，想詳細瞭解的同窗能夠去到w3c官網瞭解並查看。

小結

element元素是DOM的核心知識點，包含的知識點很是多，須要咱們更多去使用和驗證，js也是經過DOM提供的各類屬性接口和方法接口來對element元素進行操做。好啦，今天本次分享就到這裏，喜歡的朋友幫點個贊，以示鼓勵，謝謝。