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

来源:https://www.cnblogs.com/FatTiger4399/archive/2023/02/20/17138374.html
-Advertisement-
Play Games

好家伙，我回來了， 本篇為《JS高級程式設計》第十四章“DOM編程”學習筆記 1.DOM編程 我們知道DOM是HTML文檔的編程介面， 我們可以通過HTML代碼實現DOM操作， 也同樣能夠通過JavaScript實現DOM操作。 2.JS操作DOM 我們來簡單的舉個例子： 隨便開一個空白的html頁 ...


好家伙，我回來了，

本篇為《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="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="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,然後你不會操作,就很尷尬.所以還是得學


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • TiDB資料庫在汽車之家的應用與實踐
    本文介紹了TiDB資料庫特性及在之家的發展歷程，典型業務應用場景，TiDB具有相容MySQL協議，易水平擴展、高可用、強一致，HTAP等特性，在之家多個重要業務得到應用。另外文章還介紹了之家TIDB自動化運維建設情況及應用實踐遇到的問題及解決。 未來之家TiDB計劃繼續進行TiDB運維體系建設，並... ...
  • 防抖與節流：教你傾聽時插話的技巧
    本文內容主要翻譯自issue 中國外大佬對防抖與節流的解釋, 後面補充了自己的理解和總結。 什麼是防抖與節流 防抖和節流是處理“過於頻繁”發生的事情的常用技術。想象一下，你和朋友見面，朋友正在給你講一個故事，但他們說話時很難停下來。假設您想在可能的情況下不打斷他們滿足他們講故事的興緻，同時還要回應他 ...
  • RxJava 異常時堆棧顯示不正確？解決方法都在這裡
    本文首發我的博客，github 地址 大家好，我是徐公，今天為大家帶來的是 RxJava 的一個血案，一行代碼 return null 引發的。 前陣子，組內的同事反饋說 RxJava 在 debug 包 crash 了，捕獲到的異常信息不全。（即我們捕獲到的堆棧沒有包含我們自己代碼，都是一些系統或 ...
  • 【FAQ】集成分析服務的常見問題及解決方案
    常見問題一：如何驗證Analytics是否上報/接入成功？以及關鍵日誌含義是什麼？ 在初始化Analytics SDK前添加SDK日誌開關如下： HiAnalyticsTools.enableLog (); 2.初始化SDK代碼如下： HiAnalyticsInstance instance = H ...
  • Android 關於Dialog在全屏彈出會顯示狀態欄和導航欄的問題解決
    項目的奇葩需求，需要彈出Dialog不要顯示狀態欄和導航欄，記錄一下解決方法 原文地址：Android 關於Dialog在全屏彈出會顯示狀態欄和導航欄的問題解決 Stars-one的雜貨小窩 說明 Android的原生的Dialog有個問題，如果你的Activity設置為全屏的，然後顯示Dialog ...
  • 立即執行函數在前端國際化方案中的應用
    說起國際化，開發過跨區域網頁的小伙伴應該都遇到過。我們的網頁需要配置多套語言，方便用戶進行切換。 本文就以 React 為例，介紹其中一種實現方案，並學習一下其中的知識點。 一種國際化方案 方案是這樣的： 為多套語言創建對應的 object，並 export 出去 通過 js 立即執行函數，載入選定 ...
  • react 高效高質量搭建後臺系統 系列 —— 結尾
    其他章節請看： react 高效高質量搭建後臺系統 系列 尾篇 本篇主要介紹表單查詢、表單驗證、通知（WebSocket）、自動構建。最後附上 myspug 項目源碼。 項目最終效果： 表單查詢 需求：給角色管理頁面增加表格查詢功能，通過輸入角色名稱，點擊查詢，從後端檢索出相應的數據。 效果如下： ...
  • Vue學習隨筆（一）Vue的引入
    前言 以往零零散散使用過一些Vue的語法，最近才剛剛系統接觸Vue，現在是剛剛入門的狀態，故在這裡做一個記錄和梳理，歡迎大家一起學習交流，有錯誤的地方也歡迎大家指正。 正篇 夢開始的地方 在寫之前我想先在這裡貼出Vue的一個官方的（應該是）學習教學https://cn.vuejs.org/guide ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類