1. 動態腳本

使用<script>元素可以向頁面中插入JavaScript代碼，一種方式是通過src屬性包含外部文件，另一種方式是用這個元素本身來包含代碼。動態腳本指在頁面加載時不存在，但將來某時通過修改DOM動態添加的腳本。

動態加載的外部JavaScript文本能夠立即執行，例如：

<script?type="text/javascript"?&#115;rc="test.js"></script>

創建這個節點的DOM代碼如下：

var?script?=?document.createElement("Script"); script.type?=?"text/javascript"; script.&#115;rc?=?"test.js"; document.body.appendChild(script);

另一種指定JavaScript代碼的方式是行內方式，例如：

<script?type="text/javascript">function?myfunc()?{alert("Hello?World!");} </script>

創建的DOM代碼如下：

var?script?=?document.createElement("script"); script.type?=?"text/javascript"; script.text?=?"function?myfunc(){alert('Hello?World!');}"; document.body.appendChild(script);

2. 動態樣式

把CSS樣式包含到HTML頁面中的元素有兩個。其中<link>元素用于包含來自外部的文件，而<style>元素用于指定嵌入的樣式。與動態腳本類似，動態樣式指在頁面剛加載時不存在的樣式，是在頁面加載完成后動態添加到頁面中的。

例如：

<link?rel="stylesheet"?type="text/css"?&#104;ref="test.css">

使用DOM代碼可以動態創建出這個元素，如下所示：

var?link?=?document.createElement("link"); link.rel?=?"stylesheet"; link.type?=?"text/css"; link.&#104;ref?=?"test.css"; var?head?=?document.getElementsByTagName("head")[0]; head.appendChild(link);

另一種定義樣式的方式是使用<style>元素來包含CSS，例如：

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

對應的創建的DOM代碼如下：

var?style?=?document.createElement("style"); style.type?=?"text/css"; try?{style.appendChild(document.createTextNode("body{background-color:?red}")); } catch?(ex)?{style.styleSheet.cssText?=?"body{background-color:?red}"; } var?head?=?document.getElementsByTagName("head")[0]; head.appendChild(style);

3. 操作表格

為了方便構建表格，HTML DOM還為<table>、<tbody>和<tr>元素添加了一些屬性和方法。

為<table>元素添加的屬性和方法如下：

1) caption: 保存對<caption>元素的指針。

2) tBodies: 是一個<tbody>元素的HTMLCollection。

3) tFoot: 保存對<tfoot>元素的指針。

4) tHead: 保存對<thead>元素的指針。

5) rows: 表格中所有行的HTMLCollection。

6) createTHead(): 創建<thead>元素，返回引用。

7) createTFoot(): 創建<tfoot>元素，返回引用。

8) createCaption(): 創建<caption>元素，返回引用。

9) deleteTHead(): 刪除<thead>元素。

10) deleteTFoot(): 刪除<tfoot>元素。

11) deleteCaption(): 刪除<caption>元素。

12) deleteRow(pos): 刪除指定位置的行。

13) insertRow(pos): 向rows集合中的指定位置插入一行。

為<tbody>添加的屬性和方法如下：

1) rows: 保存<tbody>元素中行的HTMLCollection。

2) deleteRow(pos): 刪除指定位置的行。

3) insertRow(pos): 向rows集合中的指定位置插入一行。

為<tr>元素添加的屬性和方法如下：

1) cells: 保存<tr>元素中單元格的HTMLCollection。

2) deleteCell(pos): 刪除指定位置的單元格。

3) insertCell(pos): 向cells集合中的指定位置插入一個單元格。

轉載于:https://blog.51cto.com/hanviseas/1008565

總結

以上是生活随笔為你收集整理的[JavaScript] DOM操作技术的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。