revision:
The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned..
document.querySelector(selectors)
Parameters:
selectors : a string containing one or more selectors to match. This string must be a valid CSS selector string; if it isn't, a SyntaxError exception is thrown.
const el = document.querySelector(".myclass");
const el = document.querySelector("div.user-panel.main input[name='login']");
const el = document.querySelector(
"div.user-panel:not(.main) input[name='login']"
);
The querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
querySelector(selectors)
Parameters:
selectors : required. a group of selectors to match the descendant elements of the Element baseElement against; this must be valid CSS syntax, or a SyntaxError exception will occur. The first element found which matches this group of selectors is returned. For multiple selectors, separate each selector with a comma.
const el = document.body.querySelector("style[type='text/css'], style:not([type])");
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";
<div>
<div>
<h6>Page Title</h6>
<div id="parent">
<span>Love is Kind.</span>
<span>
<span>Love is Patient.</span>
</span>
<span>
<span>Love is Selfless.</span>
</span>
</div>
</div>
</div>
<style>
span { display: block; margin-bottom: 0.5vw;}
.red span {background-color: red; padding: 0.5vw;}
</style>
<script>
const parentElement = document.querySelector("#parent");
let allChildren = parentElement.querySelectorAll(":scope > span");
allChildren.forEach((item) => item.classList.add("red"));
</script>
inside paragraph inside span inside paragraph
<div>
<div>
<h5>Original content</h5>
<p class="select-1">
inside paragraph
<span>inside span</span>
inside paragraph
</p>
</div>
<div>
<h5>Output</h5>
<div id="output"></div>
</div>
</div>
<script>
const baseElement = document.querySelector(".select-1");
document.getElementById("output").innerHTML = baseElement.querySelector("div span").innerHTML;
</script>
<div>
<div id="div1">Select the first h4 or the first h5
<h4 class="h4">A h4 element</h4>
<h5 class="h5">A h5 element</h5>
</div>
<div id="div2">Select the first h5 or the first h6
<h6 class="h6">A h6 element</h6>
<h5 class="h5">A h5 element</h5>
</div>
</div>
<script>
document.getElementById("div1").querySelector(".h4, .h5").style.backgroundColor = "red";
document.getElementById("div2").querySelector(".h5, .h6").style.backgroundColor = "green";
</script>
A paragraph with class="example" in div.
Click the button to change the text of the first element with class="example" in div.
<div>
<div id="DIV-A">
<h4 class="example">A heading with class="example" in div.</h4>
<p class="example">A paragraph with class="example" in div.</p>
</div>
<p>Click the button to change the text of the first element with class="example" in div.</p>
<button onclick="selectFunction()">change heading text</button>
<button onclick="selectFunc()">change p element text it</button>
</div>
<style>
#DIV-A {border: 1px solid black;}
</style>
<script>
function selectFunction() {
var x = document.getElementById("DIV-A");
x.querySelector(".example").innerHTML = "Hello World!";
}
function selectFunc() {
var x = document.getElementById("DIV-A");
x.querySelector("p").innerHTML = "Hello World!";
}
</script>
</pre>