HTML5-新API选择器

新的选择器
document.querySelector("selector");
selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回null;
支持: Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+

document.querySelectorAll("selector");
selector:根据CSS选择器返回所有匹配到的元素数组,如果没有匹配到,则返回空数组;
支持: Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+

example:

 1         <div class="oo">HELLO WORD</div>
 2         <div class="oo">this is a test</div>

<script type="text/javascript">

var cc=/*document.querySelector("div")*/document.querySelector(".oo");//返回匹配到的第一个内容

console.log(cc.innerHTML);

var dd=document.querySelectorAll("div");//返回匹配到的所有内容

console.log(dd.length);

for(var i=0;i<dd.length;i++){
console.log(dd.item(i).innerHTML);
}

/*

输出
HELLO WORD
2
HELLO WORD
this is a test
*/
</script>

时间: 2024-10-11 05:16:41

HTML5-新API选择器的相关文章

HTML5新api即pushState和replaceState实现无刷新修改url

1,首先我面临一个需求,页面回退时需要知道来之前的页面状态.很简单,回退时在url里赋参数即可.问题是在ipad上,回退按钮是安卓那边的,我控制不了.只好采用js无刷新修改url历史记录,来告诉服务器我回去时要给我保持神秘状态. 先上代码,再解释这两个api. var url=window.location.href; var length=url.length; newur=url+"****"; history.replaceState(null, "",new

HTML5中类jQuery选择器querySelector的使用

HTML5中类jQuery选择器querySelector的使用 简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器.这使得在编写原生JavaScript代码时方便了许多. 用法 两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法. element = document.querySelector('sele

HTML5的JavaScript选择器介绍

在HTML5出现之前使用JavaScript查找DOM元素,有以下三种原生的方法: getElementById:根据指定元素的id属性返回元素 getElementsByName:返回所有指定name属性的元素 getElementsByTagName:返回所有指定标签的元素 HTML5新增的选择器,方法有两种: querySelector:根据选择器规则返回第一个符合要求的元素 querySelectorAll:根据选择器规则返回所有符合要求的元素 支持新的HTML5 JavaScript选

HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理。

一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.time.mark.section.header.footer.hgroup.progress.figure.figcaption.nav.meter.output.details.summary.ruby和main   三.让IE5.5~9支持HTML5新标签 1. IE5.5~8下对于不支持的标签

Html5 Selectors API

新QuerySelector方法 querySelector():根据指定的选择规则,返回在页面中找到的第一匹配元素 querySelectorAll():根据指定规则返回页面中所有相匹配的元素 实例: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; char

HTML5新标签解释及其使用场景

我们来看一下HTML 5提供的一些新的标签用法和HTML 4的区别 <article> 标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本,亦或是来自其他外部源内容.HTML5:<article></article>HTML4:<div></div> <aside> 标签定义 article 以外的内容:aside 的内容应该与 article 的内容相关.HTML5:&l

HTML5 & CSS3初学者指南(3) – HTML5新特性

介绍 本文介绍了 HTML5 的一些新特性.主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件 Web存储 HTML5 Web 存储的设计与构想是一个更好的机制来存储客户端的网络数据.它是通过一个网络浏览器作为客户端数据库实现的,它允许网页以键值对的形式来存储数据. 它具有以下特征: 每个原始网站/域最多可存储 5MB 的数据. 你可以通过属性和方法来使用 JavaScript 操作 web 存储器中的数据实现访问. 就像 cookies,你可以选择将保持数据(维持),即使你已

HTML5新特性,老生常谈——前端面试常见问题

找工作面试的时候有公司技术人员会问html5新特性,那这里就再复习一遍 1.新的文档类型 <!DOCTYPE html> 2.脚本和链接无需type <link href="css/bootstrap.css" rel="stylesheet"> <script src="js/Angular.js"></script> 3.语义化的Header 和Footer 这里通俗说下什么叫做语义化,就是:明

HTML笔记(2)——HTML5新属性

HTML5 DAY01: 基本内容 HTML5目前最新的规范(标准)是2014年10月推出 2005年左右出现HTML5版本(非标准) W3C组织(两个组织定义H5规范) 学习(研究)HTML5是学习未来(将来主流) HTML版本 - 第一阶段主要学习还是4版本(包含5版本) <header><nav> HTML5版本之后,声明不再出现版本信息 有意地版本,以后可能不再会有新版本 HTML5的规范内容实时更新 注意 HTML5永远都不可能离开javascript. HTML5在移动

HTML5新特性汇总

1. 新的选择器 通过 class 定位元素 (DOM API) var el = document.getElementById('section1'); el.focus(); var els = document.getElementsByTagName('div'); els[0].focus(); var els = document.getElementsByClassName('section'); els[0].focus(); 通过类似 css 选择器的语法定位元素 (Sele