首先定義定義一個html頁面，建立幾個節點：

<div id = "father">
    <h1>標題一</h1>
    <p id = "p1">段落一</p>
    <p class = "p2">段落二</p>
</div>

然後獲取對應的節點資訊：

<script>
    var h1 = document.getElementsByTagName('h1');//通過標籤名稱
    console.log(h1);
    var p1 = document.getElementById('p1');//通過id
    console.log(p1);
    var p2 = document.getElementsByClassName('p2');//通過class
    console.log(p2);

    var father = document.getElementsByTagName('father');//獲得父節點下的所有節點
    var children = father.children;
</script>
 

接下來在定義一個html頁面：

<div id = "id1">

</div>

我們先獲取此div節點：

var id1 = document.getElementById('id1');

可以對這個節點的文字進行操作，值得注意的是innerHTML可以解析html樣式，但是innerText不可以

id1.innerText = '124';
id1.innerHTML = '<strong>124</strong>';

可以對這個節點的css樣式進行操作：

id1.style.color = 'red';
id1.style.fontSize = '200px';
id1.style.padding = '2em';
 

接下來我們來測試下刪除節點操作，還是用上面的html

<div id = "father">
    <h1>標題一</h1>
    <p id = "p1">段落一</p>
    <p class = "p2">段落二</p>
</div>

注意：刪除dom樹節點是先要獲得需要刪除節點的父節點，然後才能刪除對應的dom節點資訊，如下所示

var self = document.getElementById('p1');
var father  = self.parentElement;
father.removeChild(self);
 

要注意的一個點就是，刪除dom接點是一個動態的過程，以上面的例子為例，比如刪除了h1節點，那麼p1節點就變成了第一個節點了

father.removeChild(father.children[0]);