** 文檔對象模型（DOM），他給文檔（結(jié)構(gòu)樹）提供了一個結(jié)構(gòu)化的表達方法。**
DOM結(jié)構(gòu)樹
demo鏈接
<body>
<button>添加</button>
<p class="p1">別刪除我呀~~ p1
<span class="span">hello</span>
</p>
<div class="div1">別改我~別改我~
<span class="span2">那就只能改你了</span>
</div>
</body>
<script>
var btn = document.querySelector('button')
var Body = document.querySelector('body')
var p1 = document.querySelector('.p1')
var span1 = document.querySelector('.span')
var div1 = document.querySelector('.div1')
var span2 = document.querySelector('.span2')
btn.addEventListener('click',function(){
// 1. 創(chuàng)建一個元素 div，這里可以是任意元素
// 把新Div 插入到Body上
let Div = document.createElement('div')
Body.appendChild(Div)
// 2. 生成一個文本節(jié)點，參數(shù)就是文本所需要的內(nèi)容
// 把文本插入到所需要的元素上
// 插入的位置也可以用insertBefore()
let txt = document.createTextNode('Hello我是文本');
Div.appendChild(txt)
// 3.給元素添加一個屬性
// 讓它的字體顏色變?yōu)榧t色
let Atb = document.createAttribute('class')
Atb.value = 'attribute'
Div.setAttributeNode(Atb);
// 4.刪除一個p的子節(jié)點
// 然后再通過parent刪除自身
p1.removeChild(span1)
p1.parentNode.removeChild(p1)
// 5.新增一個節(jié)點，把新增節(jié)點跟p1對換
var div1Txt = document.createTextNode("a啊啊啊啊~~我被改了~~");
var newDiv = document.createElement('span')
newDiv.appendChild(div1Txt)
var parentDiv = span2.parentNode;
parentDiv.replaceChild(newDiv,span2)
// 6.div1 添加內(nèi)容
div1.innerHTML += "我是被新增的"
// 各種獲取元素的方法
/*
getElementById(id)
getElementsByTagName(element)
getElementsByClassName(class)
*/
})
</script>
其中會遇到remove不能刪除本身的問題，可以用找到父級然后再刪除自身。 還有很多問題要慢慢動手踩坑， 無法避免~
