在
jQuery中我們可以通過選擇器快速獲取元素,這些新的選擇器,在html5中提供了一個類似的方法
querySelector方法
返回當前文檔中
第一個匹配特定選擇器的元素
- 示例代碼：
var node = document.querySelector(css選擇器);
querySelectorAll
返回當前文檔中
所有匹配特定選擇器的元素(返回值是數(shù)組)
- 示例代碼：
var nodeLists = document.querySelectorAll(css選擇器);
classList
這個元素返回的是dom元素的
class 列表,這個屬性本身是只讀的，但是我們可以通過幾個方法去操作元素的class
-
可用方法：
- add ： 添加一個 class 到元素的 class 列表中
- remove ： 從元素的 class 列表中移除一個 class
- toggle ： 切換一個 class 是否存在于一個元素的 class 列表中
- contains ： 查詢一個指定的 class 是否存在于元素的 class 列表中
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5新增dom操作語法</title>
<style type="text/css">
.top{
width: 100%;
height: 100px;
background-color: red;
}
.pink{
border: 10px solid pink;
}
</style>
</head>
<body>
<header class="pink yellow"></header>
<input type="button" name="" onclick="changeColor()">
<script type="text/javascript">
function changeColor() {
// 選擇器的方式
// 獲取元素
var dom = document.querySelector("header");
// 測試classList屬性的方法
// 添加class
dom.classList.add("top");
// 移除class
dom.classList.remove('pink');
// 判斷是否含有class
alert(dom.classList.contains('orange'));
// 如果有class 刪除 如果沒有class 添加
dom.classList.toggle('pink');
}
</script>
</body>
</html>
H5_data*屬性
data-*這個屬性解決了自定義Html標簽內(nèi)屬性取值的問題,只要我們想,可以往
HTML標簽中添加任意個數(shù)的屬性
-
語法:
- data-:這個是固定格式
- data-xxx:xxx是自定義的值
-
注意:
- 屬性名不應(yīng)該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個字符
- 屬性值可以是任意字符串
- 不要使用純數(shù)字,特殊字符等作為自定義值
- 如果data之后使用
-連接多個值,取值時,需要使用駝峰命名
示例代碼:
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
- 獲取方式:
// 假定有這么一個元素
<li data-type="bird" id="liObj">Owl</li>
<li data-animal-type="spider" id="liObj2">蜘蛛</li>
<script>
var domObj = document.getElementById("liObj");
var type = domObj.dataset["type"]
var domObj2 = document.getElementById("liObj2");
var type2 = domObj.dataset["animalType"]
</script>
-
總結(jié):
- 屬性名為:data-xxx
- xxx為自定義值,不能使用大寫字母(不建議使用純數(shù)字,或者奇怪字符)
-
獲取方式:
- 在js中獲取了元素之后,通過
dataset["key"]即可獲取保存的值 - 其中key為
data-xxx中 xxx的字母
- 在js中獲取了元素之后,通過
- 屬性名為:data-xxx
