nodeTypes - garevna/js-course GitHub Wiki
DOM представляет собой граф ( дерево ), вершины которого ( узлы, или nodes ) могут быть html-элементами, комментариями, обычным текстом...
Получить все дочерние узлы элемента DOM можно с помощью свойства childNodes этого элемента
☕
document.body.childNodes
document.querySelector ( "main" ).childNodesКаждый узел ( объект ) имеет свойство nodeType:
| Код | Тип узла | Пример |
|---|---|---|
1 |
ELEMENT_NODE |
<div> |
2 |
ATTRIBUTE_NODE |
href = "https://translate.google.com/" |
3 |
TEXT_NODE |
document.body.appendChild ( new Text( "Hello" ) ) |
4 |
CDATA_SECTION_NODE |
|
5 |
ENTITY_REFERENCE_NODE |
|
6 |
ENTITY_NODE |
|
7 |
PROCESSING_INSTRUCTION_NODE |
|
8 |
COMMENT_NODE |
<!-- ... --> |
9 |
DOCUMENT_NODE |
<html>...</html> |
10 |
DOCUMENT_TYPE_NODE |
<!DOCTYPE> |
11 |
DOCUMENT_FRAGMENT_NODE |
|
12 |
NOTATION_NODE |
☕ 1️⃣
Выполним код в консоли:
document.body.appendChild ( new Text( "Hello" ) )
document.body.childNodesРезультат:
▼ NodeList [text]
0: text
length: 1
► __proto__: NodeList☕ 2️⃣
var style = document.createElement ( 'style' )
document.head.appendChild ( style )
style.innerText = `p { color: red; }`
var p = document.body.appendChild (
document.createElement ( "p" )
)
p.innerText = "Hello!"
document.head.childNodes // ▶ NodeList [style]
document.head.childNodes[0].nodeType // 1