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扩展相关推荐

js高级程序设计笔记——DOM扩展
DOM扩展为了实现更多的功能,会有一些标准或专有的DOM扩展. 标准扩展主要有: SelectorAPI(选择符API) HTML5 Element Traversal(元素遍历) 一. 选择符AP ...
11. javacript高级程序设计-DOM扩展
1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有 ...
js学习笔记----JavaScript中DOM扩展的那些事
什么都不说,先上总结的图~ Selectors API(选择符API) querySelector()方法接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null． ...
前端重新学习（17）DOM 扩展
DOM的两个主要扩展 Selectors API(选择符 API) HTML5 Element Traversal (元素遍历)规范专有的DOM扩展虽然 DOM为与 XML及 HTML文档交互制定 ...
domdocument php 扩展_php使用自带dom扩展进行元素匹配的原理解析
DOMDocument php提供了非常好用的解析html和xml文档的扩展库DOM,使用这个库可以非常高效的进行html和xml文档的解析,它的原理就是通过寻找首尾匹配对来进行文档的解析. 从上面的 ...
骁龙820 html5 dom,苹果iPhone 7 A10处理器探秘：这项性能 11倍于骁龙820！
苹果的处理器虽然一直只有两个核心,但凭借先进的架构设计,一直有着极为突出的表现,单核心性能完爆安卓阵营,双核心性能更是不逊于某些八核.十核. iPhone 7将使用新的A10处理器,采用台积电16nm ...
HTML5 DOM元素类名相关操作API classList简介（转载自张鑫旭大神）
一.其实事情的发展就像切水果如果我们把元素的类名操作比作"切水果"游戏的话,其中一个单独的类名就好比"水果"或"炸弹"! DOM Leve ...
HTML5 DOM元素类名相关操作API classList简介
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=3483 一.其实事情 ...
html5 dom storage,Client-side data storing,DOM storage or HTML5 Local Storage?
问题 Im really confused when thinking about my requirement to store data locally for offline viewing.N ...

html5——DOM扩展

html5——DOM扩展相关推荐

最新文章

热门文章