Объект document в JavaScript. Методы и свойства объекта document. Часть 3

Дата публикации: 2016-11-25

Объект document в JavaScript. Методы и свойства объекта document

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомство с объектом document в JavaScript, а также с его методами и свойствами, позволяющими выбирать элементы верстки в документе и манипулировать выбранными элементами.

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

Первое полезное свойство, которое вы можете использовать часто на практике — свойство innerHTML. innerHTML позволяет получить содержимое элемента или же перезаписать его. Чтобы было понятнее, приведем пример. Так мы получим содержимое заголовка H1:

<div class="container" id="container1">
    <div class="row" id="row">
        <div class="col-md-12" id="col">
            <h1 id="h1">Hello, world!</h1>
            <p class="yellow">Yellow 1</p>
            <p class="grey">Grey</p>
            <p class="yellow">Yellow 2</p>
        </div>
    </div>
</div>

<h1 id="h1">Hello, world!</h1>

<p class="yellow">Yellow 1</p>

<p class="yellow">Yellow 2</p>

</div>

var elem = document.getElementById('h1');
var content = elem.innerHTML;
console.log(content);

var elem = document.getElementById('h1');

var content = elem.innerHTML;

console.log(content);

Объект document в JavaScript. Методы и свойства объекта document

Или получим содержимое всего блока:

var elem = document.getElementById('container1');
var content = elem.innerHTML;
console.log(content);

var elem = document.getElementById('container1');

var content = elem.innerHTML;

console.log(content);

Объект document в JavaScript. Методы и свойства объекта document

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

var elem = document.getElementById('container1');
var content = elem.innerHTML = '<h1>Новый заголовок</h1>\n<p>Новая строка</p>';
console.log(content);

var elem = document.getElementById('container1');

var content = elem.innerHTML = '<h1>Новый заголовок</h1>\n<p>Новая строка</p>';

console.log(content);

Объект document в JavaScript. Методы и свойства объекта document

Как видим, мы полностью переписали содержимое блока, добавив с помощью свойства innerHTML новый заголовок и параграф.

Давайте познакомимся с еще одним свойством — textContent. Если innerHTML получает все содержимое элемента, включая теги и контент, то свойство textContent позволяет получить лишь контент, без тегов. Проверим:

var elem = document.getElementById('container1');
var content = elem.textContent;
console.log(content);

var elem = document.getElementById('container1');

var content = elem.textContent;

console.log(content);

Объект document в JavaScript. Методы и свойства объекта document

Как и ожидалось, все теги были вырезаны и мы получили чистый контент блока. Ну и, само собой, мы можем перезаписать текст элемента, присвоив свойству textContent элемента новое значение:

var elem = document.getElementById('h1');
var content = elem.textContent = 'Новый заголовок';
console.log(content);

var elem = document.getElementById('h1');

var content = elem.textContent = 'Новый заголовок';

console.log(content);

Объект document в JavaScript. Методы и свойства объекта document

На этом у меня сегодня все. Если вы хотите больше узнать о JavaScript, тогда рекомендую обратить свое внимание на уроки по JavaScript и отдельный курс по языку JavaScript. Удачи!

Метки: JavaScript