JS властивість Element.nodeValue
Загальний опис
nodeValue є властивістю вузлів у моделі об'єктів документа (DOM), яка представляє текстовий вміст вузла. Ця властивість корисна для отримання або встановлення текстових даних у вузлах, таких як елементи, атрибути або текстові вузли. Вона широко використовується при роботі з DOM для маніпуляцій з текстовим вмістом веб-сторінок.
Для доступу до nodeValue потрібно спочатку отримати посилання на відповідний вузол DOM. Це можна зробити за допомогою різних методів, таких як document.getElementById(), document.getElementsByTagName() або document.querySelector(). Після отримання посилання на вузол можна отримати або встановити його текстовий вміст за допомогою властивості nodeValue.
Наприклад, припустимо, що ми маємо таку HTML-розмітку:
<p id="myParagraph">Це приклад тексту.</p>
Ми можемо отримати текстовий вміст елемента <p> та змінити його за допомогою nodeValue:
// Отримати посилання на елемент <p>
const paragraph = document.getElementById('myParagraph');
// Отримати текстовий вміст
console.log(paragraph.firstChild.nodeValue); // Виведе "Це приклад тексту."
// Змінити текстовий вміст
paragraph.firstChild.nodeValue = 'Новий текст';
Зверніть увагу, що ми звертаємося до firstChild елемента <p>, оскільки текстовий вміст знаходиться у текстовому вузлі, який є дочірнім вузлом елемента.
nodeValue також можна використовувати для отримання або встановлення значень атрибутів. Наприклад, якщо ми маємо таку HTML-розмітку:
<a id="myLink" href="https://example.com">Посилання</a>
Ми можемо отримати значення атрибута href та змінити його за допомогою nodeValue:
// Отримати посилання на елемент <a>
const link = document.getElementById('myLink');
// Отримати значення атрибута href
console.log(link.getAttribute('href')); // Виведе "https://example.com"
// Змінити значення атрибута href
link.setAttribute('href', 'https://newexample.com');
Крім того, nodeValue може бути використана для створення та вставки нових текстових вузлів у DOM. Наприклад:
// Створити новий текстовий вузол
const newText = document.createTextNode('Це новий текстовий вузол');
// Отримати посилання на елемент <body>
const body = document.querySelector('body');
// Вставити новий текстовий вузол у <body>
body.appendChild(newText);
Ця властивість є особливо корисною при динамічній зміні текстового вмісту веб-сторінок на основі взаємодії користувача або даних, отриманих із серверу. Вона забезпечує гнучкість і можливість маніпулювати текстовим вмістом DOM без необхідності повного оновлення сторінки.
| Порада: | Пам'ятайте, що |
| Порада: | Для досвідчених розробників: використовуйте |
| Порада: | Будьте обережні при використанні |
Синтаксис
Element.nodeValueЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми демонструємо використання властивості nodeValue для оновлення тексту на веб-сторінці. Користувач може ввести текст у поле введення, а потім натиснути кнопку "Оновити текст". Коли користувач натискає кнопку, ми створюємо новий текстовий вузол з введеним текстом за допомогою document.createTextNode(newText). Потім ми замінюємо попередній текстовий вузол у елементі <p> на новий за допомогою методу replaceChild(). Таким чином, ми використовуємо властивість nodeValue для встановлення нового текстового вмісту вузла.
Цей приклад демонструє, як можна динамічно змінювати текст на веб-сторінці за допомогою властивості nodeValue. Користувач може взаємодіяти з прикладом, вводячи новий текст та оновлюючи його на сторінці.
У цьому прикладі ми створюємо новий елемент <p> за допомогою document.createElement("p"), а потім створюємо текстовий вузол textNode за допомогою document.createTextNode("Це текстовий вузол."). Після цього ми додаємо textNode як дочірній вузол до paragraph за допомогою paragraph.appendChild(textNode). Нарешті, ми виводимо значення nodeValue для textNode у консоль, що відображає текст вузла.
const paragraph = document.createElement("p");
const textNode = document.createTextNode("Це текстовий вузол.");
paragraph.appendChild(textNode);
console.log(textNode.nodeValue); // Виведе: "Це текстовий вузол."У цьому прикладі ми створюємо новий невпорядкований список (<ul>) та масив рядків items, що представляють елементи списку. Ми використовуємо метод forEach для проходження по масиву items та створення нового елементу списку (<li>) для кожного елементу. Для кожного елементу списку ми створюємо текстовий вузол textNode за допомогою document.createTextNode(item) та додаємо його як дочірній вузол до listItem. Потім ми додаємо listItem як дочірній вузол до list.
const list = document.createElement("ul");
const items = ["Яблуко", "Банан", "Апельсин"];
items.forEach(item => {
const listItem = document.createElement("li");
const textNode = document.createTextNode(item);
listItem.appendChild(textNode);
list.appendChild(listItem);
});
const listItems = list.querySelectorAll("li");
listItems.forEach(item => {
console.log(item.firstChild.nodeValue); // Виведе текст кожного елементу списку
});