javascript - 在现代JavaScript应用程序中使用DOM Level 0的最佳实践

Question

是否有在现代JavaScript应用程序中使用DOM Level 0 collections的一套商定的“最佳实践”？ (document.forms，document.images等)

在使用jQuery的应用程序中，我注意到有一种趋势，例如，使用$(...).html()而不是 element.options[] 来更改下拉列表的内容以切换底层节点。是因为最好避免使用DOM 0集合，还是因为jQuery使更改基础DOM结构变得容易得多？

编辑:我想问题的一部分包括旧功能是否是可靠的跨浏览器。我记得以前，IE会自动将<tbody>标记添加到您的表中，而firefox不会。这使得在浏览dom树时跨浏览器很痛苦。同样，element.options[]具有problems when changing the options in the collection。这些家伙是可靠的跨浏览器吗？

Answer 1

首先，很好的问题。

DOM Level 0-1功能是我最喜欢使用的工具箱。支持是巨大的。我将在下面重点介绍DOM Level 0的每个子集的优缺点:

DOM 0级事件

由于这些是作为ElementNode的属性添加的，因此只能有一个处理程序。在某些情况下(例如:事件委托(delegate))，这很麻烦。但是，我认为DOM足够多样化(尤其是随着您的项目变得越来越大)，足以为DOM级别0处理程序提供足够的空间。如果没有库/框架来平滑旧版浏览器，则DOM Level 2侦听器很难实现。即使是Flash开发人员(到处都使用侦听器)，DOM 0事件对我来说也要容易得多。亮点之一是为您设置了this值的事实(没有像其他模型一样IE骇客和咳嗽)。例如，考虑以下标记:
<div id="foo">Cick Me!</div>
现在，所有要做的就是选择和附加DOM Level 0处理程序。

var foo = document.getElementById("foo");
function bar()
{
    console.log(this); //<div id="foo">
}
foo.onclick = bar;

这是选择元素的一种非常简单的方法，是 Event.currentTarget的替代方法；

这里有关于DOM级别0事件与DOM级别2事件的精彩讨论:[ link]

DOM级别0 HTMLCollections

没错，HTMLCollections是我最喜欢的DOM功能。由于为您选择了节点，因此无需运行查询。我认为，它们是当今最被忽视的DOM功能。名称遍历，例如: collection["name"]非常方便，在遍历表单时肯定会有所帮助。例如，考虑以下标记:

<form action="./" id="foo" name="foo" method="post" onsubmit="return false;">
    <fieldset>
        <legend>Dummy Form</legend>
        <input type="text" name="bar">
        <select name="baz">
            <option selected value="1">1</option>
        </select>
    </fieldset>
</form>

有许多DOM级别0的方法可以解决此问题。

var foo = document.forms.foo; //<form id="foo" onsubmit="return false;" method="post" name="foo" action="./">
演示:http://jsbin.com/udozoz/0edit#preview

var foo = document.forms[0]; //<form id="foo" onsubmit="return false;" method="post" name="foo" action="./">
演示:http://jsbin.com/udozoz/2/edit#preview

var foo = document.getElementById("foo"); //<form id="foo" onsubmit="return false;" method="post" name="foo" action="./">
演示:http://jsbin.com/udozoz/3/edit#preview

当然，方法3是更优选的。它是DOM级别1，而不是DOM级别0。但是，名称遍历自然适合 HTMLFormElement.elements HTMLCollection。由于您应该在表单元素上使用 name属性，因此无需 id属性就可以轻松访问它们。

例如: var baz = foo.elements.baz;
当使用具有相同名称的单选按钮(一次只能选择一个)时，可以使用 HTMLFormElement.elements HTMLCollection选择所有单选按钮。那是非常强大的。考虑以下标记:

<form action="./" id="foo" name="foo" method="post" onsubmit="return false;">
    <fieldset>
        <legend>Radio Buttons</legend>
        <label for="select_1">1</label>
        <input id="select_1" type="radio" name="selectable" value="a">
        <label for="select_2">2</label>
        <input id="select_2" type="radio" name="selectable" value="b">
        <label for="select_3">3</label>
        <input id="select_3" type="radio" name="selectable" value="c">
    </fieldset>
</form>

您可以使用以下简单代码，并使每个单选按钮的 name属性值为“selectable”:

var foo = document.forms.foo;
var selectables = foo.elements.selectable;
console.log(selectables); //[input#select_1 a, input#select_2 b, input#select_3 c]

演示:http://jsbin.com/upiyom/edit#preview

var foo = document.forms.foo;
var selectables = foo.selectable;
console.log(selectables); //[input#select_1 a, input#select_2 b, input#select_3 c]

演示:http://jsbin.com/upiyom/2/edit#preview

使用选项2，您可以完全绕过 elements HTMLCollection。尽管肯定不如选项1清晰，但今天仍在使用。

自从引入DOM Level 0以来，HTMLCollections变得越来越多，种类也越来越多。例如，看一下可用于表的HTMLCollections。太惊人了有 HTMLTableElement.rows， HTMLTableElement.tBodies， HTMLTableSectionElement (thead, tbody, tfoot).rows和 HTMLTableRowElement.cells。这些集合功能非常强大，并且使表的DOM遍历更加简单(允许您使用它们)。

DOM级别0属性

尽管ElementNodes的属性在DOM Level 0中并没有像现在这样多样化，但仍然需要注意一些要点:

HTMLInputElement.defaultChecked
defaultChecked使您可以完全绕过 HTMLInputElement的 checked属性进行搜索，因为它基于该属性的值存储一个 bool 值。这意味着对于与get/set/removeAttribute相关的IE构建，您不必费心草率地解决。稍后，还将添加 defaultValue属性来满足类似的需求。

document.lastModified [非标准]
lastModified将存储最后一次更改文档的时间。这是一个很酷的小功能，用途有限。

HTMLDocument.title
title将为您锁定文档的标题。它的用法充其量只是个小众。

关于 tbody问题，如果您不推广适当的DOM结构，今天的浏览器确实会添加一个 HTMLTableSectionElement(tbody)。您应该了解正确的表标记，这样以后就不会有问题了。

标记示例:

错误的:

<table>
    <!-- tbody will be inserted here and will wrap the tr -->
    <tr>
        <td>Hello, World!</tr>
    </tr>
</table>

正确的:

<table>
    <tbody>
        <tr>
            <td>Hello, World!</td>
        </tr>
    </tbody>
</table>

演示: http://jsbin.com/exomub/edit#preview

概括

需要了解的主要一点是，DOM Level 0的大多数已在DOM Level 1和DOM 2中标准化。这意味着浏览器支持广泛(因为它确实很旧)。除了使用较旧的浏览器版本的一些极端情况外，使用它应该不会太担心。归根结底，这是您的选择。

我想补充一点，过去我只是非常简短地用于使用HTML/JavaScript进行开发。我这样做是出于业余爱好，因此我不敢透露有关浏览器/项目出错的“恐怖故事”。

我希望这可以解决一些问题。

-马特

ElementNode -具有 nodeType == 1的节点

HTMLCollection -浏览器收集的类似于实时数组的NodeList