溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下document.querySelector()方法如何使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
HTML 的DOM querySelector()方法可以不需要額外的jQuery等支持，也可以方便的獲取DOM元素，語法跟jQuery類似。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="contatiner">huang</div>
<script type="text/javascript">
var destination = document.querySelector("#contatiner");
console.log(destination);
</script>
</body>
</html>
注意：
querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素，請使用 querySelectorAll() 方法替代。
參數類型可以為如下：
指定一個或多個匹配元素的 CSS 選擇器。 可以使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素。
對于多個選擇器，使用逗號隔開，返回一個匹配的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>張露露，我愛你</p>
<p>黃寶康，我也愛你</p>
<script type="text/javascript">
var node = document.querySelector("p");
console.log(node);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span class="lover">張露露</span>
<span class="lover">黃寶康</span>
<script type="text/javascript">
var node = document.querySelector(".lover");
console.log(node);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span class="lover">張露露</span>
<p class="lover">黃寶康</p>
<script type="text/javascript">
var node = document.querySelector("p.lover");
console.log(node);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<a href="https://www.taobao.com" target="_blank">淘寶一下</a>
<script type="text/javascript">
var node = document.querySelector("a[target]");
console.log(node);
</script>
</body>
</html>
以下代碼將為文檔的第一個 <h3> 元素添加背景顏色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>二級標題</h3>
<h4>三級標題</h4>
<script type="text/javascript">
document.querySelector("h3,h4").style.backgroundColor = "blue";
</script>
</body>
</html>
但是，如果文檔中 <h4> 元素位于 <h3> 元素之前，<h4> 元素將會被設置指定的背景顏色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h4>三級標題</h4>
<h3>二級標題</h3>
<script type="text/javascript">
document.querySelector("h3,h4").style.backgroundColor = "blue";
</script>
</body>
</html>
以上就是“document.querySelector()方法如何使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
