Создание и модификация узлов

createElement и appendChild

createElement - создает узел по названию тега

appendChild - переносит узел внутрь другого узла(см пример)

var btn = document.createElement("BUTTON");        // Создаем элемент <button>
var t = document.createTextNode("CLICK ME");       // Создаем текстовый узел
btn.appendChild(t);                                // Добавляем текст в кнопку <button>
document.body.appendChild(btn);                    // Добавляем <button> в <body>

Обратите внимание, что если мы работаем с уже созданными элементами, то они просто переносятся, без создания копии!

http://www.w3schools.com/jsref/met_document_createelement.asp

Наполнение элементов

Созданный с помощью createElement элемент можно наполнять через стандартные свойства DOM-объекта.

var banner = document.createElement('DIV');
banner.className = 'block';
banner.innerHTML = 'Летающий банер';
banner.style.position = 'fixed';
banner.style.top = '200px';
banner.style.left = '300px';

insertBefore

insertBefore, - добавляет элемент в список дочерних элементов родителя перед указанным элементом.

<div id="parentNode">
   <span id="childNode">foo bar</span>
</div>

<script>
//Создаем новый узел
var newNode = document.createElement("span");

//Добавляем перед childNode новый узел
parentNode.insertBefore(newNode,childNode);
</script>

removeChild - удаляет заданный узел из родительского узла https://developer.mozilla.org/ru/docs/Web/API/Node/removeChild

Удаление элемента без указания его родителя

var node = document.getElementById("nested");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}

cloneNode
https://developer.mozilla.org/ru/docs/Web/API/Node/cloneNode

<div id="outer">
  <div id="inner">
  </div>
</div>

<div id="outer2">
</div>

Если мы сделаем appendChild без клонирования, то получим следующую ситуацию

var inner = document.getElementById("inner");

var outer2 = document.getElementById("outer2");

outer2.appendChild(inner);
<div id="outer">
</div>

<div id="outer2">
   <div id="inner">
   </div>
</div>

Воспользуемся клонированием

var inner = document.getElementById("inner");
var clone = inner.cloneNode();

var outer2 = document.getElementById("outer2");

outer2.appendChild(clone);
<div id="outer">
   <div id="inner">
   </div>
</div>

<div id="outer2">
   <div id="inner">
   </div>
</div>

insertAdjacentHTML() https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Работа с атрибутами

setAttribute - устанавливает атрибут в элементе

https://developer.mozilla.org/ru/docs/Web/API/Element/setAttribute

Например, есть у нас кнопка

<button>Hello World</button>

с помощью javascript'a сделаем ее неактивной

var b = document.querySelector("button"); 

b.setAttribute("disabled", "disabled");

getAttribute() - возвращает значение указанного атрибута элемента. Если элемент не содержит данный атрибут, могут быть возвращены null или "" (пустая строка);

https://developer.mozilla.org/ru/docs/Web/API/Element/getAttribute

<input type="text" placeholder="здесь могла быть Ваша реклама">
var b = document.querySelector("input"); 

var res = b.getAttribute("placeholder");

console.log('и '+res);//и здесь могла быть Ваша реклама

hasAttribute - проверяет установлен ли атрибут. Возвращает true или false, в зависимости установлен наш атрибут в элементе или нет

<input type="checkbox" checked>
var b = document.querySelector("input"); 

b.hasAttribute("checked");

removeAttribute - удаляет атрибут у элемента

<input type="checkbox" checked>
var b = document.querySelector("input"); 

b.removeAttribute("checked");

Практика:

  1. Есть кнопка. При нажатии на нее появляется круг. При клике на любой из созданных кругов, он удаляется.

  2. Даем возможность пользователю добавлять новые элементы в выпадающее меню (ToDo List).

  3. Игра. В произвольном месте экрана появляются кружки - нужно успеть на них кликнуть, чтобы заработать баллы

  4. Есть кнопка. При нажатии на кнопку в документ добавляются кружки.

  5. Сделать так, чтобы в предыдущем задании кружки перекрашивались.

  6. Добавить в предыдущее задание вторую кнопку и блок. При нажатии на кнопку все перекрашенные круги перемещаются в блок.

  7. Сделать телефонный справочник. Есть список людей и их номеров телефонов. Есть форма, которая позволяет добавлять новых людей.

  8. Рядом с каждой записью добавить кнопку удаления.

  9. Добавить возможность редактирования каждой записи.

results matching ""

    No results matching ""