ex6的选择器

前面的话

　　尽管DOM作为API已经非常完善了，但是为了实现更多的功能，DOM仍然进行了扩展，其中一个重要的扩展就是对选择器API的扩展。人们对jQuery的称赞，很多是由于jQuery方便的元素选择器。除了前面已经介绍过的getElementsByClassName()方法外，DOM拓展了querySelectorAll()、querySelector()和matchesSelector()这3种方法，通过CSS选择符查询DOM文档取得元素的引用的功能变成了原生的API，解析和树查询操作在浏览器内部通过编译后的代码来完成，极大地改善了性能。本文将详细介绍html5新增的3种selector方法

方法

querySelector()

　　querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。该方法既可用于文档document类型，也可用于元素element类型。关于CSS选择器的详细内容移步至此

　　[注意]IE7-浏览器不支持

<body style="height: 100%;">

<div class="box" id="box" style="height: 200px;">

<ul class="list" style="height:100px">

        <li class="in" style="height: 30px;">1</li>

        <li class="in" style="height: 30px;" title="test">2</li>

        <li class="in" style="height: 30px;">3</li>

    </ul>

</div>

<script>

//因为没有.null类名，所以返回null

var oNull = document.querySelector('.null');

console.log(oNull);//null

//通过<body>标签取得元素

var body = document.querySelector("body");

console.log(body.style.height);//100%

//通过id属性取得元素

var oBox = document.querySelector('#box');

console.log(oBox.style.height);//200px

//通过结合元素的类选择器取得元素

var oList = document.querySelector('ul.list');

console.log(oList.style.height);//100px

//通过类名取得元素

var oIn = document.querySelector('.in');

console.log(oIn.innerHTML);//1

//通过属性选择器取得元素

var oTest = body.querySelector('[title="test"]');

console.log(oTest.innerHTML);//2

</script>

</body>

querySelectorAll()

　　querySelectorAll()接收一个CSS选择符，返回一个类数组对象NodeList的实例。具体来说，返回的值实际上是带有所有属性和方法的NodeList，而其底层实现则类似于一组元素的快照，而非不断对文档进行搜索的动态查询。这样实现可以避免使用NodeList对象通常会引起的大多数性能问题。只要传给querySelectorAll()方法的CSS选择符有效，该方法都会返回一个NodeList对象，而不管找到多少匹配的元素

　　没有匹配元素时，返回空的类数组对象，而不是null

　　[注意]IE7-浏览器不支持

<body style="height: 100%;">

<div class="box" id="box" style="height: 200px;">

<ul class="list" style="height:100px">

        <li class="in" style="height: 30px;">1</li>

        <li class="in" style="height: 30px;" title="test">2</li>

        <li class="in" style="height: 30px;">3</li>

    </ul>

</div>

<script>

//返回[]

var oNull = document.querySelectorAll('.null');

console.log(oNull);

//取得body元素

var body = document.querySelectorAll("body")[0];

console.log(body.style.height);//100%

//取得所有class为"in"的元素

var oIn = document.querySelectorAll('.in');

for(var i = 0 ; i < oIn.length; i++){

    console.log(oIn[i].innerHTML);//1,2,3

}

//取得title属性为test的元素

var oTest = body.querySelectorAll('[title="test"]');

console.log(oTest);//[li.in]

</script>

</body>

matchesSelector()

　　matchesSelector()方法接收一个CSS选择符参数，如果调用元素与该选择符相匹配，返回true；否则返回false

<body id="test">

<script>

    //Uncaught TypeError: document.body.matchesSelector is not a function

    console.log(document.body.matchesSelector('#test'));

</script>

</body>

　　由于兼容性问题，现在各个浏览器都只支持加前缀的方法。IE9+浏览器支持msMatchesSelector()方法，firefox支持mozMatchesSelector()方法，safari和chrome支持webkitMatchesSelector()方法。所以兼容写法为:

function matchesSelector(element,selector){

    if(element.matchesSelector){

        return element.matchesSelector(selector);

    }

    if(element.msMatchesSelector){

        return element.msMatchesSelector(selector);

    }

    if(element.mozMatchesSelector){

        return element.mozMatchesSelector(selector);

    }

    if(element.webkitMatchesSelector){

        return element.webkitMatchesSelector(selector);

    }

}

<body id="test">

<script>

console.log(matchesSelector(document.body,'#test'));//true

