<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Advanced selectors of the DOM element in JavaScript | Trepachev Dmitry</title>
		
		<link rel="stylesheet" href="/css/fonts/list.css?v=8">
		<link rel="stylesheet" href="/css/styles.css?v=323">
		<link rel="stylesheet" href="/js/highlighter/highlighter.css?v=79">
		
		<script src="/js/highlighter/highlighter.js?v=118"></script>
		
		<script src="/js/location.js?v=3"></script>
		<script src="/js/locale.js?v=5"></script>
		<script src="/js/main.js?v=130"></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">
		<div class="wrapper">
			<header>
				<div class="top">
	<div class="left"><img data-module="coder" src="" alt=""></div>
	<div class="right">
		offline version 0.0.2	</div>
	<div class="center">
		<br><br>	</div>
</div>								<nav data-module="mainmenu">
	<section class="main active">
		<span data-href="/en/javascript/" data-open="javascript">JavaScript</span>
	</section>

	<section class="sub" data-name="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>
	</section>
</nav>							</header>
			<main>
				<h1>Advanced selectors of the DOM element in JavaScript</h1>
				<div class="content">
<p>
	Let's do something more complicated. Let, for 
	example, we have the following HTML code:
</p>
<div class="block">
	<code class="highlight" data-module="highlight" data-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 class="selector inline">#parent</code>:
</p>
<div class="block">
	<code class="highlight" data-module="highlight" data-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 class="selector inline">#parent input</code> selector. In fact, all 
	inputs that are in <code class="selector inline">#parent</code> match 
	this CSS selector.
</p>
<p>
	Let, for example, we have two such inputs:
</p>
<div class="block">
	<code class="highlight" data-module="highlight" data-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 class="selector inline">#parent input</code> 
	in the CSS code, it will affect both of our inputs:
</p>
<div class="block">
	<code class="highlight" data-module="highlight" data-lang="css">#parent input {
	color: red;
}</code>
</div>
<p>
	The <code class="code inline">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 class="selector inline">elem</code>:
</p>
<div class="block">
	<code class="highlight" data-module="highlight" data-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 class="block">
	<code class="highlight" data-module="highlight" data-lang="javascript">let elem = document.querySelector('.elem');
console.log(elem); // here will be the first input</code>
</div>
<div class="task">
	<p>
		Given the following HTML:
	</p>
	<div class="block">
		<code class="highlight" data-module="highlight" data-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 class="code inline">id</code> equal to 
		<code class="selector inline">block</code>.
	</p>
</div>
<div class="task">
	<p>
		Given the following HTML:
	</p>
	<div class="block">
		<code class="highlight" data-module="highlight" data-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 class="selector inline">block</code>.
	</p>
</div>
<div class="task">
	<p>
		Given the following HTML:
	</p>
	<div class="block">
		<code class="highlight" data-module="highlight" data-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 class="selector inline">www</code>.
	</p>
</div>
</div>			</main>
			<div class="bottom">
	<section class="pages" data-url="/en/javascript/book/prime/" data-persent="67" data-hash="jsPmDmEGAS" data-quantity="503" data-num="340"><a href="/en/javascript/book/prime/dom/basis/element-getting/" class="prev"><span class="arrow">&larr;</span></a><a href="/en/javascript/book/prime/dom/basis/events-handlers-binding/" class="next"><span class="arrow">&rarr;</span></a></section></div>			<footer>
	<div class="contacts">
	Trepachev Dmitry &copy; 2012-2023 <br>
	<a href="https://t.me/trepachev_dmitry">t.me/trepachev_dmitry</a>
</div>		
</footer>			<div class="jump">
	<a href="#top" class="to-top">&uarr;</a>
</div>			<div class="langer">
	<a href="/en/javascript/book/prime/dom/basis/element-getting-advanced-selectors/" class="active">en</a><a href="/ru/javascript/book/prime/dom/basis/element-getting-advanced-selectors/">ru</a></div>			</div>
		</div>
		
		<script src="/js/metrika.js?v=1"></script>	</body>
</html>