JavaScriptノード操作--ノードの作成、ノードの追加、ノードの削除、ノードの複製

8527 ワード

先端開発 javascript dom

ノード操作
ノードを作成

document.createElement('tagName')

document.creat Element()メソッドはtagNameによって指定されたHTML要素を作成します.これらの要素はもともと存在しなかったので、私たちの需要に応じて動的に生成されたので、私たちも動的に要素ノードを作成するようになりました.
ノードを追加

node.appendChild(child)

node.apendChild()方法は、ノードを指定された親ノードのサブノードリストの末尾に追加する.cssの中のafterの疑似元素に類似します.

<body>
    <ul>
        
    ul>
    <script>
    	//      
        var li =document.createElement('li');
        //    
        var ul = document.querySelector('ul');
        ul.appendChild(li);
    script>
body>

node.insertBefore(child,    )

node.insertBefore()方法は、ノードを親ノードの指定されたサブノードの前に追加する.

var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);

結点を削除

node.removeChild(child);

node.removeChild()方法は、DOMからサブノードを削除し、削除されたノードを返す.

<body>
    <ul>
        <li>   li>
        <li>   li>
        <li>   li>
    ul>
    <script>
    	var ul = document.querySelector('ul');
        ul.removeChild(ul.child[0]);
    script>
body>

ノードをコピー

node.cloneNode();

node.cloneNode()方法は、この方法の結点を呼び出すコピーを返す.クローンノードまたはコピーノードとも呼ばれる.括弧の中には空かfalseがあります.コピーしたのは結点だけです.内容はコピーしません.括弧の中にはtrueが深くコピーされ、ノードをコピーし、内容をコピーします.

<body>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
    ul> 
    <script>
    	var ul = document.querySelector('ul');
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    script>
body>

JavaScript学習ノート(Window対象)『サイの本』