Человек несколько слов сказал, прямо на демо:
. 1 <! DOCTYPE HTML> 2 <HTML LANG = "EN"> . 3 <голова> . 4 <Мета кодировка = "UTF - 8 . "> . 5 <название> Документ </ название> . 6 </ голова> . 7 <тело> . 8 < класс деления = "контейнер" ID = "окно"> <SPAN> Я является DIV элемент. 1 </ SPAN> <p> Привет </ P> </ DIV> . 9 <Рукописные> 10 вар divNode = document.getElementsByClassName ( " Контейнер «) [0 ]; . 11 / * операции узел * / 12 / * Получить узлы элементов * / 13 является console.log (divNode. NODETYPE) // 1 14 console.log (divNode.nodeName) // ДИВ 15 console.log (divNode.nodeValue) // нуль - 16 17 / * 获取属性节点* / 18 console.log (divNode.attributes [1] .nodeName) // идентификатор 19 console.log (divNode.attributes [0] .nodeValue); // Контейнер 20 console.log (divNode.attributes [0]); // класс = "контейнер" 21 22 / * 获取文本节点* / 23 console.log (divNode.childNodes [0] .nodeName); // SPAN 24 в console.log (divNode.childNodes [0] .nodeValue); // нулевой, если вспомогательный элемент не существует, выводимый текст 25 console.log (divNode.parentNode); // выход тег и его дочерний элемент тела 26 является консоль. войти ( "===================" ) 27 в console.log (divNode.childNodes .childNodes [0] .nodeName [1].); // #text 28 консоли .log ([1]. divNode.childNodes .childNodes [0] .nodeValue); // Привет 29 / * элемент Способ работы * / 30 / * добавить дочерний узел * / 31 вар ADDNODE = document.createElement ( "DIV" ); 32 варAddText = document.createTextNode ( "Гуанчжоу" ); 33 addNode.appendChild (AddText); 34 divNode.appendChild (ADDNODE); 35 36 / * 删除子节点* / 37 вар deleteNode = document.getElementsByTagName ( "оболочка") [0 ] 38 divNode.removeChild (deleteNode); 39 40 / * 替换子节点* / 41 вар replaceNode = divNode.getElementsByTagName ( "DIV") [0 ] 42 вар newReplace = document.createElement ( "оболочка" ); 43 newReplace.innerHTML = "мое имя Лукас" ; 44 divNode.replaceChild (newReplace, replaceNode); 45 46 / * вставить дочерний узел * / 47 вар newInsert = document.createElement ( "DIV" ); 48 newInsert.innerHTML = "вставить новый новый DIV" ; 49 divNode.insertBefore (newInsert , divNode.childNodes [0 ]); 50 51 / * операции атрибутов * / 52 / * Получить узлы недвижимости * / 53 console.log (divNode.getAttribute ( "класс")); // Контейнер 54 console.log (divNode. getAttributeNode ( "класс")); //= Класс "Контейнер" 55 56 / * создать и набор узлов недвижимости * / 57 вар addAttr = document.createAttribute ( "класс" ); 58 addAttr.value = "newAttr" ; 59 divNode.setAttributeNode (addAttr); // заменить старый класс 60 // divNode.setAttribute ( "класс", "newAttr"); / * * простая формулировка / 61 62 / * удалить атрибут * / 63 вар deleteAttr = divNode.getAttributeNode ( "класс" ); 64 divNode.removeAttributeNode (deleteAttr) 65 // divNode.removeAttribute ( "указанный выше идентификатор") / * * Простая формулировка / 66 </ скрипт> 67 </ body> 68 </ html>
эффект