JavaScript 1 o 1 - DOM - 1での作業

This article was originally posted in my Hashnode Blog

DOM スタンドD オーエンスO 拒否するM オデル.DOM ドキュメントにアクセスするための標準です.
これは、プログラムやスクリプトを動的にドキュメントの内容、スタイル、および構造を変更することができます言語中立プラットフォームです.
この記事では、我々は学びます
ドキュメント内の要素のモデルオブジェクトにアクセスする方法.

IDを通じて

<p id="demo"></p>
<script>

let paragraph = document.getElementById("demo");  
//or
let paragraph = document.querySelector("#demo");


</script>

# is used before the id to denote we are selecting the elements having id while using querySelector

document.getElementById 要素を取得する専用ですid でもdocument.querySelector & document.querySelectorAll 別の属性を持つ要素を取得するために使用することもできます.

授業で

<p class='para'> First Paragraph </p>
<p class='para'> Second Paragraph </p>

<script>

 let paragraphs = document.getElementsByClassName("para"); //returns HTMLCollection
//or
let paragraphs = document.querySelectorAll('.para'); //returns NodeList

</script>

. is used before the class to denote we are selecting the elements having class while using querySelector or querySelectorAll

ここで私はquerySelectorAll の代わりにquerySelector .
これはquerySelectorAll 引数で指定されたセレクタに一致するすべての要素を返します.でもquerySelector セレクタに一致するドキュメントの最初の要素を返します.
例えば

<p class='para'> First Paragraph </p>
<p class='para'> Second Paragraph </p>

<script>

let paragraph = document.querySelector('.para') 
// returns the paragraph with text "First Paragraph"

</script>

したがって、我々がIDで選択しているときだけ、我々は使用しますquerySelector . それ以外の場合はquerySelectorAll .

There is more to it with selecting elements with class

例えば

<p class='block'> This is paragraph </p>
<p class='block'> This is paragraph 2 </p>
<h5 class='block'> This is heading </h5>

<script>
let elems = document.querySelectorAll('p.block');
//returns only paragraph with class 'block'
</script>

タグ名

<p> Hi </p>
<p> How are you ? </p>

<script>
  let elems = document.getElementsByTagName("p"); // returns HTMLCollection 
  //or 
  let elems = document.querySelectorAll("p"); // returns Nodelist
</script>

Not using any notation before the argument denotes selecting elements with tag name in querySelector or querySelectorAll

属性値

<h1 title='heading'> Working with Dom </h1>

<p title='heading'> Attribute Selector </p>


<script>
  let elems = document.querySelectorAll("h1[title='heading']");
// returns NodeList of h1 elements with title 'heading'


  let elems = document.querySelectorAll("[title='heading']");
// returns NodeList of all elements with title 'headiing'
</script>

結論

ID、クラス、タグ、または属性を使用して要素を選択できます.

. がクラスです.# はIDと[ attributeName = "value"] が属性です.要素を選択するセレクタです.

querySelectorAll はNodeList of elements, getElementsByClassName , getElementsByTagName リターンHTMLCollection and getElementById & querySelector 要素自体を返します.

使用時に要素の型を指定することもできますquerySelector or querySelectorAll .

あなたは気づいたかもしれない.私は、多くについて言及しましたNodeList and HTMLCollection 上記のコード.次の記事でこれらの見知らぬ人について学びます.