programing

JavaScript의 child Nodes와 child Nodes의 차이점은 무엇입니까?

goodjava 2022. 11. 20. 11:13

JavaScript의 child Nodes와 child Nodes의 차이점은 무엇입니까?

JavaScript를 사용하고 있는 자신을 발견했는데childNodes그리고.children특성.나는 그들의 차이가 무엇인지 궁금하다.또 하나는 다른 것보다 더 좋습니까?

그것이 요소의 속성임을 이해한다.1 요소만 가지고 있다.children이 아이들은 모두 Element 타입입니다.2

단, 는 노드의 속성입니다. .childNodes에는 임의의 노드를 포함할 수 있습니다.3

구체적인 예는 다음과 같습니다.

let el = document.createElement("div");
el.textContent = "foo";

el.childNodes.length === 1; // Contains a Text node child.
el.children.length === 0;   // No Element children.

대부분의 경우, 당신은 다음을 사용하고 싶어합니다..children일반적으로 DOM 조작에서 텍스트 또는 주석 노드를 루프하지 않기 때문입니다.

텍스트 노드를 조작하는 경우는, 그 대신에 조작하는 것이 좋습니다.4


1. 엄밀히 말하면, Element에 포함되는 Mixin인 ParentNode의 속성입니다.
2. 모두 요소이기 때문에.children는 요소만 포함할 수 있는HTML Collection 입니다.
3. 마찬가지로.childNodesNodeList이기 때문에 임의의 노드를 유지할 수 있습니다.
4. 또는 여기 또는 여기차이점을 참조하십시오.

Element.children 는 요소 자녀만 반환하고 는 모든 노드 자녀만 반환합니다.요소는 노드이므로 요소에서 둘 다 사용할 수 있습니다.

믿어요childNodes신뢰성이 높아집니다.예를 들어, MDC(위 링크)는 IE가 단지childrenIE 9의 오른쪽입니다.childNodes는 브라우저 실장자에 의한 오류의 여지가 적습니다.

지금까지의 좋은 답변은 다음과 같습니다.노드 타입을 체크할 수 있는 것만을 덧붙이고 싶습니다.nodeType:

yourElement.nodeType

그러면 다음과 같은 정수가 표시됩니다(여기서 추출).

| Value |             Constant             |                          Description                          |  |
|-------|----------------------------------|---------------------------------------------------------------|--|
|    1  | Node.ELEMENT_NODE                | An Element node such as <p> or <div>.                         |  |
|    2  | Node.ATTRIBUTE_NODE              | An Attribute of an Element. The element attributes            |  |
|       |                                  | are no longer implementing the Node interface in              |  |
|       |                                  | DOM4 specification.                                           |  |
|    3  | Node.TEXT_NODE                   | The actual Text of Element or Attr.                           |  |
|    4  | Node.CDATA_SECTION_NODE          | A CDATASection.                                               |  |
|    5  | Node.ENTITY_REFERENCE_NODE       | An XML Entity Reference node. Removed in DOM4 specification.  |  |
|    6  | Node.ENTITY_NODE                 | An XML <!ENTITY ...> node. Removed in DOM4 specification.     |  |
|    7  | Node.PROCESSING_INSTRUCTION_NODE | A ProcessingInstruction of an XML document                    |  |
|       |                                  | such as <?xml-stylesheet ... ?> declaration.                  |  |
|    8  | Node.COMMENT_NODE                | A Comment node.                                               |  |
|    9  | Node.DOCUMENT_NODE               | A Document node.                                              |  |
|   10  | Node.DOCUMENT_TYPE_NODE          | A DocumentType node e.g. <!DOCTYPE html> for HTML5 documents. |  |
|   11  | Node.DOCUMENT_FRAGMENT_NODE      | A DocumentFragment node.                                      |  |
|   12  | Node.NOTATION_NODE               | An XML <!NOTATION ...> node. Removed in DOM4 specification.   |  |

Mozilla에 따르면 다음과 같습니다.

다음 상수는 더 이상 사용되지 않으므로 더 이상 사용할 수 없습니다.Node.ATTUTE_NODE, 노드.ENTITY_REference_NODE, 노드.ENTITY_NODE, 노드.표기법_노드

언급URL : https://stackoverflow.com/questions/7935689/what-is-the-difference-between-children-and-childnodes-in-javascript