Как манипулировать Dom
Содержание
Основным объектом является объект Document, который, в свою очередь, содержит несколько других дочерних объектов. Каждый элемент в документе будет иметь соответствующее присутствие в дереве DOM. Объект документа - это встроенный объект, который имеет множество свойств и методов, которые мы можем использовать для доступа и изменения веб-сайтов.
Создайте элемент DOM
Чтобы создать новые элементы в DOM, он предоставляет общий метод createElement(), который принимает в качестве аргумента имя тега HTML и возвращает простой узел DOM указанного типа.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <p>Days:</p> <ul id="days"> <li id="col1">Sunday</li> <li id="col2">Monday</li> <li id="col3">Tuesday</li> <li id="col3">Wednesday</li> </ul> <button onclick="doIt()">Create New</button> <script> function doIt() { var newNode=document.createElement("LI"); var txt=document.createTextNode("Thursday"); newNode.appendChild(txt); document.getElementById("days").appendChild(newNode); } </script> </body> </html> |
Выше JavaScript-программы сначала создают узел LI, затем он разбивает текстовое поле для отображения текста, а затем добавляет текстовый узел к новому элементу LI, и, наконец, новый узел добавляется к существующим «дням».
insertBefore (element, targetNode)
Метод Node.insertBefore() вставляет узел перед ссылочным узлом в качестве дочернего элемента указанного родительского узла. Если данный ребенок является ссылкой на существующий узел в документе, insertBefore() перемещает его из текущего положения в новое положение.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <p>Days:</p> <ul id="days"> <li id="col2">Monday</li> <li id="col3">Tuesday</li> <li id="col3">Wednesday</li> </ul> <button onclick="doIt()">insertBefore</button> <script> function doIt() { var newItem = document.createElement("LI"); var textnode = document.createTextNode("Sunday"); newItem.appendChild(textnode); var list = document.getElementById("days"); list.insertBefore(newItem, list.childNodes[0]); } </script> </body> </html> |
AppendChild (элемент)
Метод Node.appendChild() добавляет узел в конец списка дочерних элементов указанного родительского узла. Если данный ребенок является ссылкой на существующий узел в документе, appendChild() перемещает его из текущей позиции в новую позицию.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <p>Days:</p> <ul id="days"> <li id="col2">Sunday</li> <li id="col2">Monday</li> <li id="col3">Tuesday</li> <li id="col3">Wednesday</li> </ul> <button onclick="doIt()">appendChild</button> <script> function doIt() { var node = document.createElement("LI"); var textnode = document.createTextNode("Thursday"); node.appendChild(textnode); document.getElementById("days").appendChild(node); } </script> </body> </html> |
Модифицирующий узел
Вы можете изменять существующие элементы в DOM, изменяя их свойства, контент, стиль или даже полностью перемещая их из одного места в DOM в другое.
Изменить содержимое
Свойство Element innerHTML используется для получения или установки строки, представляющей сериализованный HTML, описывающий потомков элемента. Он не возвращает HTML-разметку. Когда вы устанавливаете контент с помощью этого метода, он удаляет все содержимое узла и вставляет предоставленный текст.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <p id="heading">This will Change....</p> <button onclick="doIt()">Modify Above Text</button> <script> function doIt() { var txt = document.getElementById('heading').innerHTML; alert(txt); document.getElementById('heading').innerHTML = "Its Changed....."; } </script> </body> </html> |
Изменение стилей
Свойство HTMLElement.style используется так же, как и для встроенного стиля элемента. При получении он возвращает объект CSSStyleDeclaration, который содержит список всех свойств стилей для этого элемента со значениями, назначенными для атрибутов, определенных в атрибуте встроенного стиля элемента.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <h1 id="heading">This will change to red...<h1> <button onclick="doIt()">Modify Above Text</button> <script> function doIt() { var txt = document.getElementById('heading').style.color="red"; } </script> </body> </html> |
Удаление узлов
Подобно модификации DOM, он также позволяет удалять целевые узлы. Метод removeChild() удаляет целевой объект из родительского узла.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body> <p>Days:</p> <ul id="days"> <li id="col2">Sunday</li> <li id="col2">Monday</li> <li id="col3">Tuesday</li> <li id="col3">Wednesday</li> </ul> <button onclick="doIt()">Remove</button> <script> function doIt() { var list = document.getElementById("days"); list.removeChild(list.childNodes[0]); } </script> </body> </html> |
(Пока оценок нет)