html5 选择元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .div1{width: 50px; height: 50px; background: yellow;}
    .div2{width: 50px; height: 50px; background: red; }
    </style>
    <script>
        window.onload=function(){
            /*只能获取元素 的第一个*/
         var odiv=document.querySelector(‘.div1‘);
          var oall=document.querySelectorAll(‘div‘);
         odiv.style.background="red";

         oall[1].style.height=‘1000px‘;

         var odiv3=document.getElementById(‘div3‘);
         /*类似于数组的对象*/
         alert(odiv3.classList);

         odiv3.classList.add(‘box7‘);
         odiv3.classList.remove(‘box3‘);
         odiv3.classList.toggle(‘box4‘);

        }
    </script>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div id="div3" class="div3 div4 div5"></div>

</body>
</html>
时间: 2024-10-09 23:47:50

html5 选择元素的相关文章

HTML5 template元素

前言 转自http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/ 在单页面应用,我们对页面的无刷新有了更高的要求,HTML不再由后端生成,后端只提供一个REST API,返回JSON数据,模版引擎可以大大方便我们渲染一个视图.而不是吃力的使用 jQeury 去拼接一个DOM. 在现在比较常见的 JS MVC Framework : backbone, emberjs, angularjs 中,模板是非常重要的一个

HTML5 audio元素如何使用js与jquery控制其事件

前言: 每一次遇见问题想到的就是怎么解决?最好的方法还是查询网络媒体,更好的办法是让自己记忆,只有自己理解到了才真正是属于自己.要做一个订单提醒功能,没有使用audio相关的插件,虽然插件无数,还是喜欢自己瞎折腾.(来一些隐形的链接,据说有推广效果,本文原创官网地址:www.pushself.com) 听一个写博客的朋友说周末的博客阅读量明显下降,周末大好时光不出去泡妹子的肯定是有难言之隐的.先来重温一下audio标签的基本属性 定义和用法 <audio> 标签定义声音,比如音乐或其他音频流.

[2] D3.js中如何使用数据和选择元素

对D3.js或数据可视化有兴趣的朋友欢迎到 www.ourd3js.com 讨论. 接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p> 定义一个集合set,里面有三个元素: var set = ["I like dog","I like cat&qu

HTML5文本元素解析

1.<b>表示关键字和产品名称 <b>HTML5</b> 解释:<b>元素实际作用就是加粗.从语义上来看,就是标记一段文字,但并不是特别强调重要性. 2.<strong>表示重要的文字 <strong>HTML5</strong> 解释:<strong>元素实际作用和<b>一样,就是加粗.从语义上来看,就是强调一段重要的文本. 3.<br>强制换行 <wbr>安全换行 <

Jquery 系列(2) 选择元素

Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选择页面元素更灵活的DOM遍历方法 理解DOM树 DOM(Document Object Model)文档对象模型,可以充当JavaScript和网页之间的接口.jQuery最强大的功能就是能轻松的处理和简化在DOM中选择元素.DOM中各元素的关系,同数据结构中的二叉树的称呼非常相近.元素之间的关系包

【 D3.js 入门系列 — 2 】 绑定数据和选择元素

1. 如何绑定数据 D3 有一个很独特的功能:能将数据绑定到 DOM 上,也就是绑定到文档上.这么说可能不好理解,例如网页中有段落元素<p>,我们可以将整数 5 与 <p>绑定到一起. D3 中是通过 data() 和 datum() 函数来绑定数据的,最常用的是 data(). 现有如下 HTML 代码: <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3

jQuery基本选择 元素

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>ddd</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script l

初识jQuery,八字真言“选择元素,对其操作”

jQuery在我印象中,就是很多类似$(),然后昨天开始接触了,觉得很和谐,获取元素比JavaScript简单很多,有意思. 一.开始学习jQuery,下载jQuery库的文件 http://jquery.com/download/ jQuery库有两个版本: 我只是使用这个jQuery库,所以我就只下载了生产版本,足以. 二.开始我的第一个Demo 1.html文件 <!DOCTYPE html> <html> <head> <meta charset=&quo

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

目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息 多媒体是互联网中的最重要的一部分,无论访问的是哪种类型的网页,视频或音频***,在之前实现这些功能对开发人员来说可能非常痛苦,必须依赖Object 标签,调用第三方软件来加载,如Flash等,如果有些设备不支持Flash,我们对此就束手无策了.但是HTML5的出现让多媒体网页开发变得异常简单,也形成了新的标准. 1. 使用Vide