65.9K
CodeProject 正在变化。 阅读更多。
Home

HTML5 – 选择器 API Level 1

Gil Fink
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2011年7月22日

CPOL

3分钟阅读

viewsIcon

12040

HTML5 – 选择器 API Level 1

最近，我一直在处理HTML5。我共同编写了一个为期三天的关于该主题的课程，这是为我工作的公司Sela编写的。HTML5 – Selectors API Level 1在创建课程的过程中，我了解到很多关于HTML5的知识，以及对新规范的期望，所以期待在不久的将来发布更多关于这个主题的文章。在本文中，我将描述什么是JavaScript Selectors API Level 1，并将其与jQuery进行比较。

Selectors API（选择器 API）

Selectors API使Web开发人员能够选择DOM元素并检索与一组选择器匹配的DOM节点。 这种方法简化了元素的选择，并使其直接集成到浏览器中。 API描述了两种新的、强大的方法，可以进行选择

  • querySelector – 选择给定选择表达式的第一个匹配项，并返回一个DOM元素
  • querySelectorAll – 选择给定选择表达式的所有匹配项，并返回DOM元素数组

选择表达式是一个CSS3选择器组，可以用逗号分隔（这意味着在所选元素之间进行逻辑或运算）。

有关Selectors API的更多信息，请访问规范。

使用Selectors API选择元素

现在我们已经熟悉了规范，让我们深入研究一个例子。 在本例中，我将使用以下HTML片段

<!DOCTYPE html>
<html>
<head>
    <title>Selectors Example</title>
    <style type="text/css">
        .red
        {
            color: Red;
        }
        .blue
        {
            color: Blue;
        }
    </style>
</head>
<body>
    <ul id="ulOfItems">
        <li>item 1</li>
        <li class="red">item 2</li>
        <li id="item3">item 3</li>
        <li class="red">item 4</li>
        <li>item 5</li>
    </ul>
</body>
</html>

当我想使用Selectors API来获取带有红色类的第一个列表项时，我会编写以下代码行

var elm = document.querySelector("ul li.red");

如果我想获取带有红色类的所有列表项，我会编写以下代码行

var elements = document.querySelectorAll("ul li.red");

这是一个完整的示例，其中包含两种方法，用于选择单个或多个列表项，然后在单击按钮时更改其类名

<!DOCTYPE html>
<html>

<head>
    <title>Selectors Example</title>

    <style type="text/css">
        .red

        {
            color: Red;

        }
        .blue

        {
            color: Blue;

        }
    </style>    

</head>
<body>

    <ul id="ulOfItems">
        <li>item 1</li>

        <li class="red">item 2</li>
        <li id="item3">item 3</li>

        <li class="red">item 4</li>
        <li>item 5</li>

    </ul>
    <input type="button" name="btnFirstElm" 
        value="Change First Element Class Name" 
        onclick="changeClassNameToBlueToFirstLI()"/>

    <input type="button" name="btnAllElm" 
        value="Change All Elements Class Name" onclick="changeClassNameToBlueToAllLI()"/>
    <script type="text/javascript">

        function changeClassNameToBlueToFirstLI() {
            var elm = document.querySelector("ul li.red");

            elm.className = "blue";
        }
 
        function changeClassNameToBlueToAllLI() {

            var elements = document.querySelectorAll("ul li.red");
            for (var i = 0; i < elements.length; i++) {

                elements[i].className = "blue";
            }
        }        
    </script>

</body>
</html>

将Selectors API与jQuery选择器进行比较

当我第一次听说Selectors API时，你可能会听到我咧嘴一笑。 jQuery和其他JavaScript库多年来一直在做同样的事情。 在这种情况下，外部库与浏览器中的原生支持之间的唯一区别是，您需要在需要它们的每个页面中下载外部库。 这可以通过使用CDN或客户端缓存来最小化，以获得更好的性能。 那么原生浏览器支持有什么作用呢？它赋予这些库使用和实现更好的选择实施的能力。 如果您打开jQuery 1.6.2（最新版本）并搜索单词querySelector，您会看到jQuery首先通过应用功能检测来定位新的选择函数。 因此，在幕后，jQuery将使用原生选择支持（如果浏览器可用），这很完美。 那么您将如何重构之前的示例以使用jQuery？

这是一个建议的实现

<!DOCTYPE html>
<html>

<head>
    <title>Selectors Example</title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>
    <style type="text/css">

        .red
        {

            color: Red;
        }

        .blue
        {

            color: Blue;
        }

    </style>
</head>

<body>
    <ul id="ulOfItems">

        <li>item 1</li>
        <li class="red">item 2</li>

        <li id="item3">item 3</li>
        <li class="red">item 4</li>

        <li>item 5</li>
    </ul>

    <input type="button" id="btnFirstElm" value="Change First Element Class Name" />
    <input type="button" id="btnAllElm" value="Change All Elements Class Name" />

    <script type="text/javascript">
        $(document).ready(function () {

            $('#btnFirstElm').click(function () {
                $('ul li.red').first().toggleClass('blue');

            }); 

            $('#btnAllElm').click(function () {
                $('ul li.red').each(function () {

                    $(this).toggleClass('blue');
                });

            });
        });

    </script>
</body>

</html>

即使为选择提供更好的原生浏览器支持是一件好事，但jQuery和其他JavaScript库仍然提供更多的丰富性和更多的选择选项。 由于这些外部库依赖于原生浏览器API，因此它们可能在幕后使用Selectors API，正如我所写的那样，jQuery正是这么做的。

摘要

这篇文章解释了什么是新的HTML5 Selectors API函数。 它还将新的API与jQuery中选择器的使用进行了比较。 最终，您可以使用新的API并获得对选择器的原生浏览器支持，或者您可以使用jQuery（或其他JavaScript库），如果它们可用，则在幕后使用相同的函数。 选择权在你手中。

© . All rights reserved.