JavaScript------WebS API学習のDOM(三)

ノードを削除    
         node.removeChild(child)   方法は、DOMからサブノードを削除し、削除されたノードを返す.
ケース:メッセージを追加して、伝言のケースを削除します.

    
    

        
          
    
    

        

        
    
    
        var input = document.querySelector('input');
        var btns = document.querySelector('button');
        var ul = document.querySelector('ul');
        btns.onclick = function () {
            if (input.value === '') {
                alert('        ');
                return false;
            } else {
                var li = document.createElement('li');
                li.innerHTML = input.value + "<a herf = 'javascript:;'>  </a>";
                //   input   ,     li , input      .
                input.value = '';
                //       :  .insertBofore(child ,     ) ,ul    li    ul         
                ul.insertBefore(li, ul.children[0]);
                //   a
                var as = document.querySelectorAll('a');
                //       a      
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        //     :  .removeChild(child)      li li    ul      a.a    li   li = this.parentNode;
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    

ノードをコピー
           node.cloneNode()方法は、この方法を呼び出すノードのコピーを返し、クローンノード／コピーノードとも呼ばれる.
           括弧パラメータが空またはfalseであれば、浅いコピーである.すなわち、コピーノード自体だけを複製し、内部のサブノードをクローンしない.
                   括弧の中にtrueを入れると深いコピーになります.全部コピーします.
実例:表を動的に生成する
        

   
    
    
        var datas = [
            {
                name: '   ',
                subject: '  ',
                score: 100
            },
            {
                name: '   ',
                subject: '  ',
                score: 120
            },
            {
                name: '   ',
                subject: '  ',
                score: 150
            },
            {
                name: '   ',
                subject: '  ',
                score: 250
            }
        ];
        var tbody =document.querySelector('tbody');
        for(var i = 0 ;i < datas.length ;i++){
            var tr =document.createElement('tr');
            tbody.append(tr);
            for(var k in  datas[i]){ //k in obj k    ,obj    
                var td = document.createElement('td');
                tr.append(td);
                //         data[i][k]  
                td.innerHTML = datas[i][k];
            }
            var td = document.createElement('td');
            td.innerHTML = "<a herf='javascript:;'>  </a>";
            tr.append(td);
        }
        var as = document.querySelectorAll('a');
        for(var i = 0 ;i< as.length ;i++){
            as[i].onclick = function(){
                //a             ,   this.parentNode.parentNode
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    

3つの動的要素を作成する方法と違い
方式:①document.write  (めったに使わない)
       ②innerHTML  
       ③document.creat Element()
      注意:  1.document.writeは、コンテンツを直接ページに書き込むコンテンツストリームであるが、文書ストリームの実行が完了すると、ページ全体が再描画される.
                2.inneHTMLはコンテンツをあるDOMノードに書き込むもので、ページの書き換えにつながることはありません.
               3.innerHTMLは複数の効率をより高く作成します.
               4.createElement()複数の元素を作成するには効率がやや低いですが、構造がより明確です.