資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律學如何使用 JavaScript 更改所有 HTML 標籤內的文字
在本文中，我們將執行使用 JavaScript 更改所有 HTML 標籤內文字的任務。讓我們深入瞭解本文，以瞭解更多關於更改所有 HTML 內文字的資訊，但首先，讓我們定義 HTML 標籤。
什麼是 HTML 標籤
HTML 標籤是標記語言的一部分，用於在 HTML 文件中表示 HTML 元素的開始和結束。HTML 標籤是 HTML 元素的一部分，它幫助 Web 瀏覽器將 HTML 文件轉換為網頁。
為了更好地理解如何使用 JavaScript 更改所有 HTML 標籤內的文字。讓我們來看以下示例。
示例
在下面的示例中，我們建立一個簡單的網頁，我們將透過執行指令碼更改文字。
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h2>
Click on the button to change the text
</h2>
<label id = "tutorial">
Welcome to Tutorialspoint
</label>
<br>
<button onclick="changetext()">
Click Here!
</button>
<script>
function changetext() {
var x = document.getElementById("tutorial");
if (x.innerHTML === "Welcome to Tutorialspoint") {
x.innerHTML = "The Best E-way Learning";
} else {
x.innerHTML = "Welcome to Tutorialspoint";
}
}
</script>
</body>
</html>
當指令碼執行時，它將生成一個包含文字和點選按鈕的輸出。如果使用者點選按鈕，文字將被更改，並且網頁上將顯示另一個文字。
使用 replaceWith()
Element.replaceWith() 方法用一組 Node 或字串物件替換其父級子列表中的此 Element。對於 String 物件，將插入等效的 Text 節點。
語法
以下是 replaceWith() 的語法 -
ChildNode.replaceWith(Node);
示例
考慮以下示例，我們使用 replaceWith() 更改標籤內的文字。
<!DOCTYPE html>
<html>
<body>
<h2 id="tutorial">
<span class="quotation">“</span>
Lost in the ave of you
<span class="quotation">”</span>
</h2>
<script>
const changed = document.getElementById('tutorial');
changed.childNodes[2].replaceWith('Welcome');
</script>
</body>
</html>
執行上述指令碼後，輸出視窗將彈出，顯示替換了網頁上指令碼中使用的原始文字的文字。
使用 querySelector()
當提供選擇器或選擇器集時，Document 方法 querySelector() 返回文件中與它們匹配的第一個 Element。如果沒有匹配項，則返回 Null。
語法
以下是 querySelector() 的語法
querySelector(selectors)
示例
執行以下程式碼，我們使用 querySelector() 更改 HTML 標籤中的文字。
<!DOCTYPE html>
<html>
<body>
<h1>Welcome</h1>
<script>
document.querySelector("h1").textContent = 'Tutorialspoint';
</script>
</body>
</html>
當指令碼執行時，它們將生成一個輸出，該輸出包含網頁上已替換為標籤中使用的原始文字的文字。
更新於: 2023年4月20日
1K+ 次檢視
廣告