html5——DOM扩展

元素获取

1、document.getElementsByClassName ('class') 通过类名获取元素，以类数组形式存在。

2、document.querySelector(‘div’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。

3、document.querySelectorAll('selector') 通过CSS选择器获取元素，以类数组形式存在。

类名操作

1、Node.classList.add('class') 添加class

2、Node.classList.remove('class') 移除class

3、Node.classList.toggle('class') 切换class，有则移除，无则添加

4、Node.classList.contains('class') 检测是否存在class

自定义属性

1、自定义属性格式：data-*=""，例如data-info="informant"。

2、自定义属性获取：上例，通过Node.dataset['info'] 我们便可以获取到自定义的属性值informant

3、Node.dataset是以类对象形式存在的当我们如下格式设置时，则需要以驼峰格式才能正确获取：data-my-name="itcast"，获取Node.dataset['myName']

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {padding: 0;margin: 0;}div {width: 400px;height: 600px;margin: 100px auto;}nav li {width: 100px;height: 30px;list-style: none;float: left;background-color: #cccccc;text-align: center;font: 400 14px/30px "simsun";cursor: pointer;}.current {background-color: yellow;}section {width: 400px;height: 500px;font: 700 40px/500px "simsun";text-align: center;background-color: blue;display: none;}.show {display: block;}</style>
</head>
<body>
<div><nav><ul><li data-cont="shine" class="current">阳光</li><li data-cont="beach">沙滩</li><li data-cont="cacti">仙人掌</li><li data-cont="captain">老船长</li></ul></nav><section id="shine" class="show">阳光</section><section id="beach">沙滩</section><section id="cacti">仙人掌</section><section id="captain">老船长</section>
</div>
<script>var liNavArr = document.querySelectorAll("nav li");for (var i = 0; i < liNavArr.length; i++) {liNavArr[i].onclick = function (ev) {var li = document.querySelector(".current");li.classList.remove("current");this.classList.add("current");var id = this.dataset["cont"];var oldSec = document.querySelector(".show");oldSec.classList.remove("show");var curSec = document.querySelector("#" + id);curSec.classList.add("show");}}
</script>
</body>
</html>