DOM自定義屬性操做

時間 2020-07-06

標籤 dom 自定義屬性欄目 HTML 简体版

原文原文鏈接

DOM標準

（一）核心DOMhtml

能夠操做一切結構化文檔的API，包括HTML和XML，核心DOM是萬能的，但又是繁瑣的。程序員

（二）HTML DOM數據庫

專門操做HTML文檔的簡化版DOM API，僅對經常使用的複雜的API進行了簡化，HTML DOM不是萬能的，但更加簡單。spa

注意：在開發中先使用簡單的，簡單的不行再使用複雜的進行補充，以實現效果爲目標。code

自定義屬性的操做

1、獲取屬性值

element.屬性 獲取屬性值htm

element.getAttribute('屬性'); 獲取自定義屬性（咱們本身添加的屬性）blog

區別：ip

element.屬性; 獲取元素內置屬性（元素自己自帶的屬性）element

element.getAttribute('屬性'); 主要得到自定義的屬性（標準）程序員自定義的屬性開發

注意：

class是保留關鍵字，可是在element.getAttribute('屬性'); 方法中能夠直接使用；element.屬性寫法則須要使用className代替

實例：

獲取div元素中的自帶屬性和自定義屬性

 1 <body>
 2     <div class="first" index="ww"></div>
 3 <script>
 4     var div = document.querySelector('div');  5     //element.屬性 獲取內置屬性（元素自己自帶的屬性）
 6  console.log(div.className);  7     //element.getAttribute('屬性') 得到自定義屬性
 8  console.log(div.getAttribute('index'));  9  console.log(div.getAttribute('class')); 10 </script>
11 </body>
12 </html>

2、設置屬性值

element.屬性 = '值'; 設置內置屬性值

element.setAttribute('屬性','值'); 主要針對自定義屬性

實例：

<body> <div class="first" index="ww" id='ss'></div> <script> var div = document.querySelector('div'); console.log(111111); // element.屬性 = ‘值’  div.id = 'box'; div.className = 'navs'; //element.setAttribute('屬性名','值')  div.setAttribute('index','111'); div.setAttribute('class','footer'); </script> </body>

3、移除屬性

element.removeAttribute("屬性名")； 移除指定的屬性

實例：

<body> <div class="first" index="ww" id='ss'></div> <script> var div = document.querySelector('div'); div.removeAttribute('index'); </script> </body>

4、判斷是否包含指定的屬性

element.hasAttribute("屬性名"); 判斷元素裏面有沒有對應的屬性名

結果會返回布爾類型的值，true或false

實例：

<body> <div class="first" index="ww" id='ss'></div> <script> var div = document.querySelector('div'); div.removeAttribute('index'); console.log(div.hasAttribute('index')); console.log(div.hasAttribute('class')); </script> </body>

5、HTML5自定義屬性

自定義屬性的目的：是爲了保存和使用數據，有些數據能夠保存到頁面中而不用保存到數據庫中

自定義屬性獲取是經過 getAttribute('屬性') 方法獲取

可是有些自定義屬性很容易引發歧義，不容易判斷究竟是元素內部的屬性仍是自定義屬性

H5中爲咱們新增了標準

（一）設置H5自定義屬性

H5中規定自定義屬性須要以 data- 開頭作屬性名而且賦值

例如：<div data-index="ww" ></div>

也可使用JS設置新的自定義屬性

例如：element.setAttribute('data-index','111');

（二）獲取H5自定義屬性

一、兼容性較好的獲取方法

getAttribute('屬性')

二、H5新增方法（從IE11纔開始支持，兼容性較差）

element.dataset.屬性;

element.dataset[ '屬性' ];

dataset 能夠理解成集合的意思，得到全部以 data-開頭的 自定義屬性，data-開頭的自定義屬性的集合

注意：若是自定義屬性裏面有多個 - 鏈接的屬性名稱，使用H5新增方法獲取的時候須要採用駝峯命名法

實例：

 1 <body>  2 <div data-index="ww" data-time='20' data-list-name='name'></div>  3 <script>  4 var div = document.querySelector('div');  5  console.log(div.getAttribute('data-list-name'));  6 //H5新增獲取屬性的方法  7  console.log(div.dataset);  8  console.log(div.dataset.index);  9  console.log(div.dataset['index']); 10  console.log(div.dataset.listName); 11  console.log(div.dataset['listName']); 12 </script> 13 </body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。