七、操作DOM對象（重點）

核心：瀏覽器網(wǎng)頁就是一個DOM樹形結構。

DOM樹

1.獲得DOM結點

更新：更新DOM節(jié)點。
遍歷DOM節(jié)點：得到DOM節(jié)點。
刪除：刪除一個DOM節(jié)點。
添加：添加一個新的節(jié)點。
要操作一個DOM節(jié)點，就必須要先獲得這個DOM節(jié)點。
例：

<div id="father">
  <h1>標題一</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>
<script>
  //對應CSS選擇器
  var h1 = document.getElementsByTagName('h1');
  var p1 = document.getElementById('p1');
  var p2 = document.getElementsByClassName('p2');
  var father = document.getElementById('father');
  var childrens = father.children;//獲取父節(jié)點下的所有子節(jié)點
</script>

①獲得父節(jié)點的第一個子節(jié)點 father.firstChild
②獲得父節(jié)點的最后一個子節(jié)點 father.lastChild
這是JS的原生代碼，以后盡量使用jQuery。

2.更新DOM節(jié)點

例：通過id獲取節(jié)點，其id為id1。
1）操作文本
①修改文本的值 id1.innerText
②可以解析HTML文本標簽 id1.innerHTML
2）操作CSS

id1.style.屬性 = '值';

注：Ⅰ屬性使用字符串包裹。
Ⅱ屬性中-轉駝峰命名。

3.刪除DOM節(jié)點

刪除節(jié)點的步驟：先獲取父節(jié)點，再通過父節(jié)點刪除自己。
例：刪除p1。

<div id="father">
  <h1>標題一</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>
<script>
  var self = document.getElementById('p1');
  var father = p1.parentElement;
  father.removeChild(self);
  //刪除是一個動態(tài)的過程，如下操作是不正確的
  father.removeChild(father.children[0]);
  father.removeChild(father.children[1]);
  father.removeChild(father.children[2]);
</script>

注：刪除多個節(jié)點的時候，children是在時刻變化的，刪除節(jié)點的時候一定要注意。

4.創(chuàng)建和插入DOM節(jié)點

當獲得了某個DOM節(jié)點，假設這個DOM節(jié)點是空的，可以通過innerHTML就可以增加一個元素了。但是如果這個DOM節(jié)點已經(jīng)存在元素了，就不會這樣操作，會產(chǎn)生覆蓋。
1）追加
例：

<p id="js">JavaScript</p>
<div id="list">
  <p id="se">JavaSE</p>
  <p id="ee">JavaEE</p>
  <p id="me">JavaME</p>
</div>
<script>
  var js = document.getElementById('js');
  var list = document.getElementById('list');
  list.appendChild(js);//追加到后面
</script>

結果為

<div id="list">
  <p id="se">JavaSE</p>
  <p id="ee">JavaEE</p>
  <p id="me">JavaME</p>
  <p id="js">JavaScript</p>
</div>

2）創(chuàng)建一個新的標簽，實現(xiàn)插入

var js = document.getElementById('js');
var list = document.getElementById('list');
//通過JS創(chuàng)建一個新的節(jié)點
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = 'Hello World';
list.appendChild(newP);//創(chuàng)建的p標簽追加到list中
//創(chuàng)建一個標簽節(jié)點
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
body.appendChild(myScript);
//可以創(chuàng)建一個style標簽
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:blue}';//設置style的標簽內(nèi)容
document.getElementsByTagName('head')[0].appendChild(myStyle);

3）insertBefore
語法：

要包含的節(jié)點.insertBefore(newNode,targetNode);

例：在ee的前面插入js

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
list.insertBefore(js,ee);