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

2023-12-25

是否有一套商定的“最佳实践”来使用DOM 0 级集合 http://www.quirksmode.org/js/dom0.html在现代 JavaScript 应用程序中？（document.forms, document.images, etc.)

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

Edit:我想问题的一部分包括旧功能是否可靠的跨浏览器。我记得，从前，IE会添加<tbody>标签会自动添加到您的表格中，而 Firefox 则不会。这使得跨浏览器遍历 dom 树变得很痛苦。相似地，element.options[] had 更改集合中的选项时出现问题 http://www.quirksmode.org/dom/w3c_html.html#t20。这些家伙跨浏览器可靠吗？

首先，很好的问题。

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

DOM 0 级事件

由于这些是作为属性添加的元素节点，您只能有一个处理程序。对于某些情况（例如：事件委托），这是很麻烦的。然而，我认为 DOM 足够多样化（尤其是当您的项目变得更大时），为 DOM 0 级处理程序提供了足够的空间。如果没有库/框架来平滑旧版浏览器，那么 DOM Level 2 监听器的实现会很痛苦。即使作为 Flash 开发人员（监听器无处不在），DOM 0 事件对我来说也容易得多。亮点之一是this值已为您设置（没有像其他模型那样的 IE 黑客攻击和咳嗽）。例如，考虑以下标记：

<div id="foo">Cick Me!</div>

现在，需要做的就是选择并附加 DOM 0 级处理程序。

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

这是选择元素的一种非常简单的方法，也是事件.currentTarget http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-interface-h2;

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

DOM 级别 0 HTML 集合

没有一个，HTML集合是我最喜欢的 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 Level 0 方法可以解决这个问题。

var foo = document.forms.foo; //<form id="foo" onsubmit="return false;" method="post" name="foo" action="./">

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

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

Demo: http://jsbin.com/udozoz/3/edit#preview http://jsbin.com/udozoz/3/edit#preview

当然，方法3是更优选的。它是 DOM Level 1，而不是 DOM Level 0。但是，名称遍历自然适合HTMLFormElement.elements http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479 HTML集合。既然你应该使用name表单元素上的属性，您可以轻松访问它们，而无需id属性。

Ex: var baz = foo.elements.baz;

当使用共享相同名称的单选按钮时（一次只能选择一个），您可以使用HTMLFormElement.elements http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479 HTML集合选择所有单选按钮。那是非常强大的。考虑这个标记：

<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“可选择”的属性值：

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]

Demo: http://jsbin.com/upiyom/edit#preview 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]

Demo: http://jsbin.com/upiyom/2/edit#preview http://jsbin.com/upiyom/2/edit#preview

选项 2 使您能够绕过elements HTML集合完全地。虽然肯定不像选项 1 那样清晰，但它至今仍在使用。

HTML集合自从引入 DOM Level 0 以来，它的数量变得越来越多，也更加多样化。例如，看一下HTML集合可供一张桌子。真是令人震惊。有HTMLTableElement.rows http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6156016, HTMLTableElement.tBodies http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-63206416, HTMLTableSectionElement (thead, tbody, tfoot).rows http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52092650, and HTMLTableRowElement.cells http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67349879。这些集合非常强大，并且使表的 DOM 遍历变得更加简单（允许您使用它们）。

DOM 0 级属性

虽然属性上元素节点DOM Level 0 中的多样性并不像现在这样，但仍有一些要点需要注意：

HTMLInputElement.defaultChecked http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20509171

defaultChecked使您能够绕过搜索HTML输入元素 http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025's checked属性完全是因为它存储基于该属性值的布尔值。这意味着您不必为与 get/set/removeAttribute 相关的 IE 构建提供草率的解决方案。后来，defaultValue还将添加财产来满足类似的需求。

文档.lastModified https://developer.mozilla.org/en/DOM/document.lastModified【非标】

lastModified将存储上次更改文档的时间。这是一个很酷的小功能，但用途有限。

HTML文档.标题 http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-18446827

title将为您获取文档的标题。它的使用充其量只是一个小众市场。

关于您的tbody问题，今天的浏览器确实添加了一个HTMLTableSectionElement http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67417573(tbody) 如果你不提倡正确的 DOM 结构。您应该了解正确的表标记，这样将来就不会成为问题了:)。

标记示例：

Wrong:

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

Right:

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

Demo: http://jsbin.com/exomub/edit#preview http://jsbin.com/exomub/edit#preview

Summary

需要强调的要点是，大多数 DOM Level 0 已在 DOM Level 1 和 2 中标准化。这意味着浏览器支持非常广泛（因为它确实很旧）。除了旧版浏览器版本中的一些边缘情况之外，使用它不应该有太多顾虑。归根结底，这是您的选择。

我想补充一点，过去我只是非常短暂地受雇使用 HTML/JavaScript 进行开发。我这样做是出于爱好，所以我不知道有关浏览器/项目出错的“恐怖故事”。

我希望这能澄清一些事情。

-Matt

元素节点- 节点与nodeType == 1

HTML集合- 浏览器收集的实时类似数组的 NodeList

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)