六角學院｜DOM

DOM

HTML 基本架構 & 語法

由 <html> 與 </html> 標籤來告知瀏覽器文檔的起始點和結束點。
文檔的頭部由 <head> 標籤定義，主體則是 <body> 定義。
一個簡單但完整的範例如下:
<!DOCTYPE html>
<html lang="zh">
    <head>
        <title>頁面標題</title>
    </head>
    <body>
        <p>這是一個簡單的 HTML 範本</p>
    </body>
</html>
如你所見，<html> 元素包圍住文件其餘的部分，<body> 元素則包圍住頁面內容。
這種結構可以想像成樹狀結構，這個階層的結構被稱為 DOM ( 文件物件模型 )。
-JS也可以藉此操控網頁元素

querySelector - 選擇單一元素
寫法一、
反過來,當要顯示標籤連結時,選用.getAttribute/textContent/innerHTML

var el3 = document.querySelector('.titleClass')
.getAttribute('href')
console.log(el3);

//www.yahoo.com.tw
插入HTML標籤的兩種方法:
1. innerHTML
-方法:組完字串後,傳進語法進行渲染.
-優點:效能快.
-缺點:資安風險,要確保來源沒問題.
2. creatElement
-方法:以DOM節點來處理.
-優點:安全性高.
-缺點:效能差.

 innerHTML
在HTML中,使用的各個的網頁結構都算是一個節點
＊節點:今天內容是HTML標籤元素element,下方會有一個文字的節點(text),
             故今日textContemt只是單純去新增一個文字的節點,故今日欲將element標籤拉進去
             時使用innerHTML
範例:
<html>
<body>
<div id="main"></div>
<script src="js/all75.js"></script>
</body>
<JS>
var el = document.getElementById('main')
el.innerHTML = '<h1>1234</h1>'
<chrome>
1234





innerHTML會把內容給清空,去跑你下的指令.
createElement 寫法-createElement 增加一個標籤元素

 *appendchild (增加子結點) : 可動態掛在裡面元素的最後面位置 ,動態的增加一個子節點.*與for的應用:
<html>
<body>
<h1>每個農夫名字</h1>
<ul class="list"></ul>
<script src="js/all79.js"></script>
</body>
<JS>
var farms = [
{
farmer:'卡斯伯',
dogs:['張姆士','龐的'],
},
{
farmer:'查理',
dogs:['皮皮'],
}
];

var el = document.querySelector('.list');
var farmLen = farms.length;
for(var i=0;i<farmLen;i++){
var str = document.createElement('li');
str.textContent = farms[i].farmer;
el.appendChild(str);
}





<JS>
<body>
<h1>每個農夫名字</h1>
<ul class="list">
<li>農夫一</li>
<li>農夫二</li>
</ul>
<script src="js/all79.js"></script>
</body>








比較
-innerHTML是到你指定的段落,把原先刪除,再將你寫好的指定字詞塞入.
-innerHTML有資安風險,尤其是表單的使用必須要尤其小心,以避免駭客將破壞資料送入資料  
 庫.術語:XSS 跨網站指令碼注意事項（Cross-site scripting）





































评论

发表评论

热门博文