<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Advanced selectors of the DOM element in JavaScript | </title>
		
		<link rel="stylesheet" href="/tore/@/fonts/listΣ.css?v=1">
<link rel="stylesheet" href="/tore/layd/deff/&/aefb44b7dac371a3860e9079298a950e.ructΣ.css">
<link rel="stylesheet" href="/tore/&/2290bf7aeadc4261337d6f570a3cf0c5.apprΣ.css">

<script src="/tore/&/77748427269d1c81490f5acb6ce46fc1.apprΣ.js" defer></script>


<meta name="yandex-verification" content="00eb45b7559e5c68">
<meta name="google-site-verification" content="Af0TM2OrwIEtjoQXxYz2-1C-21E1m7DB23_kWpE9sLg">
<meta name="viewport" content="width=device-width, initial-scale=1.0">		
		<meta name="description" content="In this lesson, we will learn how to get advanced selectors of the DOM element in JavaScript.">
		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
	</head>
	<body id="top" data-gq="N">
		<div data-r="ruct/wrap">
			<header>
				<div data-r="ruct/topp">
	<div data-r="topp/left">
		<div data-w="nict/logo">
	<img data-e="img" data-x src="" alt="">
</div>	</div>
	<div data-r="topp/righ">
		offline version v3	</div>
	<div data-r="topp/cent">
		<br><br>	</div>
</div>								
				<div data-r="ruct/navi">
					<div data-w="nict/over">
			<span data-e="hash" data-x>⊗jsPmDmEGAS</span>
				<span data-e="lofo" data-x>340 of 502</span>
				<a href="/en/javascript/book/prime/" data-e="link" data-x>menu</a>
	</div>					<nav data-w="nict/mainmenu">
	<section data-e="main" data-x data-gm-acte="T">
		<span data-q-href="/en/markup/" data-e="open" data-x data-m-targ="markup">Markup</span>
		<span data-q-href="/en/javascript/" data-e="open" data-x data-m-targ="javascript">JavaScript</span>
	</section>
	
	<section data-e="subb" data-x data-gm-acte="F" data-m-tabb="markup">
		<a href="/en/markup/manual/html/">HTML manual</a>
		<a href="/en/markup/manual/css/">CSS manual</a>
	</section>
	
	<section data-e="subb" data-x data-gm-acte="F" data-m-tabb="javascript">
		<a href="/en/javascript/book/prime/">Prime book</a>
		<a href="/en/javascript/book/practice/">Practice book</a>
		<a href="/en/javascript/book/supreme/">Supreme book</a>
		<a href="/en/javascript/manual/">Manual</a>
	</section>
</nav>									</div>
			</header>
			<main>
				<div data-w="nict/hett">
	<h1>Advanced selectors of the DOM element in JavaScript</h1>
</div>				<div data-p="cont/pane">
<p>
	Let's do something more complicated. Let, for 
	example, we have the following HTML code:
</p>
<div data-p="bock/pane">
	<code data-w="bock/code" data-lo="high" data-m-lang="html">&lt;div id="parent"&gt;
	&lt;input&gt;
&lt;/div&gt;</code>
</div>
<p>
	Let's get a reference to the input located 
	inside the block <code data-gs="comd/z" data-x>#parent</code>:
</p>
<div data-p="bock/pane">
	<code data-w="bock/code" data-lo="high" data-m-lang="javascript">let elem = document.querySelector('#parent input');
console.log(elem);</code>
</div>
<p>
	As you can see, we got our input using the 
	<code data-gs="comd/z" data-x>#parent input</code> selector. In fact, all 
	inputs that are in <code data-gs="comd/z" data-x>#parent</code> match 
	this CSS selector.
</p>
<p>
	Let, for example, we have two such inputs:
</p>
<div data-p="bock/pane">
	<code data-w="bock/code" data-lo="high" data-m-lang="html">&lt;div id="parent"&gt;
	&lt;input value="1"&gt;
	&lt;input value="2"&gt;
