好家伙，我回來了，

本篇為《JS高級程式設計》第十四章“DOM編程”學習筆記

1.DOM編程

我們知道DOM是HTML檔案的編程介面，

我們可以通過HTML代碼實作DOM操作，

也同樣能夠通過JavaScript實作DOM操作，

2.JS操作DOM

我們來簡單的舉個例子：

隨便開一個空白的html頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>  
    <div>
        <h1>來試試使用js實作dom操作吧
        </h1>
    </div>
</body>
</html>

效果如下：

此處我們直接在html元素中進行操作，在頁面中添加了一行標題（

　 <div>
        <h1>來試試使用js實作dom操作吧
        </h1>
    </div>

）

接下來我們使用JS進行相同的DOM操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>  
    <!-- <div>
        <h1>來試試使用js實作dom操作吧
        </h1>
    </div> -->
</body>
<script>
    //創建div元素
    let div =document.createElement('div')
    //創建h1元素
    let h1 =document.createElement('h1')
    //創建文本元素
    let text1 = document.createTextNode('來試試使用js實作dom操作吧')
    //將文本元素添加到h1中
    h1.appendChild(text1)
    //將h1添加到div元素中
    div.appendChild(h1);
    //將該div元素掛載到body下
    document.body.appendChild(div);
</script>
</html>

我們實作了同樣的效果

3.動態腳本

<script>元素用于向網頁中插入 JavaScript 代碼，可以是 src 屬性包含的外部檔案，也可以是作為該
元素內容的源代碼，動態腳本就是在頁面初始加載時不存在，之后又通過 DOM 包含的腳本，與對應的
HTML 元素一樣，有兩種方式通過<script>動態為網頁添加腳本：引入外部檔案和直接插入源代碼，

　　3.1.進行動態加載

<script src=https://www.cnblogs.com/FatTiger4399/p/"plane.js"></script>

　　3.2.通過DOM編程創建這個節點

let script = document.createElement("script"); 
script.src = "plane.js"; 
document.body.appendChild(script);

(DOM編程農夫三拳:1.新建節點,2.某些操作,3.掛載到父節點上)

　　我們把上述程序抽象成一個函式

function loadScript(url) { 
 let script = document.createElement("script"); 
 script.src = url; 
 document.body.appendChild(script); 
} 

loadScript("plane.js");
//外部檔案名作為引數

(便于使用)

　　3.3.script的text屬性

現在就有人會想了,如果我有一大串方法或者函式,該怎么處理:

<script> 
 function dosomething() { 
 alert("hi"); 
 }
dosomething(); 
</script>

js開發者早就替我們想好了,<script>元素上有一個 text 屬性，可以用來添加 JavaScript 代碼

　　let script = document.createElement("script");
    script.text = "function dosomething(){alert('hi');} dosomething()";
    document.body.appendChild(script);

4.動態樣式

CSS 樣式在 HTML 頁面中可以通過兩個元素加載，<link>元素用于包含 CSS 外部檔案，而<style>
元素用于添加嵌入樣式，

4.1.<link>匯入

<link rel="stylesheet" type="text/css" href=https://www.cnblogs.com/FatTiger4399/p/"styles.css">

DOM編程:

function loadStyles(url){ 
 let link = document.createElement("link"); 
 link.rel = "stylesheet"; 
 link.type = "text/css"; 
 link.href = url; 
 let head = document.getElementsByTagName("head")[0]; 
 head.appendChild(link); 
}

4.2.<style>元素

<style type="text/css"> 
body { 
 background-color: red; 
} 
</style>

DOM編程:

let style = document.createElement("style"); 
style.type = "text/css"; 
style.appendChild(document.createTextNode("body{background-color:red}")); 
let head = document.getElementsByTagName("head")[0]; 
head.appendChild(style);

5.DOM操作表格:

HTML 中最復雜的結構之一,通常要涉及大量標簽,其相應DOM操作也十分復雜

<table border="1" width="100%"> 
 　　<tbody> 
 　　　　<tr> 
 　　　　　　<td>Cell 1,1</td> 
　　　　　　 <td>Cell 2,1</td> 
　　　　 </tr> 
 　　　　<tr> 
 　　　　　　<td>Cell 1,2</td> 
 　　　　　　<td>Cell 2,2</td> 
