جستجو: *getElement و *querySelector

وقتی elementها به یکدیگر نزدیک هستند، استفاده از ویژگی‌های DOM navigation عالی است. اما اگر elementها نزدیک هم نباشند چه؟ چگونه باید به یک element دلخواه دسترسی داشته باشیم؟

روش‌های جستجوی دیگری برای آن وجود دارد.

id یا تنها document.getElementById

اگر یک elementØŒ دارای attribute (ویژگی) id باشد، می‌توانیم با استفاده از methodای به نام document.getElementById(id) به آن دسترسی داشته باشیم. اهمیتی ندارد Ú©Ù‡ آن element کجا است.

برای مثال:

<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // element دسترسی به
  let elem = document.getElementById('elem');

  // پس‌زمینه‌ی آن را قرمز می‌‌کنیم
  elem.style.background = 'red';
</script>

همچنین، متغیری global وجود دارد Ú©Ù‡ با id نام‌گذاری شده‌ است Ùˆ به element ارجاع می‌دهد:

<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // است elem به نام id با DOM-element ارجاعی به elem
  elem.style.background = 'red';

  // درون خود یک خط تیره (-) دارد، پس نمی‌تواند نام یک متغیر باشد elem-content
  // اما می‌توانیم با استفاده از براکت ([]) به آن دسترسی داشته باشیم: window['elem-content']
</script>

….مگر اینکه یک متغیر جاوا اسکریپت را با همین نام تعریف کنیم. در این صورت آن اولویت دارد:‌

<div id="elem"></div>

<script>
  let elem = 5; // <div id="elem"> پنج است، نه ارجاعی به elem الان مقدار

  alert(elem); // 5
</script>

querySelectorAll

با اختلاف، جامع‌ترین روش elem.querySelectorAll(css) بود Ú©Ù‡ تمام elementهای درون elem Ú©Ù‡ با css selector داده شده تطابق دارند را انتخاب می‌کند.

اینحا به دنبال تمام <li>هایی هستیم Ú©Ù‡ آخرین فرزند هستند:

<ul>
  <li>The</li>
  <li>test</li>
</ul>
<ul>
  <li>has</li>
  <li>passed</li>
</ul>
<script>
  let elements = document.querySelectorAll('ul > li:last-child');

  for (let elem of elements) {
    alert(elem.innerHTML); // "test", "passed"
  }
</script>

این method واقعا قدرتمند است، چون هر css selectorای می‌تواند استفاده شود.

querySelector

فراخوانی elem.querySelector(css) اولین element را برای css selector داده شده برمی‌گرداند.

به عبارت دیگر، نتیجه با elem.querySelectorAll(css)[0] یکسان است اما دومی به دنبال تمام elementها است Ùˆ یکی را انتخاب می‌کند در حالی Ú©Ù‡ elem.querySelector فقط به دنبال یکی است. پس هم سریع‌تر است Ùˆ هم برای نوشتن کوتاه‌تر است.

matches

روش‌های قبلی در DOM جستجو می‌کردند.

عبارت elem.matches(css) در جستجوی چیزی نیست، فقط Ú†Ú© می‌کند Ú©Ù‡ element با CSS-selector داده شده مطابقت دارد یا نه Ùˆ true یا false برمی‌گرداند.

این روش زمانی به کار می‌آید که می‌خواهیم روی elementهایی (مثل آرایه یا همچین چیزی) iterate کنیم و آن‌هایی که مطلوب هستند را فیلتر کنیم.

برای مثال:

<a href="http://example.com/file.zip">...</a>
<a href="http://ya.ru">...</a>

<script>
  // باشد document.body.children می‌تواند هر مجموعه‌ای به جای
  for (let elem of document.body.children) {
    if (elem.matches('a[href$="zip"]')) {
      alert("این آرشیو ارجاع می‌دهد به : " + elem.href );
    }
  }
</script>

closest

والدهای یک element عبارت‌اند از: پدر، پدر پدر، پدر آن و … . این والدها با یکدیگر زنجیره‌ای از والدها را از یک element به سمت بالا تشکیل می‌دهند.

متد elem.closest(css) به دنبال نزدیک‌ترین والدی است Ú©Ù‡ با CSS-selector تطابق دارد. خود elem هم شامل این جستجو می‌شود.

به عبارت دیگر متد closest از element به سمت بالا می‌رود Ùˆ هر یک از والدها را Ú†Ú© می‌کند. اگر با selector مطابقت داشته باشد، جستجو متوقف می‌شود Ùˆ آن والد برگردانده می‌شود.

برای مثال:

<h1>Contents</h1>

<div class="contents">
  <ul class="book">
    <li class="chapter">بخش 1</li>
    <li class="chapter">بخش 2</li>
  </ul>
</div>

<script>
  let chapter = document.querySelector('.chapter'); // LI

  alert(chapter.closest('.book')); // UL
  alert(chapter.closest('.contents')); // DIV

  alert(chapter.closest('h1')); // null (یک والد نیست h1 چون)
</script>

getElementsBy*

همچنین روش‌های دیگری برای جستجو برای یک node با tag، class و … وجود دارد.

