當前位置：
首頁 >
html5——DOM扩展
發布時間：2023/12/2
47
豆豆
生活随笔
收集整理的這篇文章主要介紹了
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>轉載于:https://www.cnblogs.com/wuqiuxue/p/8043468.html
總結
以上是生活随笔為你收集整理的html5——DOM扩展的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php 函数:func_get_args
- 下一篇： JAVA递归实现全排列