методы манипуляции DOM, свойства суммированы

Человек несколько слов сказал, прямо на демо:

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

 

эффект

 

 

рекомендация

отwww.cnblogs.com/jing-tian/p/11069465.html
рекомендация