JavaScript獲取頁面元素的常用方法詳解
更新時間:2019年09月28日 16:05:32 作者:Mr小zhou
這篇文章主要介紹了JavaScript獲取頁面元素的常用方法詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
1、通過標簽獲取元素,返回一個數(shù)組
var li = document.getElementsByTagName('li');//標簽獲取元素 li[0].innerHTML;// 查看獲取元素的內(nèi)容 li[0].innerHTML = "content";//修改獲取到標簽中的內(nèi)容
2、通過id獲取頁面元素
var header = document.getElementById("header");//id獲取元素
3、通過class名字獲取頁面元素
var list = document.getElementsByClassName('list');//返回一個數(shù)組,通過下標訪問文本
4、通過CSS選擇符方式獲取頁面元素
//querySelector:返回符合條件的第一個 var str = document.querySelector('li'); var str1 = document.querySelectorAll('li');//全部返回,每個li都是一個對象
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>JavaScript獲取頁面的常用方法</title> <script> // 1、通過標簽獲取元素,返回一個數(shù)組 var li = document.getElementsByTagName('li'); //2、通過id獲取頁面元素 var header = document.getElementById("header"); // 3、通過class名字獲取頁面元素 var list = document.getElementsByClassName('list');//返回一個數(shù)組,通過下標訪問文本 // 4、通過CSS選擇符方式獲取頁面元素 //querySelector:返回符合條件的第一個 var str = document.querySelector('li'); // querySelectorAll:返回符合條件的每一個 var str1 = document.querySelectorAll('li'); </script> </head> <body> <p id="header">JavaScript學(xué)習(xí)</p> <ul class="list"> <li>HTML</li> <li>jQuery</li> <li>JavaScript</li> </ul> <ul class="list"> <li>HTML</li> <li>jQuery</li> <li>JavaScript</li> </ul> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript設(shè)計模式之中介者模式Mediator
這篇文章主要介紹了javascript設(shè)計模式之中介者模式Mediator,需要的朋友可以參考下2014-12-12JavaScript變量作用域_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了JavaScript變量作用域,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06讓瀏覽器非阻塞加載javascript的幾種方法小結(jié)
通常大多數(shù)瀏覽器是并行下載資源的,但由于外部腳本的特殊性例如通過腳本改變文檔的DOM結(jié)構(gòu)、腳本之間的存在依賴關(guān)系、使用document.write 向頁面輸出HTML等。2011-04-04JavaScript實現(xiàn)文件下載的14種方法總結(jié)大全
在JavaScript中實現(xiàn)文件下載的功能可以通過多種方式實現(xiàn),這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)文件下載的14種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07