امروزه آن‌ها کمتر استفاده می‌شوند چون querySelector قدرتمندتر است Ùˆ برای نوشتن سریع‌تر است.

پس اینجا ما بیشتر آن‌ها را برای کامل بودن پوشش می‌دهیم اما هنوز می‌توانید آن‌ها را در scriptهای قدیمی پیدا کنید.

• عبارت elem.getElementsByTagName(tag) به دنبال elementهایی با tag داده شده است Ùˆ مجموعه‌ی آن‌ها را برمی‌گرداند. پارامتر tag همچنین می‌تواند یک ستاره باشد "*" به معنای تمام tag ها.
• عبارت elem.getElementsByClassName(className) تمام elementهایی Ú©Ù‡ کلاس CSS داده شده را دارند برمی‌گرداند.
• عبارت document.getElementsByName(name)تمام elementهایی Ú©Ù‡ name به عنوان attribute به آن‌ها داده شده است را برمی‌گرداند Ùˆ بسیار Ú©Ù… استفاده می‌شود.

برای مثال:‌

//تمام div های درون document را می‌گیرد.
let divs = document.getElementsByTagName('div');

بیایید تمام tagهای input درون این table را پیدا کنیم:‌

<table id="table">
  <tr>
    <td>سن شما:</td>

    <td>
      <label>
        <input type="radio" name="age" value="young" checked> کمتر از 18
      </label>
      <label>
        <input type="radio" name="age" value="mature"> از 18 تا 50
      </label>
      <label>
        <input type="radio" name="age" value="senior"> بیشتر از 60
      </label>
    </td>
  </tr>
</table>

<script>
  let inputs = table.getElementsByTagName('input');

  for (let input of inputs) {
    alert( input.value + ': ' + input.checked );
  }
</script>

// کار نمی‌کند
document.getElementsByTagName('input').value = 5;

// باید کار کند (اگر یک ورودی وجود داشته باشد)
document.getElementsByTagName('input')[0].value = 5;

.article هایelement جستجو برای

<form name="my-form">
  <div class="article">مقاله</div>
  <div class="long article">مقاله طولانی</div>
</form>

<script>
  // name پیدا کردن با استفاده از ویژگی
  let form = document.getElementsByName('my-form')[0];

  // form داخل class پیدا کردن با استفاده از
  let articles = form.getElementsByClassName('article');
  alert(articles.length); // 2, پیدا شد article با کلاس element 2
</script>

مجموعه‌های زنده

.می‌شوند update را منعکس می‌کنند Ùˆ وقتی تغییر می‌کند، به صورت خودکار document یک مجموعه‌ی زنده برمی‌گردانند. چنین مجموعه‌هایی همیشه وضعیت فعلی "getElementsBy*" تمام متدهای

.داریم script در مثال زیر دو

.ایجاد می‌کند در حال حاضر طول آن 1 است <div> اولی ارجاعی به مجموعه‌ی
دیگر را ببیند پس طول آن 2 است <div> زمانی اجرا می‌شود Ú©Ù‡ مرورگر یک script دومین

<div>div اول</div>

<script>
  let divs = document.getElementsByTagName('div');
  alert(divs.length); // 1
</script>

<div>div دوم</div>

<script>
  alert(divs.length); // 2
</script>

.ها استelement را برمی‌گرداند Ú©Ù‡ شبیه یک آرایه‌ی ثابت static یک مجموعه‌ی querySelectorAll ،متقابلا

.خروجی 1 را می‌دهند script اگر به جایش از آن استفاده کنیم، هر دو

<div>اول div</div>

<script>
  let divs = document.querySelectorAll('div');
  alert(divs.length); // 1
</script>

<div>Second div</div>

<script>
  alert(divs.length); // 1
</script>

.افزایش نیافته است static مجموعه‌ی ،document جدید در div حالا می‌توانیم تفاوت را به راحتی ببینیم. بعد از ایجاد شدن یک

خلاصه

.وجود دارد DOM ها در node شش روش اصلی برای جستجو در

.های قدیمی یافت شود script هم گاهی به صورت پراکنده می‌تواند مفید باشد یا در getElement(s)By شده است، اما querySelectorAll Ùˆ querySelector با اختلاف بیشترین استفاده از

علاوه بر آن:

.تطابق دارد یا نه CSS-selector با elem برای این استفاده می‌شود Ú©Ù‡ Ú†Ú© کنیم elem.matches(css) از عبارت - .هم Ú†Ú© می‌شود elem داده شده تطابق دارند. خود CSS-selector برای جستجوی نزدیک‌ترین والدهایی است Ú©Ù‡ با elem.closest(css) عبارت -

Ùˆ بیایید اینجا یک روش دیگر برای بررسی رابطه والد Ùˆ فرزند را Ú†Ú© کنیم،‌چون بعضی وقت‌ها مفید است: .را برمی‌گرداند true مقدار elemA.contains(elemB) باشد، عبارت elemA==elemB یا وقتی Ú©Ù‡ (elemA از فرزندان) باشد elemA داخل elemB اگر -