Как манипулировать Dom

Содержание

1 Создайте элемент DOM
2 insertBefore (element, targetNode)
3 AppendChild (элемент)
4 Модифицирующий узел
5 Изменить содержимое
6 Изменение стилей
7 Удаление узлов

Основным объектом является объект Document, который, в свою очередь, содержит несколько других дочерних объектов. Каждый элемент в документе будет иметь соответствующее присутствие в дереве DOM. Объект документа - это встроенный объект, который имеет множество свойств и методов, которые мы можем использовать для доступа и изменения веб-сайтов.

Создайте элемент DOM

Чтобы создать новые элементы в DOM, он предоставляет общий метод createElement(), который принимает в качестве аргумента имя тега HTML и возвращает простой узел DOM указанного типа.

<!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>

<!DOCTYPE html>

<html>

<body>

<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>

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() перемещает его из текущего положения в новое положение.

<!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>

<!DOCTYPE html>

<html>

<body>

<li id="col2">Monday</li>

<li id="col3">Tuesday</li>

<li id="col3">Wednesday</li>

</ul>

<button onclick="doIt()">insertBefore</button>

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() перемещает его из текущей позиции в новую позицию.

<!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>

<!DOCTYPE html>

<html>

<body>

<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>

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-разметку. Когда вы устанавливаете контент с помощью этого метода, он удаляет все содержимое узла и вставляет предоставленный текст.

<!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>

<!DOCTYPE html>

<html>

<body>

<p id="heading">This will Change....</p>

<button onclick="doIt()">Modify Above Text</button>

function doIt() {

var txt = document.getElementById('heading').innerHTML; alert(txt);

document.getElementById('heading').innerHTML = "Its Changed.....";

}

</script>

</body>

</html>

Изменение стилей

Свойство HTMLElement.style используется так же, как и для встроенного стиля элемента. При получении он возвращает объект CSSStyleDeclaration, который содержит список всех свойств стилей для этого элемента со значениями, назначенными для атрибутов, определенных в атрибуте встроенного стиля элемента.

<!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>

<!DOCTYPE html>

<html>

<body>

<h1 id="heading">This will change to red...<h1>

<button onclick="doIt()">Modify Above Text</button>

function doIt() {

var txt = document.getElementById('heading').style.color="red";

}

</script>

</body>

</html>

Удаление узлов

Подобно модификации DOM, он также позволяет удалять целевые узлы. Метод removeChild() удаляет целевой объект из родительского узла.

<!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>