javascript學習之節點的類型（元素、屬性、文

javascript學習之節點的類型（元素、屬性、文本），改變文本內容

邊學習javascript一邊跟大家分享成果，喜歡就關注我吧，大家一起學習！

今天分享常用的節點的類型

常用的節點類型分別有：元素節點、屬性節點、文本節點

1、元素節點

源碼

運行結果

常用類型對照：返回值1 表示元素節點

返回值2 表示屬性節點

返回值3 表示文本節點

這幾個為比較常用的

結果解釋：輸出1表示的是該節點為元素節點，輸出p表示該元素為p標簽，第三個下面會有講到

2屬性節點

源碼

運行結果

結果解讀：輸出2表示是屬性節點，輸出“name”表示的是屬性的名字，輸出“hello”表示的是屬性的值

3文本節點

源碼

運行結果

結果解讀：輸出3表示的是文本節點，輸出text表示的是類型，最后一個就是文本節點的內容。

4改變文本節點的內容

方法一：

運行結果

方法二：

運行結果

以上兩種方法均可動態改變顯示的內容，但是不改變html本來的內容

還有許多方法如：document.write,appendChild(用來追加到文檔的)

javascript學習結果分享給大家，如有錯誤歡迎指正，大家喜歡歡迎轉發收藏，歡迎大家一起在評論區交流

么是文本節點

在HTML文檔中，文本節點是一種特殊的dom節點，它包含文本內容，沒有任何標記或屬性。

<p>這是一段文本節點</p>

在上面的代碼中，<p>元素包含了文本內容"這是一段文本節點"，這段文本就是文本節點。

修改文本節點

JavaScript中提供了多種方法修改文本節點的內容，其中最常用的方法是使用textContent和innerText。

textContent返回一個元素的所有子節點的文本內容，包括隱藏的元素，而 innerText只返回可視元素的文本內容。

const myTextElement=document.querySelector('p');  // 獲取元素節點
// 修改文本節點內容
myTextElement.textContent='這是新的文本內容';

使用innerHTML屬性也可以修改文本節點的內容，但應該注意的是，設置innerHTML屬性可能會帶來安全風險，因為它可以包含惡意代碼。

myTextElement.innerHTML='這是新的文本內容';  // 修改文本節點內容

另外，還可以通過插入文本節點方式，向現有的文本節點添加新的內容。例如：

const myTextElement=document.querySelector('p');  // 獲取文本節點
const newText=document.createTextNode('新的文本內容');  // 創建一個新的文本節點
myTextElement.appendChild(newText);  // 將新的文本節點添加到已有文本節點后面

獲取元素節點的文本內容

在JavaScript中獲取元素節點的文本內容，我們可以使用以下代碼：

const myTextElement=document.querySelector('p');  // 獲取元素節點
const textContent=myTextElement.textContent;  // 獲取文本內容
console.log(textContent);  // 打印輸出：這是一段文本節點

文本節點的屬性和方法總結

JavaScript提供了多種方法操作文本節點的屬性和方法，其中最常用的是textContent和innerText。

textContent - 獲取或設置元素節點文本內容，包括所有子節點文本；會保留換行符和空格等文本格式
innerText - 獲取或設置元素節點的文本內容，但不包括所有的節點；不會保留換行符和空格等文本格式，會自動去除文本首尾的空白字符
append()方法 - 將新的文本節點添加到已有文本節點后面

、document.write 創建

document.write() 方法可向文檔寫入 HTML 表達式或 JavaScript 代碼。

html和css代碼

 <input type="button" value="創建一個p" id="btn"/>

JavaScript代碼

在線咨詢

上一篇：PHP使用CURL詳解
下一篇：小程序，跳轉頁面的兩種方式及其頁面傳參數

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

javascript學習之節點的類型（元素、屬性、文

么是文本節點

修改文本節點

獲取元素節點的文本內容

文本節點的屬性和方法總結

您的項目需求