JS DOM節點增刪改查 屬性設置

一.節點操作

增

createElement(name)創建元素
appendChild();將元素添加

 

刪

獲得要刪除的元素
獲得它的父元素
使用removeChild()方法刪除

 

改

第一種方式:

使用上面增和刪結合完成修改

第二中方式:

使用setAttribute();方法修改屬性          

使用innerHTML屬性修改元素的內容

 

查

<script type="text/javascript">
//在第一個div中動態增加一個a標簽. 該a標簽點擊之后跳轉到百度首頁.
    function addNode(){
        //1.獲得 第一個div
        var div = document.getElementById("div_1");
        //2.創建a標簽  createElement==>創建一個a標簽   <a></a>
        var eleA =  document.createElement("a");
        //3.為a標簽添加屬性 <a href="http://www.baidu.com"></a>
        eleA.setAttribute("href", "http://www.baidu.com");
        //4.為a標簽添加內容 <a href="http://www.baidu.com">百度</a>
        eleA.innerHTML = "百度";    
        //5.將a標簽添加到div中
        div.appendChild(eleA);
    }
    //點擊后 刪除div區域2
    function deleteNode(){
        //1 獲得要刪除的div區域
            var div = document.getElementById("div_2");
        //2.獲得父親
            var parent = div.parentNode;
        //3 由父親操刀 
            parent.removeChild(div);
    }
    //點擊后 替換div區域3 為一個美女
    function updateNode(){
        //1 獲得要替換的div區域3
        var div = document.getElementById("div_3");
        //2創建img標簽對象 <img />
        var img = document.createElement("img");
        //3添加屬性 <img src="001.jpg" />
        img.setAttribute("src", "001.JPG");
        //4.獲得父節點
        var parent = div.parentNode;
        //5.替換
        parent.replaceChild(img, div);
    }
    //點擊后 將div區域4 克隆一份 添加到頁面底部
    
    function copyNode(){
        //1.獲取要克隆的div
        var div = document.getElementById("div_4");
        //2.克隆 參數為true 那么克隆時克隆所有子元素. false 只克隆自己
        var div_copy = div.cloneNode(true);
        //3.獲得父親
        var parent = div.parentNode;
        //4.添加
        parent.appendChild(div_copy);
    }
    
    
</script>

 

二.修改 HTML DOM 

• 改變 HTML 內容 

        改變元素內容的最簡答的方法是使用 innerHTML ，innerText。

        改變 CSS 樣式

　　

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";<br>                             .style.fontSize=48px

改變 HTML 屬性

        elementNode.setAttribute(name,value)

        elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

• 創建新的 HTML 元素 

        createElement(name)

• 刪除已有的 HTML 元素 

        elementNode.removeChild(node)

• 關於class的操作 

        elementNode.className

        elementNode.classList.add

        elementNode.classList.remove