Page 116 - 6108
P. 116
Імя Значення Примітка
SPECIFIC
<p>...</p>
<ul>
<li>1.1</li>
</ul>
let p = document.body.children[0];
let ul = document.body.children[1];
let li = ul.children[0];
ul.compareDocumentPosition(p) ; // 2 = 10, <ul> після <p>
p.compareDocumentPosition(ul) ; // 4 = 100, <p> до <ul>
ul.compareDocumentPosition(li); // 20 = 10100, <ul> предок
<li>
ul.compareDocumentPosition(document.body); // 10 = 1010, <ul>
нащадок <body>
Перевірити конкретну умову, наприклад, «nodeA містить nodeB», можна за
допомогою бітових операцій.
3.4.4 Додавання вузлів
Зміна DOM – ключ до створення «живих» сторінок.
Для створення елементів об'єкт document має наступні методи:
createElement(elementName)
створює елемент html, тег якого передається в якості параметра. Повертає
створений елемент
createTextNode(text)
створює і повертає текстовий вузол. Як параметр передається текст вузла.
let elem = document.createElement ("div");
let elemText = document.createTextNode ("Hello world");
Таким чином, змінна elem буде зберігати посилання на елемент div.
Метод document.createDocumentFragment() дозволяє створити
порожній DocumentFragment, який є набором DOM вузлів. Дані вузли , при
цьому, не є частинами основного дерева DOM. Зазвичай використовуються для
створення фрагмента документа, додавання до нього нових елементів, а потім
приєднання цього фрагмента до основного дереву. В основному дереві
фрагмент буде замінений власними дочірніми елементами.
Оскільки фрагмент документа зберігається в пам'яті і не є частиною
основного дерева, додавання в нього дочірніх елементів не викликає reflow
(обчислення геометрії і позицій елементів). В наслідок цього, використання
фрагментів документа часто збільшує продуктивність.
Однак одного створення елементів недостатньо, їх ще треба додати на веб-
сторінку.
Для додавання елементів можна використовувати один з методів об'єкта
Node:
appendChild(newNode)
