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 без необхідності повного оновлення сторінки.

автор: Bond

Порада

Пам'ятайте, що nodeValue повертає null для вузлів, які не містять текстового вмісту, наприклад, для елементів або коментарів. Тому перед використанням nodeValue перевіряйте тип вузла за допомогою node.nodeType або node.nodeName. Для текстових вузлів nodeType дорівнює 3, а nodeName - '#text'.

автор: Bond

Порада

Будьте обережні при використанні nodeValue для зміни значень атрибутів. Хоча це можливо, краще використовувати метод setAttribute() для зміни атрибутів, оскільки він забезпечує кращу семантику та зрозумілість коду. Наприклад, замість link.firstChild.nodeValue = 'https://newexample.com' використовуйте link.setAttribute('href', 'https://newexample.com').

автор: Bond

Порада

Для досвідчених розробників: використовуйте nodeValue для динамічного створення текстових вузлів та їх вставки в DOM. Це може бути корисним при генеруванні вмісту на основі даних із серверу або взаємодії користувача. Наприклад:

const newText = document.createTextNode('Динамічно створений текст');
const container = document.getElementById('container');
container.appendChild(newText);

автор: Bond

Синтаксис

Element.nodeValue

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	1	1	1	12.1	12

Підтримка: мобільні переглядачі
Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі
Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

У цьому прикладі ми створюємо новий невпорядкований список (<ul>) та масив рядків items, що представляють елементи списку. Ми використовуємо метод forEach для проходження по масиву items та створення нового елементу списку (<li>) для кожного елементу. Для кожного елементу списку ми створюємо текстовий вузол textNode за допомогою document.createTextNode(item) та додаємо його як дочірній вузол до listItem. Потім ми додаємо listItem як дочірній вузол до list.

HTML

<ul>
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>

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); // Виведе текст кожного елементу списку
});

автор: Bond

У цьому прикладі ми створюємо новий елемент <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); // Виведе: "Це текстовий вузол."

автор: Bond

У цьому прикладі ми демонструємо використання властивості nodeValue для оновлення тексту на веб-сторінці. Користувач може ввести текст у поле введення, а потім натиснути кнопку "Оновити текст". Коли користувач натискає кнопку, ми створюємо новий текстовий вузол з введеним текстом за допомогою document.createTextNode(newText). Потім ми замінюємо попередній текстовий вузол у елементі <p> на новий за допомогою методу replaceChild(). Таким чином, ми використовуємо властивість nodeValue для встановлення нового текстового вмісту вузла.

Цей приклад демонструє, як можна динамічно змінювати текст на веб-сторінці за допомогою властивості nodeValue. Користувач може взаємодіяти з прикладом, вводячи новий текст та оновлюючи його на сторінці.

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!