JavaScript--DOM的增刪改查

DOM的增刪改查

node的CURD

增

createElement(name);  // 建立元素
appendChind();  //將元素添加

刪

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

改

第一種方式:
	使用上面增和刪結合完成修改
第二中方式:
	使用setAttribute();方法修改屬性
	使用innerHTML屬性修改元素的內容

查

經過DOM對象

• 示例

<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>

• 改變 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