Ответ 1
Прежде всего, большой вопрос.
Функциональность DOM Level 0-1 - это мой любимый инструментарий для работы. Поддержка огромна. Я расскажу о плюсах и минусах для каждого подмножества DOM Level 0 ниже:
События уровня DOM
Так как они добавлены как свойства ElementNode, вы можете иметь только один обработчик. В некоторых случаях (например, делегирование событий) это обременительно. Тем не менее, я чувствую, что 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 Level 0 и DOM Level 2: [ссылка]
DOM Уровень 0 HTMLCollections
Bar none, 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 Level 0 для решения этой проблемы.
-
var foo = document.forms.foo; //<form id="foo" onsubmit="return false;" method="post" name="foo" action="./"> -
var foo = document.forms[0]; //<form id="foo" onsubmit="return false;" method="post" name="foo" action="./"> -
var foo = document.getElementById("foo"); //<form id="foo" onsubmit="return false;" method="post" name="foo" action="./">
Конечно, метод 3 является более предпочтительным. Это DOM Level 1, а не DOM Level 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] -
var foo = document.forms.foo; var selectables = foo.selectable; console.log(selectables); //[input#select_1 a, input#select_2 b, input#select_3 c]
Вариант 2 позволяет полностью обойти elements HTMLCollection. Хотя это не так ясно, как вариант 1, он все еще используется сегодня.
HTMLCollections стали более густонаселенными и намного более разнообразными с момента введения DOM Level 0. Например, взгляните на HTMLCollections, доступные для таблицы. Это ошеломляет. Там HTMLTableElement.rows, HTMLTableElement.tBodies, HTMLTableSectionElement (thead, tbody, tfoot).rows > и HTMLTableRowElement.cells. Эти коллекции очень мощные и сделали DOM обход намного проще с таблицами (позволяя вам их использовать).
Свойства уровня DOM уровня
Пока свойства на элементах ElementNodes были не такими разнообразными в DOM Level 0, как сейчас, есть еще несколько драгоценных камней, которые нужно отметить:
HTMLInputElement.defaultChecked
defaultChecked позволяет обойти поиск через HTMLInputElement checked атрибут полностью, потому что он сохраняет логическое значение на основе этого значения атрибута. Это означает, что вам не нужно клонировать через неряшливые решения для сборки IE, связанные с get/set/removeAttribute. Позже свойство defaultValue также будет добавлено для заполнения аналогичной потребности.
document.lastModified [нестандартный]
lastModified будет сохранять последний раз, когда документ был изменен. Это классная небольшая функция, которая имеет ограниченное использование.
title задержит заголовок документа для вас. Его использование в лучшем случае - небольшая ниша.
В отношении вашего вопроса tbody браузеры сегодня добавляют HTMLTableSectionElement (tbody), если вы не продвинете надлежащую структуру DOM. Вы должны знать правильную разметку таблиц, поэтому это не будет проблемой в будущем:).
Пример разметки:
Неверно:
<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 1 и 2. Это означает, что поддержка браузера обширна (поскольку она действительно старая). Не должно быть слишком много опасений использовать его - помимо некоторых случаев кросс-кода в старых сборках браузера. В конце концов, это ваш выбор.
Я хотел бы добавить, что я только очень кратко - в прошлом - работал с HTML/JavaScript. Я делаю это как хобби, поэтому я не причастен к "страшным историям" о том, что браузеры/проекты пошли не так.
Надеюсь, это прояснило некоторые вещи.
Матф
ElementNode - Node с nodeType == 1
HTMLCollection. Живой массив NodeList, собранный браузером