　　　　 </tr> 
 　　</tbody> 
</table>

以這個表格為例

// 創建表格
let table = document.createElement("table"); 
table.border = 1; 
table.width = "100%"; 
// 創建表體
let tbody = document.createElement("tbody"); 
table.appendChild(tbody); 
// 創建第一行
let row1 = document.createElement("tr"); 
tbody.appendChild(row1); 
let cell1_1 = document.createElement("td"); 
cell1_1.appendChild(document.createTextNode("Cell 1,1")); 
row1.appendChild(cell1_1); 
let cell2_1 = document.createElement("td"); 
cell2_1.appendChild(document.createTextNode("Cell 2,1")); 
row1.appendChild(cell2_1); 
// 創建第二行
let row2 = document.createElement("tr"); 
tbody.appendChild(row2); 
let cell1_2 = document.createElement("td"); 
cell1_2.appendChild(document.createTextNode("Cell 1,2")); 
row2.appendChild(cell1_2); 
let cell2_2= document.createElement("td"); 
cell2_2.appendChild(document.createTextNode("Cell 2,2")); 
row2.appendChild(cell2_2); 
// 把表格添加到檔案主體
document.body.appendChild(table);

(看的眼都花了,八個標簽不停套娃,DOM操作十分復雜)

于是,為了方便創建表格，HTML DOM 給、和元素添加了一些屬性和方法，

<table>元素添加了以下屬性和方法：
? caption，指向<caption>元素的指標（如果存在）；
? tBodies，包含<tbody>元素的 HTMLCollection；
? tFoot，指向<tfoot>元素（如果存在）；
? tHead，指向<thead>元素（如果存在）；
? rows，包含表示所有行的 HTMLCollection；
? createTHead()，創建<thead>元素，放到表格中，回傳參考；
? createTFoot()，創建<tfoot>元素，放到表格中，回傳參考；
? createCaption()，創建<caption>元素，放到表格中，回傳參考；
? deleteTHead()，洗掉<thead>元素；
? deleteTFoot()，洗掉<tfoot>元素；
? deleteCaption()，洗掉<caption>元素；
? deleteRow(pos)，洗掉給定位置的行；
? insertRow(pos)，在行集合中給定位置插入一行，
<tbody>元素添加了以下屬性和方法：
? rows，包含<tbody>元素中所有行的 HTMLCollection；
? deleteRow(pos)，洗掉給定位置的行；
? insertRow(pos)，在行集合中給定位置插入一行，回傳該行的參考，
<tr>元素添加了以下屬性和方法：
? cells，包含<tr>元素所有表元的 HTMLCollection；
? deleteCell(pos)，洗掉給定位置的表元；
? insertCell(pos)，在表元集合給定位置插入一個表元，回傳該表元的參考

// 創建表格
let table = document.createElement("table"); 
table.border = 1; 
table.width = "100%"; 
// 創建表體
let tbody = document.createElement("tbody"); 
table.appendChild(tbody); 

// 創建第一行
tbody.insertRow(0); 
//插入單元
tbody.rows[0].insertCell(0); 
//單元插入元素
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1")); 
tbody.rows[0].insertCell(1); 
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1")); 
// 創建第二行
tbody.insertRow(1); 
tbody.rows[1].insertCell(0); 
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2")); 
tbody.rows[1].insertCell(1); 
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2")); 
// 把表格添加到檔案主體
document.body.appendChild(table);

這樣一看,整個表格的DOM操作變得十分明了，且邏輯清晰

6.小結

感覺DOM操作是整個JS學習線路上非常重要的一環,這個感覺重要到就屬于是別人默認你會的那種,還是得記一記.

比如某一天你要給別人寫包了,被人給你一個div,然后你不會操作,就很尷尬.所以還是得學

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544486.html

標籤：JavaScript

上一篇：js獲取blob資料流中攜帶的msg訊息

下一篇：立即執行函式在前端國際化方案中的應用

第120篇: DOM編程(常用操作、動態腳本、樣式及動態表格)

1.DOM編程

2.JS操作DOM

3.動態腳本

3.1.進行動態加載

3.2.通過DOM編程創建這個節點

4.動態樣式

4.1.<link>匯入

4.2.<style>元素

5.DOM操作表格:

6.小結

　　3.1.進行動態加載

　　3.2.通過DOM編程創建這個節點