JavaScript高程第三版笔记-DOM扩展
在那个刀耕火种的年代,用过jQuery的都体会到了jQuery带来的便捷,尤其是元素选择器.
jQuery(www.jquery.com)的核心就是通过 CSS 选择符查询 DOM 文档取得元素的引用,从而抛开了getElementById()和 getElementsByTagName()。
08年之前,针对dom操作,为了实现更多的功能,各大浏览器厂商会有一些专有的DOM扩展,此后W3C着手将一些已经成为事实标准的专有扩展标准化并写到规范中去.
其中包括两个主要的扩展:SlectorsAPI和HTML5.
一、SlectorsAPI
querySelector()方法接收一个 CSS 选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回 null;
//取得 body 元素 var body = document.querySelector("body"); //取得 ID 为"myDiv"的元素 var myDiv = document.querySelector("#myDiv"); //取得类为"selected"的第一个元素 var selected = document.querySelector(".selected"); //取得类为"button"的第一个图像元素 var img = document.body.querySelector("img.button");
querySelectorAll()方法接收的参数与 querySelector()方法一样,都是一个 CSS 选择符,但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList 的实例。
//取得某<div>中的所有<em>元素(类似于 getElementsByTagName("em")) var ems = document.getElementById("myDiv").querySelectorAll("em"); //取得类为"selected"的所有元素 var selecteds = document.querySelectorAll(".selected"); //取得所有<p>元素中的所有<strong>元素 var strongs = document.querySelectorAll("p strong");
var i, len, strong; for (i=0, len=strongs.length; i < len; i++){ strong = strongs[i]; //或者 strongs.item(i) strong.className = "important"; }
(我不怕千万人阻挡,只怕自己投降!)