&lt;/div&gt;</code>
</div>
<p>
	Then, if we write the selector <code data-gs="comd/z" data-x>#parent input</code> 
	in the CSS code, it will affect both of our inputs:
</p>
<div data-p="bock/pane">
	<code data-w="bock/code" data-lo="high" data-m-lang="css">#parent input {
	color: red;
}</code>
</div>
<p>
	The <code data-gs="comd/c" data-x>querySelector</code> method, however, does 
	not work that way. It always gets only one 
	element - the first one that matches the 
	specified selector. Let's look at an example. 
	Let's say we have inputs with class <code data-gs="comd/z" data-x>elem</code>:
</p>
<div data-p="bock/pane">
	<code data-w="bock/code" data-lo="high" data-m-lang="html">&lt;input class="elem"&gt;
&lt;input class="elem"&gt;</code>
</div>
<p>
	Let's get the first of these inputs:
</p>
<div data-p="bock/pane">
	<code data-w="bock/code" data-lo="high" data-m-lang="javascript">let elem = document.querySelector('.elem');
console.log(elem); // here will be the first input</code>
</div>
<div data-w="cont/task">
	<p>
		Given the following HTML:
	</p>
	<div data-p="bock/pane">
		<code data-w="bock/code" data-lo="high" data-m-lang="html">&lt;div id="block"&gt;
	&lt;p&gt;1&lt;/p&gt;
	&lt;p&gt;2&lt;/p&gt;
&lt;/div&gt;</code>
	</div>
	<p>
		Get a reference to the first paragraph 
		from a div with <code data-gs="comd/c" data-x>id</code> equal to 
		<code data-gs="comd/z" data-x>block</code>.
	</p>
</div>
<div data-w="cont/task">
	<p>
		Given the following HTML:
	</p>
	<div data-p="bock/pane">
		<code data-w="bock/code" data-lo="high" data-m-lang="html">&lt;div class="block"&gt;
	&lt;p&gt;1&lt;/p&gt;
	&lt;p&gt;2&lt;/p&gt;
&lt;/div&gt;</code>
	</div>
	<p>
		Get a reference to the first paragraph 
		from a div with the class <code data-gs="comd/z" data-x>block</code>.
	</p>
</div>
<div data-w="cont/task">
	<p>
		Given the following HTML:
	</p>
	<div data-p="bock/pane">
		<code data-w="bock/code" data-lo="high" data-m-lang="html">&lt;p class="www"&gt;text&lt;/p&gt;
&lt;p class="www"&gt;text&lt;/p&gt;</code>
	</div>
	<p>
		Get a reference to the first paragraph 
		with the class <code data-gs="comd/z" data-x>www</code>.
	</p>
</div>
</div>			</main>
				<div data-w="nict/nebr">
					<a href="/en/javascript/book/prime/dom/basis/element-getting/" data-e="prev" data-x>
				<span data-e="arow" data-x>&larr;</span>
			</a>
							<a href="/en/javascript/book/prime/dom/basis/events-handlers-binding/" data-e="next" data-x>
				<span data-e="arow" data-x>&rarr;</span>
			</a>
			</div>
			<footer data-w="ruct/foot">
				<div data-w="nict/finf">
	<span data-e="text" data-x>
		Trepachev Dmitry &copy; 2012-2024	</span>
	<br>
	<a data-e="link" data-x href="https://t.me/trepachev_dmitry">t.me/trepachev_dmitry</a>
</div>							</footer>
			<div data-w="nict/jump">
	<a href="#top"><span>&uarr;</span></a>
</div>			<div data-w="nict/lagr">
	<a href="/en/javascript/book/prime/dom/basis/element-getting-advanced-selectors/" data-m-curr="T">en</a><a href="/ru/javascript/book/prime/dom/basis/element-getting-advanced-selectors/" data-m-curr="F">ru</a></div>					</div>
		
		<script src="/tore/@/metrikaΣ.js?v=1"></script>	</body>
</html>