</script>

</body>

非实时

　　与getElementById()和getElementsByTagName()方法不同，matchesSelector()和querySelectorAll()方法得到的类数组对象是非动态实时的

<div id="container">

    <div>1</div>

    <div>2</div>

</div>

<script>

var container = document.getElementById('container');

var divOne = container.querySelector('div:last-child');

var divAll = container.querySelectorAll('div');

console.log(container.children.length);//2

console.log(divOne.innerHTML);//2

console.log(divAll.length);//2

var newDiv = document.createElement('div');

newDiv.innerHTML = 3;

container.appendChild(newDiv);

console.log(container.children.length);//3

//由于querySelector不是实时的，所以其保存的仍然是原来第二个div的值

console.log(divOne.innerHTML);//2

//由于querySelectorAll不是实时的，所以仍然只保存了两个div元素

console.log(divAll.length);//2

console.log(container.querySelector('div:last-child').innerHTML);//3

console.log(container.querySelectorAll('div').length);//3

</script>

缺陷

　　selector类方法在元素上调用时，指定的选择器仍然在整个文档中进行匹配，然后过滤出结果集，以便它只包含指定元素的后代元素。这看起来是违反常规的，因为它意味着选择器字符串能包含元素的祖先而不仅仅是所匹配的元素

<div id="container">

    <div>1</div>

    <div>2</div>

</div>

<script>

var container = document.getElementById('container');

console.log(container.querySelectorAll('div div'));//[div div]

</script>

　　按照正常理解，控制台应该返回空的类数组对象，因为id为container的div元素的子元素中，不存在div元素嵌套的情况

　　但是，该方法实际返回[div div]。这是因为参数中的选择器包含了元素的祖先

　　所以，如果出现后代选择器，为了防止该问题，可以在参数中显式地添加当前元素的选择器

<div id="container">

    <div>1</div>

    <div>2</div>

</div>

<script>

var container = document.getElementById('container');

console.log(container.querySelectorAll('#container div div'));//[]

console.log(container.querySelectorAll('#container div'));//[div div]

console.log(container.querySelectorAll('div'));//[div div]

</script>

ex6的选择器的更多相关文章

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
CSS 选择器及各样式引用方式
Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...
jQuery学习之路（1）-选择器
▓▓▓▓▓▓ 大致介绍终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
jq选择器基础
Jquery $代表选择器使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...
微信小程序中利用时间选择器和js无计算实现定时器（将字符串或秒数转换成倒计时）
转载注明出处改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...

随机推荐

wifi-mac
//18:a6:f7:12:0b:8b //18:a6:f7:1e:a9:57 //18:a6:f7:1f:8e:69 //18:a6:f7:12:0b:9c //18:a6:f7:1f:cd:d4 ...
兼容ie6及一下版本的自适应
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> <meta ...
Win7 配置Apache+PHP+Mysql环境
第一.安装并配置APACHE(安装到D:\phpapache\Apache2.2) 1.安装时默认安装,Network Domain, Server Name 我填写我的计算机名,Administra ...
token生成过程
客户端登录会拿到token,然后去登录游戏服务器了解GUID 可以了解http://blog.sina.com.cn/s/blog_5c8d13830100gku3.html // obviousl ...
自然语言18.2_NLTK命名实体识别
QQ:231469242 欢迎nltk爱好者交流 http://blog.csdn.net/u010718606/article/details/50148261 NLTK中对于很多自然语言处理应用有 ...
自然语言18_Named-entity recognition
https://en.wikipedia.org/wiki/Named-entity_recognition http://book.51cto.com/art/201107/276852.htm 命 ...
Java 并发编程之volatile关键字解析
摘录 1. 计算机在执行程序时,每条指令都是在CPU中执行的,而执行指令过程中,势必涉及到数据的读取和写入.由于程序运行过程中的临时数据是存放在主存(物理内存)当中的,这时就存在一个问题,由于CPU执 ...
使用node的插件UglifyJs来合并和压缩文件
code: var fs = require('fs'); var jsp = require("./UglifyJS-master/uglify-js").parser; var ...
如何在Mac OSX 10.10上安装GDB
http://ntraft.com/installing-gdb-on-os-x-mavericks/
好看的CSS按钮
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

ex6的选择器

前面的话

方法

非实时

缺陷

ex6的选择器的更多相关文章

随机推荐

热门专题