DOM -- 元素屬性 · 前端知識 -- 學習整理

>[success] # DOM -- 元素屬性 1. 一個元素除了有開始標簽、結束標簽、內容之外，還有很多的屬性（attribute） ![](https://img.kancloud.cn/70/e3/70e3f74e1e1854527799b0d352c198f9_982x282.png) 這些屬性分為兩大類`標準屬性` 和 `非標準屬性` * **標準attribute**：某些attribute屬性是標準的，比如id、class、href、type、value等 * **非標準的attribute**：某些attribute屬性是自定義的，比如abc、age、height等 **注**：主要區別在非標準屬性是自己定義，而標準屬性是天生自帶的 ~~~ <a href="https://www.baidu.com" abc="zz">百度一下</a> ~~~ * 以上面為例子，其中`href` 是標準屬性，`abc` 為非標準屬性，標準屬性在打印原型鏈時候就可以見到，非則不是，如圖`a 標簽元素類型原型鏈打印` ![](https://img.kancloud.cn/8f/a6/8fa6a52985ec775a8597863d1627cd48_753x632.png) >[info] ## 獲取屬性 1. 這里獲取屬性指的是即獲取`標準屬性` 又 `非標準屬性`都支持如下的方法: 1.1. **elem.hasAttribute(name)** — 檢查特性是否存在。 1.2. **elem.getAttribute(name)** — 獲取這個特性值。 1.3. **elem.setAttribute(name, value)** — 設置這個特性值。 1.4. **elem.removeAttribute(name)** — 移除這個特性。 1.5. **attributes**：attr對象的集合，具有name、value屬性； 2. attribute具備以下特征：它們的名字是**大小寫不敏感**的（id 與 ID 相同）。它們的值總是**字符串類型**的。 * 獲取**標準attribute** checed 時候打印是字符串 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body>  <input type="checkbox" checked="checked" age="123" /> <script> var inputEl = document.querySelector('input') // 1.所有的attribute都支持的操作 console.log( inputEl.hasAttribute('AGE'), inputEl.hasAttribute('abc'), inputEl.hasAttribute('id') ) console.log(inputEl.getAttribute('checked')) // 字符串 inputEl.setAttribute('id', 'cba') inputEl.removeAttribute('id') // 獲取所有屬性 var boxAttributes = inputEl.attributes for (var attr of boxAttributes) { console.log(attr.name, attr.value) } </script> </body> </html> ~~~ ![](https://img.kancloud.cn/45/05/45051bfef9169e6f48902b84c279ad14_364x123.png) > [info] ## 獲取標準屬性標準屬性就是`元素屬性對象上的屬性`因此可以像對象一樣直接`點` 取值，相比使用`getAttribute` 獲取標準屬性，好處是如果是布爾類型等屬性會直接顯示boolean 類型，修改也同理像使用對象一樣進行修改屬性 * 以上面例子 ~~~ inputEl.checked // 獲取是布爾類型 inputEl.checked = false ~~~ >[info] ## 修改樣式通過控制class 和 style 來修改樣式： * 查看style ~~~ var boxEl = document.querySelector('.box') console.log(boxEl.style) ~~~ * 獲取某個元素 style 屬性 ![](https://img.kancloud.cn/3f/2a/3f2af8a10b5a664fc278b4b4d607b014_1264x694.png) 1. 直接給style 進行屬性賦值要**使用的駝峰格式**，如果將一個屬性的值, 設置為**空的字符串**, 那么是使用默認值 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div class="box" style="background-color: aqua; color: white; width: 100px" > 我是box </div> <script> var boxEl = document.querySelector('.box') console.log(boxEl.style) // 1.在property中使用的駝峰格式 console.log(boxEl.style.backgroundColor) // 2.如果將一個屬性的值, 設置為空的字符串, 那么是使用默認值 boxEl.style.display = '' boxEl.style.fontSize = '' // 3 屬性添加并不會覆蓋原來的因為是給css style 對象指定key 賦值 boxEl.style.height = '200px' </script> </body> </html> ~~~ ![](https://img.kancloud.cn/82/48/8248ddb84c1e86c5fc1ff18e84165a38_931x124.png) * 如果使用`boxEl.style.cssText = 'font-size: 30px; color: red;'` **cssText** 會把style 所有屬性都覆蓋 2. **編輯 class** 需要使用`className` 屬性但是這種修改會覆蓋之前class ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div class="box">我是box</div> <script> var boxEl = document.querySelector('.box') boxEl.className = 'zz' </script> </body> </html> ~~~ ![](https://img.kancloud.cn/0e/5a/0e5ad6b09420a641abed6462efe3c1b9_568x198.png) 使用其他方法： * elem.classList.add (class) ：添加一個類 * elem.classList.remove(class)：添加/移除類。 * elem.classList.toggle(class) ：如果類不存在就添加類，存在就移除它。 * elem.classList.contains(class)：檢查給定類，返回 true/false ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style></style> </head> <body> <div class="box">我是box</div> <button class="btn">切換</button> <script> var boxEl = document.querySelector('.box') var btnEl = document.querySelector('.btn') btnEl.onclick = function () { // if (boxEl.classList.contains("active")) { // boxEl.classList.remove("active") // } else { // boxEl.classList.add("active") // } boxEl.classList.toggle('active') } </script> </body> </html> ~~~ >[info] ## 關于dataset ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="abc" class="box" data-age="18" data-height="1.88"></div> <script> var boxEl = document.querySelector(".box") console.log(boxEl.dataset.age) console.log(boxEl.dataset.height) </script> </body> </html> ~~~