您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“javascript的選擇器有哪些”,內容詳細,步驟清晰,細節處理妥當,希望這篇“javascript的選擇器有哪些”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
javascript有選擇器。常用js選擇器有:getElementById()、getElementsByName()、getElementsByTagName()、querySelector()、querySelectorAll()等。
本教程操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。
javascript有選擇器。
JavaScript最常用于獲取或修改HTML元素的內容或值以及應用某些效果。
為此,您必須首先找到元素。而javascript選擇器就是用于匹配元素的,查找方法:
通過ID查找HTML元素
通過標簽名稱查找HTML元素
通過類名稱查找HTML元素
通過CSS選擇器查找HTML元素
通過HTML對象集合查找HTML元素
常用js選擇器有:getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()。
按ID查找HTML元素
您可以使用getElementById()方法根據元素的唯一ID選擇元素。
這是在DOM樹中找到HTML元素的最簡單方法。
以下示例選擇一個具有ID屬性id="msg"的元素:
var x = document.getElementById("msg");
如果找到該元素,則該方法將把該元素作為對象返回。
如果找不到該元素,則myElement將包含null。
通過標簽名稱查找HTML元素
您還可以使用getElementsByTagName()方法通過標記名稱選擇HTML元素。
此方法返回具有指定標簽名稱的文檔中所有元素的類似數組的列表。
示例:選擇所有<p>元素:
var x = document.getElementsByTagName("p");
通過類名稱查找HTML元素
您可以使用該getElementsByClassName()方法選擇具有特定類名稱的所有元素。
此方法返回具有指定類名的文檔中所有元素的類似數組的列表。
此示例返回所有帶有class="demo"的元素的列表:
var x = document.getElementsByClassName("demo");
通過CSS選擇器查找HTML元素
您可以使用該querySelectorAll()方法來選擇與指定的CSS選擇器匹配的元素(ID,類,類型等)。
此方法返回與指定選擇器匹配的所有元素的類似數組的列表。
CSS選擇器提供了一種非常強大有效的選擇文檔中HTML元素的方法。
var x = document.querySelectorAll("div");
通過HTML對象集合查找HTML元素
HTML文檔中最頂層的元素可以直接用作文檔屬性。
例如,可以使用屬性訪問<html>元素document.documentElement。
所述元件可以與被訪問document.body屬性。
var html = document.documentElement; var body = document.body;
注意:如果document.body在標記之前使用(例如,在<head>內),它將返回null而不是body元素。
也可以訪問以下HTML對象(和對象集合):
屬性 | 描述 |
---|---|
document.anchors | 返回所有具有名稱屬性的<a>元素 |
document.applets | 返回所有<applet>元素(在HTML5中已棄用) |
document.baseURI | 返回文檔的絕對基本URI |
document.body | 返回元素 |
document.cookie | 返回文檔的cookie |
document.doctype | 返回文檔的文檔類型 |
document.documentElement | 返回<html>元素 |
document.documentMode | 返回瀏覽器使用的模式 |
document.documentURI | 返回文檔的URI |
document.domain | 返回文檔服務器的域名 |
document.domConfig | 已廢棄;返回DOM配置 |
document.embeds | 返回所有<embed>元素 |
document.forms | 返回所有<form>元素 |
document.head | 返回<head>元素 |
document.images | 返回所有<img>元素 |
document.implementation | 返回DOM實現 |
document.inputEncoding | 返回文檔的編碼(字符集) |
document.lastModified | 返回文檔更新的日期和時間 |
document.links | 返回所有具有href屬性的<area>和<a>元素 |
document.readyState | 返回文檔的(加載中)狀態 |
document.referrer | 返回引用者的URI(鏈接文檔) |
document.scripts | 返回所有<script>元素 |
document.strictErrorChecking | 返回是否強制執行錯誤檢查 |
document.title | 返回<title>元素 |
document.URL | 返回文檔的完整URL |
讀到這里,這篇“javascript的選擇器有哪些”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。