乾貨:HTML5獲取頁面元素及類名操做和自定義屬性

1 . document.querySelector("選擇器");

返回文檔中匹配指定 CSS 選擇器的一個元素
例:

<script>
document.querySelector("p");
document.querySelector(".example");
document.querySelector("p.example");
document.querySelector("a[target]");
document.querySelector("h2, h3").style.backgroundColor = "red";
</script>

2. document.querySelectorAll("選擇器");

返回文檔中匹配指定 CSS 選擇器的全部元素

3. classList.add("類名");

添加類名

4. classList.remove("類名");

移除類名

5. classList.contains("類名");

判斷類名是否設置

6. data-自定義屬性名

1. 獲取自定義屬性 Dom.dataset 返回的是一個對象

Dom.dataset.屬性名 或 Dom.dataset[屬性名]

1. 設置自定義屬性

Dom.dataset.自定義屬性名 = 值 或 Dom.dataset[自定義屬性名] = 值

例子:

<div data-id="id" data-age="age" id="user">display name</div>
<script>
var dataset = document.getElementById("cuebar");
if( '18' === dataset.dataset['age'] ){
    console.log(' is 18');
}
dataset['oox'] = 'some value';
dataset['id'] = 'new id';
</script>

h5學習視頻連接:https://pan.baidu.com/s/1wYDr...
提取碼:68fn