Dom의 childNode와 자식 및 관련 노드 인수에 대한 Node.js-JS 튜토리얼-php.cn

이 글은 Dom의 childNodes와 childrens 및 관련 노드 인수에 대해 js를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

DOM-Document Object Model

노드 유형

각 DOM 노드에는 노드 유형을 나타내는 nodeType 속성이 있습니다. 총 12가지 유형이 있으며, 일반적인 유형은 다음과 같습니다. ELEMENT_NODE=1;ATTRIBUTE_NODE=2;TEXT_NODE=3

Example

<p>
    p
    </p><p>
        doughter
    </p>
    <p>
        son
    </p>
    <p>
        cousin
    </p>

로그인 후 복사

p 노드의 경우 nodeType=1, nodeName="p" nodeValue=null

(저장된 nodeName은 태그 이름)

var p = document.getElementById("p")

로그인 후 복사

P 노드

Dom의 childNode와 자식 및 관련 노드 인수에 대한 Node.js

P에 대한 속성에는 NodeList 개체에 저장되는 childNodes 속성도 있습니다. NodeList는 정렬된

nodes 집합을 저장하는 데 사용되는 배열과 유사한 개체입니다. 위치별로 노드에 액세스할 수 있습니다. NodeList의 값은 대괄호 구문을 통해 액세스할 수 있고 이 객체에도 길이 속성이 있지만 Array의 인스턴스는 아닙니다. NodeList 객체의 독특한 점은 실제로 DOM 구조를 기반으로 쿼리를 동적으로 실행한 결과이기 때문에 DOM 구조의 변경 사항이 자동으로 NodeList에 반영될 수 있다는 것입니다.

노드에는 childrens라는 속성도 있습니다. "JavaScript Advanced 프로그래밍"에 따르면: IE9 이전 버전과 텍스트 노드의 공백 문자를 처리하는 다른 브라우저 간의 차이로 인해 children 속성이 오랫동안 나타났습니다. 이 속성은 HTMLCollection의 인스턴스이며

요소이기도 한 요소의 하위 노드 만 포함합니다. 그 외에는 둘 사이에 차이가 없습니다.

위의 예에 따르면 p

p.children

Dom의 childNode와 자식 및 관련 노드 인수에 대한 Node.js

p.childNodes

Dom의 childNode와 자식 및 관련 노드 인수에 대한 Node.js

의 childNodes와 자식이 모두 서로 다른 인스턴스에 속해 있음을 알 수 있습니다. children은 HTMLCollection의 인스턴스이고, childNodes는 childNodes

2의 인스턴스입니다. children은 요소이기도 한 하위 노드만 포함하며, childNodes는 HTML

노드, 속성 노드 및 텍스트를 포함하여 요소의 하위 요소 컬렉션을 반환합니다. 노드. nodeType을 사용하여 노드 유형을 확인할 수 있습니다. nodeType==1인 경우에만 요소 노드입니다. (2 = 속성 노드, 3 = 텍스트 노드) Childnodes에 대한 지원은 다음과 같습니다.

childNodes(i)

지원됨

可以通过一下方法进行转化

var arr = Array.prototype.slice.call(p.childNodes,0);
    arr.filter((item,index)=>(
        item.nodeType===1
))

로그인 후 복사

除了孩子关系，节点还存在父子关系，兄弟关系

Dom의 childNode와 자식 및 관련 노드 인수에 대한 Node.js

通过以上属性获得的节点不一定是元素类型。可能是text等。（如果不存在的为null）如果希望获得元素类型的节点，对DOM的扩展中提供了获取元素类型节点的方法

Dom의 childNode와 자식 및 관련 노드 인수에 대한 Node.js

操作节点

appendChild()

用于向childNodes列表的末尾添加一个节点。添加后childNodes的新增节点，父节点及以前的最后一个节点的关系指针会更新。完成更新后返回值是新增节点。

如果传入appendChild中的节点已经是文档的一部分了，那么结果就是将该节点从原来的位置移到新的位置。

InsertBefore ()

InsertBefore ()接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点回变成参照节点的前一个同胞节点，同时被返回。如果参照节点为null，则和appendChild没有区别

ReplaceChild()

ReplaceChild()接收两个参数：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并且删除，同时要插入的节点占据它的位置

RemoveChild()

删除一个节点，参数是要移除的节点

注意：

被删除和替换的节点仍然为文档所有，只不过在文档中已经没有了位置。
以上的几种方法的操作，都是某个节点的子节点。也就是说要使用这些方法，需要先获得父节点

cloneNode()

拷贝一个节点，接受一个参数，true=深复制（也就是复制节点以及整个子节点树）；false=浅复制（只复制当前节点）

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程！