JavaScript高程第三版笔记-DOM扩展

缺乏、安全感 2023-08-17 15:42 122阅读 0赞

在那个刀耕火种的年代,用过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";
    }

转载于:https://www.cnblogs.com/eco-just/p/11358576.html