1. 首頁 > 生活百科 > >

JavaScript實例詳解之HTML元素操作

小知識it知識

本篇文章給大家帶來了關于javascript的相關知識 ， 其中主要介紹了關于html元素操作的相關問題 ， 包括了怎么獲取操作的元素、操作元素的內容、元素的屬性以及樣式等等 ， 希望對大家有幫助 。

JavaScript實例詳解之HTML元素操作

文章插圖

相關推薦：javascript教程
一、獲取操作的元素
document對象的方法和屬性document對象提供了一些用于查找元素的方法 ， 利用這些方法可以根據元素的id、name和class屬性以及標簽名稱的方式獲取操作的元素 。
JavaScript實例詳解之HTML元素操作

文章插圖

總結
除了document.getElementById()方法返回的是擁有指定id的元素外 ， 其他方法返回的都是符合要求的一個集合 。 若要獲取其中一個對象 ， 可以通過下標的方式獲取 ， 默認從0開始 。
document對象提供一些屬性 ， 可用于獲取文檔中的元素 。 例如 ， 獲取所有表單標簽、圖片標簽等 。
JavaScript實例詳解之HTML元素操作

文章插圖

JavaScript實例詳解之HTML元素操作

文章插圖

    document對象的body屬性用于返回body元素 。 document對象的documentElement屬性用于返回HTML文檔的根節點html元素 。
注意
通過document對象的方法與document對象的屬性獲取的操作元素表示的都是同一對象 。 如document.getElementsByTagName(‘body’)[0]與document.body全等 。
JavaScript實例詳解之HTML元素操作

文章插圖

HTML5新增的document對象方法
HTML5中為更方便獲取操作的元素 ， 為document對象新增了兩個方法 ， 分別為querySelector()和querySelectorAll() 。
    querySelector()方法用于返回文檔中匹配到指定的元素或CSS選擇器的第1個對象的引用 。 querySelectorAll()方法用于返回文檔中匹配到指定的元素或CSS選擇器的對象集合 。
由于這兩個方法的使用方式相同 ， 下面以document.querySelector()方法為例演示 。
Element對象的方法和屬性
在DOM操作中 ， 元素對象也提供了獲取某個元素內指定元素的方法 ， 常用的兩個方法分別為getElementsByClassName()和getElementsByTagName() 。 它們的使用方式與document對象中同名方法相同 。
JavaScript實例詳解之HTML元素操作

文章插圖

除此之外 ， 元素對象還提供了children屬性用來獲取指定元素的子元素 。 例如 ， 獲取上述示例中ul的子元素 。
JavaScript實例詳解之HTML元素操作

文章插圖

    元素對象的children屬性返回的也是對象集合 ， 若要獲取其中一個對象 ， 也需通過下標的方式獲取 ， 默認從0開始 。 另外 ， document對象中也有children屬性 ， 它的第一個子元素通常是html元素 。
HTMLCollection對象
    HTMLCollection對象：通過document對象或Element對象調用getElementsByClassName()方法、getElementsByTagName()方法、children屬性等返回的對象集 。 NodeList對象：document對象調用getElementsByName()方法在Chrome和FireFox瀏覽器中返回的是NodeList對象 ， IE11返回的是HTMLCollection對象 。
HTMLCollection與NodeList對象的區別：
    HTMLCollection對象用于元素操作 。 NodeList對象用于節點操作 。
【JavaScript實例詳解之HTML元素操作】提示：對于getElementsByClassName()方法、getElementsByTagName()方法和children屬性返回的集合中可以將id和name自動轉換為一個屬性 。
JavaScript實例詳解之HTML元素操作

文章插圖

二、元素內容
JavaScript中 ， 若要對獲取的元素內容進行操作 ， 則可以利用DOM提供的屬性和方法實現 。
JavaScript實例詳解之HTML元素操作

文章插圖

    屬性屬于Element對象 ， 方法屬于document對象 。 innerHTML在使用時會保持編寫的格式以及標簽樣式 。 innerText則是去掉所有格式以及標簽的純文本內容 。 textContent屬性在去掉標簽后會保留文本格式 。
舉個例子
JavaScript實例詳解之HTML元素操作

文章插圖

代碼實現
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素內容操作</title> </head> <body> <p id="box"> The first paragraph... <p> The second paragraph... <a href=https://www.52zixue.com/zhanzhang/webqd/js/04/07/69087/"http://www.example.com">third

推薦閱讀