DomのchildNodeと子ノードおよび関連ノードの取得に関するjs-jsチュートリアル-php.cn

この記事では、Dom の childNodes とその関連ノードの取得に関する js を紹介します。必要な方は参考にしていただければ幸いです。。

DOM ドキュメントオブジェクトモデル

ノードタイプ

各 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と子ノードおよび関連ノードの取得に関するjs

P には childNodes もありますNodeList オブジェクトに保存されるプロパティ。NodeList は、場所によってアクセスできる

nodes の順序付きセットを保存するために使用される配列のようなオブジェクトです。 NodeList の値には角括弧構文を通じてアクセスでき、このオブジェクトには length プロパティもありますが、これは Array のインスタンスではありません。 NodeList オブジェクトのユニークな点は、実際には DOM 構造に基づいて動的にクエリを実行した結果であるため、DOM 構造の変更を自動的に NodeList に反映できることです。

ノードには childs という属性もあります。「JavaScript Advanced Programming」によると、テキストノード内の空白文字の処理における IE9 より前の他のバージョンと他のブラウザとの違いにより、children 属性は長い間表示されてきました。この属性は HTMLCollection のインスタンスであり、要素内の

要素でもある子ノード のみを含みます。それ以外には、両者に違いはありません。

上記の例に基づいて、p

p.children

DomのchildNodeと子ノードおよび関連ノードの取得に関するjs

p.childNodes## の子ノードと子の両方を出力してみましょう

DomのchildNodeと子ノードおよび関連ノードの取得に関するjs

#1 2 つは異なるインスタンスに属しており、children は HTMLCollection のインスタンスであり、childNodes は childNodes のインスタンスであることがわかります。

2 . Children には要素でもある子ノードのみが含まれ、 childNodes は HTML

ノード、属性ノード、テキストノードを含む要素の子要素のコレクションを返します。 nodeType を使用して、ノードのタイプを決定できます。 nodeType==1の場合のみ要素ノードとなります。 (2= 属性ノード、3= テキストノード)

childNodes のサポートは次のとおりです

##childNodes(i)

IE6-8/Safari/Chrome/Opera

IE9/Firefox

サポートされている

サポートされていない

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

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

ログイン後にコピー

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

DomのchildNodeと子ノードおよび関連ノードの取得に関するjs

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

DomのchildNodeと子ノードおよび関連ノードの取得に関するjs

操作节点

appendChild()

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

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

InsertBefore ()

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

ReplaceChild()

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

RemoveChild()

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

注意：

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

cloneNode()

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

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