1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.     .div1{width: 50px; height: 50px; background: yellow;}
  8.     .div2{width: 50px; height: 50px; background: red; }
  9.     </style>
  10.     <script>
  11.         window.onload=function(){
  12.             /*只能获取元素 的第一个*/
  13.          var odiv=document.querySelector('.div1');
  14.           var oall=document.querySelectorAll('div');
  15.          odiv.style.background="red";
  16.  
  17.          oall[1].style.height='1000px';
  18.  
  19.          var odiv3=document.getElementById('div3');
  20.          /*类似于数组的对象*/
  21.          alert(odiv3.classList);
  22.  
  23.          odiv3.classList.add('box7');
  24.          odiv3.classList.remove('box3');
  25.          odiv3.classList.toggle('box4');
  26.  
  27.         }
  28.     </script>
  29. </head>
  30. <body>
  31. <div class="div1"></div>
  32. <div class="div2"></div>
  33. <div id="div3" class="div3 div4 div5"></div>
  34.  
  35. </body>
  36. </html>

html5 选择元素的更多相关文章

  1. HTML5结构元素

    前面的话 几年前,用于网页布局的一般都用div元素,但语义化并不好.HTML5引入了大量新的块级元素来帮助提升网页的语义,使页面具有逻辑性的结构.容易维护,并且对数据挖掘服务更加友好.本文将详细介绍H ...

  2. HTML5 template元素

    前言 转自http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/ 在单页面应用,我们对页面的无刷新有了更高的要求,H ...

  3. WebVTT 及 HTML5 <track> 元素简介

    https://dev.opera.com/articles/zh-cn/an-introduction-to-webvtt-and-track/ 简介 网络视频文本轨道,简称为 WebVTT, 是一 ...

  4. html5 新增元素以及css3新特性

    HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...

  5. 抛弃jQuery：DOM API之选择元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...

  6. Jquery 系列（2） 选择元素

    Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选 ...

  7. 三天学会HTML5 ——多媒体元素的使用

    目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息 多媒体是互联网中的最重要的一部分 ...

  8. 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素

    接着上一讲的内容,这次讨论如何选择元素和使用数据.    现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...

  9. D3.js 其他选择元素方法

    在上一节中,已经讲解了 select 和 selectAll,以及选择集的概念.本节具体讲解这两个函数的用法. 假设在 body 中有三个段落元素: <p>Apple</p> ...

随机推荐

  1. 单独使用Mybatis的配置文件

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC & ...

  2. LVS原理详解

    一.集群简介 什么是集群 计算机集群简称集群是一种计算机系统,它通过一组松散集成的计算机软件和/或硬件连接起来高度紧密地协作完成计算工作.在某种意义上,他们可以被看作是一台计算机.集群系统中的单个计算 ...

  3. 一次kubernetes资源文件创建失败的排查

    今天在jenkins中创建kubernetes的rc时,检查目标yaml文件时报出如下错误: + /opt/jenkins/kube/kubectl -s http://10.xx.xx.xx:808 ...

  4. SmartAssembly使用失败记录

    目标:将指定程序集混淆,禁止反编译 1.下载软件 www.red-gate.com 官网下载 因为不常用,所以用的14天试用版 2.前面的照着下面的教程,一直到第四步 http://www.cnblo ...

  5. SSH免密码登陆原理

    Master作为客户端,要实现无密码公钥认证,连接到服务器Salve上时,需要在Master上生成一个密钥对,包括一个公钥和一个私钥,而后将公钥复制到所有的Salve上.当Master通过SSH链接到 ...

  6. Java的配置文件有多少种

    最正宗的只有两个xml和properties两种,其中properties文件用的最广. 其实还有一些如txt,excel这些也可以实现配置文件,但不太正宗. 对于配置文件需要注意以下几点: 1.路径 ...

  7. Scrum Meeting 20161209

    本周Sprint Master 史少帅 会议概要 工作总结: · 陈双, 王永超: 打分功能合并到主分支并且测试成功 · 鲍航波 录音上传.下载接口封装完成,可供调用 · 侯宇泰, 史少帅: 修复录音 ...

  8. java中HashMap重要性质和优化总结

    原文: http://www.cnblogs.com/junyuhuang/p/4519257.html

  9. oracle--函数--bai

    --1 没有入参的函数.返回字符串 create or replace function get_time return varchar2 as v_time varchar2(20); --声明1个 ...

  10. JAVA源码分析-HashMap源码分析(一)

    一直以来,HashMap就是Java面试过程中的常客,不管是刚毕业的,还是工作了好多年的同学,在Java面试过程中,经常会被问到HashMap相关的一些问题,而且每次面试都被问到一些自己平时没有注意的 ...