元素获取

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>

html5——DOM扩展的更多相关文章

  1. HTML5 DOM扩展

    一.选择符 1. querySelector()方法:返回与该模式匹配的第一个元素 //取得body元素 var body = document.querySelector("body&qu ...

  2. DOM扩展札记

    Selector API HTML5 DOM扩展 Element Traversal规范 Selector API 众多JavaScript库中,最常用的一个功能就是根据css选择符选择与某个模式匹配 ...

  3. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  4. HTML5学习笔记（二十四）：DOM扩展

    DOM扩展 DOM标准扩展最开始都是来自各个浏览器的自定义扩展DOM的功能,后被收录为标准的DOM相关API. 本笔记只记录被各大浏览器支持的标准扩展,对于特定浏览器的专有扩展不讨论. 选择符API ...

  5. DOM扩展-Selectors API(选择符 API)、元素遍历

    DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...

  6. dom扩展

    第十一章 DOM扩展 一.选择符API 1.querySelector()方法             接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null. 2. ...

  7. 11. javacript高级程序设计-DOM扩展

    1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有 ...

  8. js-DOM，DOM扩展

    DOM: 1. 了解节点的信息:nodeName(属性的标签名),nodeValue两个属性 在取得信息之前要进行判断是不是节点,节点类型由12个数值常量进行表示 2.每个节点都有一个childNod ...

  9. 《JAVASCRIPT高级程序设计》DOM扩展

    虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...

随机推荐

  1. codevs4419 FFF 团卧底的菊花

    题目描述 Description FFF 团卧底在这次出题后就知道他的菊花可能有巨大的危险,于是他提前摆布好了菊花阵,现在菊花阵里有若干朵菊花,出现次数最多的那一朵就是出题人的,你的任务是需要找出出题 ...

  2. 【Java基础】Java基本数据类型与位运算

    1.赋值运算符 赋值使用操作符“=”.它的意思是“取右边的值(即右值),把它复制给左边(即左值)”.右值可以是任何 常数.变量或者表达式 (只要它能 生成 一个值就行).但左值必须是一个明确的,已命名 ...

  3. 在IIS6,7中部署ASP.NET网站[转]

    阅读目录 开始 查看web.config文件 在IIS中创建网站 IIS6 添加扩展名映射 IIS6 无扩展名的映射 目录的写入权限 SQL SERVER的配置 在IIS7中部署ASP.NET程序 8 ...

  4. python字符串截取

    python字符串截取 str = 'abcd' str[0:-1],-1表示末尾开始的位置,但是[]操作符不取尾下标所对应的字符: 所以str[0:-1] ---->‘abc' str[0:1 ...

  5. duilib-Ex-Debug

    因为一些事件google无法訪问,托管在其上的项目也无法检出也基本无人更新,因此维护了一个版本号,用于排除已有的bug和扩展一些功能.这样能够避免反复造轮子和反复的修车子.欢迎大家一起维护.本人能力和 ...

  6. Intellij IDEA报错：Could not save application settings: java.io.IOException: java.lang.AssertionError: Unexpected content storage modificat

    Question: i have a message saying "Could not save application settings: java.io.IOException: ja ...

  7. mysql 多日志表结果集合拼接存储过程

    通常单天的日志 仅仅记录当天的日志信息,假设须要查看一月内的日志信息须要对每天的日志表结果集合进行拼接,通经常使用到 union . 储存过程: drop PROCEDURE if EXISTS un ...

  8. System.load 与 System.loadLibrary 的区别

    相同点 它们都可以用来装载库文件,不论是JNI库文件还是非JNI库文件. 在任何本地方法被调用之前必须先用这个两个方法之一把相应的JNI库文件装载. System.load System.load 参 ...

  9. Codesys——TON和TOF的使用方法

    1. 引言 介绍延迟导通.延迟关闭函数的使用方法. 2. 函数描述 TON: 当IN为FALSE时,输出Q为FALSE: 当IN为由FALSE变为TRUE时,延迟导通过程中Q为FALSE,当时间到Q变 ...

  10. ASP.NET_SessionId vs .ASPXAUTH why do we need both of them?

    https://stackoverflow.com/questions/23758704/asp-net-sessionid-vs-aspxauth-why-do-we-need-both-of-th ...