1. 程式人生 > >DOM的基本操作1

DOM的基本操作1

DOM樹結構: 在這裡插入圖片描述

在這裡插入圖片描述

在這裡插入圖片描述

舉個例子: html:

<div></div>

js:

    var div = document.getElementsByTagName('div')[0];
    var span = document.createElement('span');//增
    var text = document.createTextNode('123');//增
    var comment = document.createComment('this is comment');//增
    div.appendChild(span);//插
    div.appendChild(text);//插
    div.appendChild(comment);//插

在這裡插入圖片描述

在這裡插入圖片描述

PARENTNODE.insertBefore(a,b) 將元素a插入到元素b前面

舉個例子: html:

   <div>
            <span></span>
            <p></p>
            <strong></strong>
        </div>

js:

var div = document.getElementsByTagName('div')[0]

在這裡插入圖片描述 現在我們要把em標籤插入到p標籤前面

所以就要在JS中進行修改 js:

 var div = document.getElementsByTagName('div')[0];
    var p = document.getElementsByTagName('p')[0];
    var em = document.createElement('em');//增
    div.insertBefore(em,p);

在這裡插入圖片描述

在這裡插入圖片描述 現在我們要把strong標籤刪掉。

在js:

 var div = document.getElementsByTagName('div')[0];
    var p = document.getElementsByTagName('p')[0];
    var em = document.createElement('em');
    div.insertBefore(em,p);
    var strong = document.getElementsByTagName('strong')[0];
    div.removeChild(strong);//刪

在這裡插入圖片描述 在這裡插入圖片描述 例如先我們要用一個新的標籤hr代替div中的便籤p 在這裡插入圖片描述