Почему «document.title», а НЕ «document.head.title»? RE: Пересекая DOM

Question

Я только начинаю изучать клиентский JavaScript и использую онлайн-учебник, поэтому, пожалуйста, потерпите меня.

Этот вопрос основан на моем понимании следующего:

Для доступа к свойствам тела документа используется синтаксис «document.body», который возвращает все элементы в теле.

Аналогично, когда вы получаете доступ к заголовку, вы используете «document.head». Имеет смысл и самое главное, это работает.

Однако, когда я пытаюсь получить доступ к элементам в теле или голове, следуя той же логике, я получаю возвращаемое значение "undefined". Например, document.body.h1 возвращает "undefined", несмотря на то, что внутри элемента body находится элемент h1.

Далее, когда я вхожу в document.head.title - "undefined".

Странно, однако, когда я ввожу «document.title», он возвращает строковое значение, связанное с тегом title.

Я думал, что для доступа к заголовку вам нужно будет получить к нему доступ через заголовок, поскольку он является элементом, вложенным в заголовок. Но хорошо, это нормально. Используя ту же логику, я смогу затем ввести document.h1 и получить его значение. Нет, вместо этого я получаю неопределенный.

Будет ли кто-нибудь достаточно любезен, чтобы объяснить мне, почему это поведение настолько противоречиво. Заранее спасибо.

Answer 1

Вы действительно задали два вопроса:

1. Почему document.title, а не document.head.title?

и

2. Почему document.body.h1 не возвращает элемент, если в body?

document.title

document.title является историческим. Различные части среды браузера были разработаны в разное время несколькими разными людьми / организациями в 1990-х годах. :-) Тем не менее, это название документа, так что это не лишнее место для его размещения, даже если вы используете тег title в head.

document.body.h1

Один ответ: потому что никто не решил разработать его таким образом. Там было некоторых ранних вещей, таких как document.all (список всех элементов в документе) и даже специфичных для тегов (я точно забыл, какими они были, но они не были в миллионе миль от вашего document.body.h1 - я думаю document.tags.h1 или что-то еще, где снова это был список.)

Но другой ответ: потому что DOM - это дерево. body может иметь несколько h1 элементов, как прямых, так и дочерних (или более глубоких); в совокупности потомков . Создание автоматических списков со всеми этими данными оказалось не масштабируемым для больших документов.

Вместо этого вы можете запросить DOM (либо весь документ, либо только содержимое определенного элемента) различными способами:

• getElementById - (Только на document) Получить элемент, используя его значение атрибута id.
• querySelector - Найти первый элемент, соответствующий селектору CSS (можно использовать его на document или на элементе). Возвращает null, если совпадений не было.
• querySelectorAll - Получить список всех элементов, соответствующих селектору CSS (можно использовать его на document или на элементе). Вы можете рассчитывать на получение списка; его length может быть 0, конечно.
• getElementsByTagName - Получить список всех элементов с заданным именем тега (например, "h1").
• getElementsByClassName - (Нет поддержки в IE8 и более ранних версиях) Получить список всех элементов с данным классом.

Есть еще много. См. веб-документацию MDN и / или Стандарт WHAT-WG DOM для получения дополнительной информации.

Некоторые из автоматических списков сохраняются (они стали настолько полезными, что их нужно было поддерживать / хранить), например document.forms, document.links, rows свойство HTMLTableElement и HTMLTableSectionElement, cells свойство HTMLTableRowElement экземпляры и различные другие.