學習日誌14-DOM練習2

第 11 屆 iThome 鐵人賽

DAY 14

自我挑戰組

JavaScript學習日誌系列第 14 篇

11th鐵人賽

古德瑞

2019-09-29 23:29:25

1610 瀏覽

分享至

用JavaScript操控Html的方法

1. innerHTML

方法 : 組完字串後，傳進語法進行渲染。
優點 : 清空在上，效能快。
缺點 : 資安危險，要確保來源，不然容易發生xss攻擊。

2. createElement

方法 : 用 DOM 節點來處理。
優點 : 安全性高。
缺點 : 效能差。

innerHTML練習

使用innerHTML時，會將原本DOM的內容清空取代
ex.將文字替換成連結文字
1.建立變數googleSite
2.利用querySelector取得id#google的DOM
3.利用innerHTML將#google的html寫入<a href="http://www.google.com/">前往google網站</a>'

//html
<!DOCTYPE html>
<html>
    <body>
        <div id="google">google</div>
    </body>
</html>

//javaScript
var googleSite = document.querySelector('#google');
google.innerHTML = '<a href="http://www.google.com/">前往google網站</a>';

//innerHTML渲染完的html
<!DOCTYPE html>
<html>
    <body>
        <div id="google">
            <a href="http://www.google.com/">前往google網站</a>
        </div>
    </body>
</html>

createElement練習

createElement是用appendChild，以節點方式新增上去，並不會覆蓋取代掉原本內容，在原本內容下方建立。
ex.新增連結文字
1.建立變數 linkElement，並等於 document.createElement("a"); 建立一個 a節點
2.將 linkElement 利用 setAttribute 增加屬性 href，並等於www.facebook.com
3.將 linkElement 利用 textContent 設定文字內容為"前往Facbook"
4.建立變數 socialElement，利用 querySelector 取得id為 link 的DOM
5.使用 appendChild 將 linkElement 附加在 socialElement 裡面

//html
<!DOCTYPE html>
<html>
    <body>
        <div id="linkName">FACEBOOK</div>
        <div id="link"></div>
    </body>
</html>

//javaScript
var linkElement = document.createElement("a");
linkElement.setAttribute("href","www.facebook.com");
linkElement.textContent = "前往Facebook";
var socialElement = document.querySelector("#link");
socialElement.appendChild(linkElement);

//innerHTML渲染完的html
<!DOCTYPE html>
<html>
    <body>
        <div id="linkName">FACEBOOK</div>
        <div id="link">
            <a href="www.facebook.com">前往Facebook</a>
        </div>
    </body>
</html>