javascript有選擇器嗎 - tw511教學網

javascript有選擇器。常用js選擇器有：getElementById()、getElementsByName()、getElementsByTagName()、querySelector()、querySelectorAll()等。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

javascript有選擇器。

JavaScript最常用於獲取或修改HTML元素的內容或值以及應用某些效果。

為此，您必須首先找到元素。而javascript選擇器就是用於匹配元素的，查詢方法：

常用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有選擇器嗎的詳細內容，更多請關注TW511.COM其它相關文章！