简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器.这使得在编写原生JavaScript代码时方便了许多. 用法 两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法. element = document.querySelector('selectors'); elementList = document.q…
基本用法 querySelector 该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素. ----> querySelector得到一个DOM var element = document.querySelector('#container');//返回id为container的dom var element = document.querySelector('div#container');//返回id为contai…
支持的浏览IE8+,Firefox3.5+,Safari3.1+ Chrome和Opera 10+ 1.querySelector()方法接收一个选择符,返回第一个匹配的第一个元素,如果没有返回null eg:var body = document.querySelector('body'); var myDiv = document.querySelector('#myDiv'); var selected = document.querySelector('.selected'); var…
一.HTML5新选择器 1.document.querySelector("selector");selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回null;支持: Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+2.document.querySelectorAll("selector");selector:根据CSS选择器返回所有匹配到的元素数组,如果没有匹配到,则…
JQuery选择器 JQuery选择器规则, 借用了css1-3的规则(css选择器规则), 因为css本身也需要一套规则来索引DOM元素, 进而进行样式渲染,例如div.blue 表示目标DOM为 class属性值为blue的div元素. 同时JQuery添加了一些自己的规则, 例如按照查询连接元素 $("[href]"). 这样就衍生出, 一套元字符, 用于表达选择器 合法格式, 故对于 其他部分例如属性值在选择器中的情况, 例如查询href为 www.baidu.com的 链接,…
在HTML5出现之前使用JavaScript查找DOM元素,有以下三种原生的方法: getElementById:根据指定元素的id属性返回元素 getElementsByName:返回所有指定name属性的元素 getElementsByTagName:返回所有指定标签的元素 HTML5新增的选择器,方法有两种: querySelector:根据选择器规则返回第一个符合要求的元素 querySelectorAll:根据选择器规则返回所有符合要求的元素 支持新的HTML5 JavaScript选…
在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对象:documentElement是Document对象的属性,返回的是文档根节点 对于HTML文档来说,documentElement是<html>标签对应的Element对象,ownerDocument是document对象. 接下开始正题. 3.几个jQuery选择器源码中遇到的几个函数 a…
Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的 querySelector 功能:该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素,如例: <div> <div> <div> <p>第三层</p> </div> <p>第二层</p> </div>…
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>使用HTML5的JS选择器操作页面中的元素</title> 6 </head> 7 <body> 8     &…
jQuery选择器 jQuery的核心思想就是:选取元素,对其操作. jquery选择器对开发有以下优势:写法简洁,不需要考虑主流浏览器是否支持某些选择器(jquery支持css1-css3),不需要考虑浏览器报错(jquery有完善的错误处理机制). 很多时候写jQuery代码的关键就是怎样设计合适的选择器选中需要的元素. jQuery选择器主要有三大类,即css基本选择器,css位置选择器和过滤选择器. 一.CSS基本选择器 1.最基本的选择器 jQuery的css选择器借鉴了css选择器的…