JavaScript - Объект Document

Здравствуйте, начинающие программисты! Сегодня мы окунемся в fascinierende мир JavaScript Объекта Document. Не волнуйтесь, если вы новички в программировании - я буду вести вас по этому пути шаг за шагом, как я делал для countless студентов за годы teaching. Давайте отправимся в это приключение вместе!

JavaScript - Document Object

Окно Объект Document

Когда вы работаете с JavaScript в веб-браузере, одной из самых важных вещей, с которыми вы будете взаимодействовать, является Объект Document. Но прежде чем мы перейдем к этому, давайте поймем его родителя: Окно объект.

Представьте себе ваш веб-браузер как дом. Окно объект представляет собой весь дом, в то время как Объект Document похож на main жилое пространство, где происходит大部分 действий. Все, что вы видите в окне вашего браузера, является частью Окно объекта, а содержимое веб-страницы specifically является частью Объект Document.

Вот простой пример для проиллюстрировать это:

console.log(window.document === document); // Вывод: true

Это показывает, что document на самом деле является свойством window объекта, но мы можем получить доступ к нему напрямую как document для удобства.

Свойства JavaScript Объекта Document

Теперь, когда мы понимаем, где Объект Document fitting в, давайте рассмотрим некоторые из его свойств. Эти свойства позволяют нам получить доступ и манипулировать различными частями нашей веб-страницы.

1. document.title

Это свойство позволяет вам получить или установить заголовок вашей веб-страницы - вы знаете, текст, который появляется в вкладке браузера.

console.log(document.title); // Выводит текущий заголовок страницы
document.title = "Моя классная страница"; // Изменяет заголовок страницы

2. document.body

Это дает вам доступ к <body> элементу вашего HTML-документа.

document.body.style.backgroundColor = "lightblue";

Эта строка изменит цвет фона вашей всей страницы на светло-синий. Pretty cool, right?

3. document.URL

Это только для чтения свойство дает вам полный URL текущей страницы.

console.log(document.URL); // Выводит что-то вроде "https://www.example.com/page.html"

Методы JavaScript Объекта Document

Методы resemble superpowers нашего Объекта Document. Они позволяют нам делать всевозможные интересные вещи с нашей веб-страницей.

1. document.getElementById()

Это, вероятно, метод, который вы будете использовать чаще всего. Он позволяет вам схватить элемент из вашего HTML, используя его ID.

let myElement = document.getElementById("mySpecialDiv");
myElement.innerHTML = "Привет, я был изменен JavaScript!";

В этом примере мы находим элемент с ID "mySpecialDiv" и изменяем его содержимое.

2. document.createElement()

Этот метод позволяет вам создавать новые HTML-элементы с нуля!

let newParagraph = document.createElement("p");
newParagraph.textContent = "Я новый абзац, приятно познакомиться!";
document.body.appendChild(newParagraph);

Здесь мы создаем новый элемент абзаца, устанавливаем его текст и добавляем его в конец тела нашего документа.

3. document.querySelector()

Этот мощный метод позволяет вам выбирать элементы с использованием CSS-селекторов.

let firstButton = document.querySelector("button");
firstButton.style.color = "red";

Это найдет первую кнопку на вашей странице и сделает ее текст красным.

Список свойств Объекта Document

Давайте подытожим некоторые ключевые свойства Объекта Document в удобной таблице:

Свойство	Описание
document.title	Заголовок текущего документа
document.body	Элемент `<body>`
document.head	Элемент `<head>`
document.URL	Полный URL документа
document.domain	Имя домена сервера документа
document.lastModified	Дата, когда документ был最后一次 изменен

Список методов Объекта Document

А здесь таблица некоторых важных методов Объекта Document:

Метод	Описание
document.getElementById()	Возвращает элемент с指定的 ID
document.getElementsByClassName()	Возвращает коллекцию элементов с指定的 классом
document.getElementsByTagName()	Возвращает коллекцию элементов с指定的 тегом
document.querySelector()	Возвращает первый элемент, соответствующий CSS-селектору
document.querySelectorAll()	Возвращает все элементы, соответствующие CSS-селектору
document.createElement()	Создает новый HTML-элемент
document.write()	Записывает HTML-выражения или JavaScript-код в документ

Запомните, учиться манипулировать Объектом Document resemble учиться быть магом в мире веб-разработки. С этими инструментами вы можете оживить свои веб-страницы и сделать их реагировать на действия пользователей в amazing ways.

Пока мы заканчиваем этот урок, я вспоминаю одного из своих студентов, который сначала был напуган всеми этими свойствами и методами. Но с практикой она стала так профилирована, что могла манипулировать веб-страницами во сне! (Ну, почти.) Ключевая вещь - экспериментировать и получать удовольствие от этого.

Так что, мои дорогие студенты, не бойтесь играть с этими концепциями. Попробуйте изменить заголовок этой страницы или создать новый элемент и добавить его в тело. Чем больше вы практикуетесь, тем естественнее это станет. Before you know it, вы будете создавать интерактивные веб-опыты как профи!

Счастливого кодирования, и помните - в мире программирования,好奇心 - ваше главное богатство. Continue exploring, continue questioning, и, самое главное, продолжайте программировать!

Credits: Image by storyset

Предыдущий учебник:

JavaScript - Окно Объект

Следующий учебник:

JavaScript - Объект экрана