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

この記事では、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 のノードの属性

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

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

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

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

上記の例に基づいて、p

p.children

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

#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 )) 除了孩子关系，节点还存在父子关系，兄弟关系 通过以上属性获得的节点不一定是元素类型。可能是text等。（如果不存在的为null）如果希望获得元素类型的节点，对DOM的扩展中提供了获取元素类型节点的方法 操作节点 appendChild() 用于向childNodes列表的末尾添加一个节点。添加后childNodes的新增节点，父节点及以前的最后一个节点的关系指针会更新。完成更新后返回值是新增节点。 如果传入appendChild中的节点已经是文档的一部分了，那么结果就是将该节点从原来的位置移到新的位置。 InsertBefore () InsertBefore ()接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点回变成参照节点的前一个同胞节点，同时被返回。如果参照节点为null，则和appendChild没有区别 ReplaceChild() ReplaceChild()接收两个参数：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并且删除，同时要插入的节点占据它的位置  RemoveChild() 删除一个节点，参数是要移除的节点  注意： 被删除和替换的节点仍然为文档所有，只不过在文档中已经没有了位置。 以上的几种方法的操作，都是某个节点的子节点。也就是说要使用这些方法，需要先获得父节点 cloneNode() 拷贝一个节点，接受一个参数，true=深复制（也就是复制节点以及整个子节点树）；false=浅复制（只复制当前节点） 总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程！ 相关推荐： php公益培训视频教程 JavaScript图文教程 JavaScript在线手册

以上がDomのchildNodeと子ノードおよび関連ノードの取得に関するjsの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。