一、關於html元素的特性

1.html元素都存在一些標準的特性:

  • id 元素在文件中的唯一識別符號
  • title 有關元素的附加說明資訊,一般通過工具提示條顯示出來
  • lang 元素內容的語言程式碼,很少使用
  • dir 語言的方向,很少使用
  • className,與元素的class特性對應,考慮到與ECMAScript的保留字class的衝突,因此命名為className

2.操作特性的方法

  • getAttribute() 獲取相關特性,也可以獲取到自定義的特性,區別於使用DOM元素的屬性獲取

  • setAttribute() 設定相關特性

  • removeAttribute() 刪除相關特性

3.關於獲取html元素特性中使用getAttribute()與直接使用DOM元素的屬性獲取的區別
例如:

<div id='header' title="test" myTitle="monster1935"></div>


var header=document.getElementById('header');
console.log(header.id);//header
console.log(header.getAttribute('id'));//header
console.log(header.title);//test
console.log(header.getAttribute('title'));//test
console.log(header.myTitle);//undefined
console.log(header.getAttribute('myTitle'));//monster1935

在本示例中演示了通過兩種方法獲取html元素的標準特性以及自定義特性。可以發現:
getAttribute()既可以訪問標準特性也可以訪問自定義特性,而是用DOM元素本身屬性訪問html元素特性的時候只能訪問標準特性。
原因:html元素中只有標準特性才會以屬性的形式新增到DOM物件中。

特殊情況:有兩類特性,雖有在DOM物件中有對應的屬性名,但是屬性的值與通過getAttribute()返回的值並不相同。

  • style特性。使用DOM物件屬性訪問style的時候,返回的是一個物件,而使用getAttribute()方法獲取的時候返回的是css文字。
  • 事件處理程式(例如:onclick)。使用DOM物件的屬性訪問的時候,返回的是一個JavaScript函式,而通過getAttribute()方法獲取時返回的是javas程式碼。

使用方法:只有在獲取自定義特性的時候使用getAttribute()方法,操作DOM的時候,使用物件的屬性來獲取。

二、Html5中的自定義屬性

1.Html5規範中規定自定義屬性需要新增字首data-,目的是提供與渲染無關的資訊。

2.使用getAttribute()方法以及setAttribute()方法操作自定義屬性
例如:

<div id="user" data-name="monster1935" data-age="123"></div>

var user=document.getElementById('user');
//使用attributes方法操作屬性
//獲取相關屬性值
var name=user.getAttribute('data-name');
console.log(name)//monster1935
var age = user.getAttribute('data-age');
console.log(age);//123


//設定相關屬性值
user.setAttribute('data-sex','male');
console.log(user.getAttribute('data-sex'));//male

上述示例中展示了使用getAttribute()以及setAttribute()方法操作html元素的自定義屬性。

3.使用dataset操作自定義屬性
例如:


var el=document.querySelector('#user');

console.log(el.id);
console.log(el.dataset); //返回的是一個DomStringMap物件
console.log(el.dataset.name);
console.log(el.dataset.age);

// 設定相關屬性
el.dataset.home="shandong";
console.log(el.dataset);

// 刪除相關屬性
// delete el.dataset.home;
el.dataset.home = null;
console.log(el.dataset);

以上示例展示了使用dataset屬性來操作自定義屬性。dataset屬性的值是一個DOMStringMap的一個示例,是一個名值對的對映。在這個對映中,每個data-name的形式的屬性都有一個對應的屬性,不同的是屬性名中沒有data-字首。(比如,自定義屬性是data-name,對映中對應的屬性就是name).還有一點需要注意的是如果data-屬性名中包含了連字元(比如:data-date-of-birth),則對映中對應的屬性為dateOfBirth,即轉換為相應的駝峰格式來顯示。

4.dataset屬性的相容性問題
Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+

5.使用data-屬性選擇器

  • 獲取相關DOM元素
var elem=document.querySelectorAll("[data-name='monster1935']");
  • 設定相關css樣式
<style>
    div{
        width:100px;
        height:200px;
        margin:20px;

    }
    div[data-name="monster"]{
        background-color: green;
    }
    div[data-name="monster1935"]{
        background-color: red
    }
</style>
.