[モダンJavaScript]38~39章DOM

22233 ワード
テキストリンク
追加を続行...
要素ノードの取得
idを使用してノードを取得する
document.getElementBId('id이름')
  <body>
    <ul>
      <li id="apple">apple</li>
      <li id="banana">banana</li>
      <li id="orange">orange</li>
    </ul>
    <script>
      const $elem = document.getElementById('banana');
      $elem.style.color = 'red';
    </script>
getElementBidでないidを検索するとnullが返されます.
タグ名を使用したノードの取得
document.getElementsByTagName('태그이름');
  <body>
    <ul>
      <li id="apple">apple</li>
      <li id="banana">banana</li>
      <li id="orange">orange</li>
    </ul>
    <script>
      const $elem = document.getElementById('li');
     //  $elem.style.color = 'red'; => 색 변경 불가
     [...$elem].forEach(elem=> {elem.style.color='red';});
    </script>
getElementById(")は、HTML Collectionオブジェクトを返します.HTML Collectionオブジェクトを配列に変換して巡回し、色のプロパティ値を変更します.
クラス名を使用したノードの取得
document.getElementsByClassName('class 이름')
  <ul>
      <li class="fruit apple">apple</li>
      <li class="fruit banana">banana</li>
      <li class="fruit orange">orange</li>
    </ul>
    <script>
      const $elem = document.getElementsByClassName('fruit');

      [...$elem].forEach(elem => {
        elem.style.color = 'red';
      });
    </script>
「fruit」クラスの要素の色が変わります.
class名を持つ要素が存在しない場合は、空のHTML Collectionオブジェクトを返します.
cssセレクタを使用してノードを取得する

* { ... }
/* 전체 선택자 : 모든 요소를 선택*/
   
#foo { ... }
/* id가 foo 인 요소를 선택
パラメータとして渡されるcssセレクタを満たす要素が複数ある場合は、最初の要素ノードのみが返されます.
    <ul>
      <li class="fruit apple">apple</li>
      <li class="fruit banana">banana</li>
      <li class="fruit orange">orange</li>
    </ul>
    <script>
      const $elem = document.querySelector('.fruit');
      $elem.style.color = 'blue';
    </script>
▲フルーツグレードを持つ要素のうち、最初の要素(apple)だけが色を変える.
要素ノード取得での結論
documnet.QuerySelector All(「cssセレクタ」)
document.QuerySelector(「cssセレクタ」)
document.getElementById(「idツリー値」)
三つに統一したほうがいい.
/24579142まで使用した方が良いとはいえ、これも問題があります.
原則としてidは1つしかありません.
<input type="text" id="input-tag" value="html" placeholder="enter todo !" />
<input type="text" id="input-tag" value="html" placeholder="enter your job !" />
同じidが2つあってもエラーは発生しませんが、後ろのinputラベルのidを考慮して使用すると、上のidが選択されます.
今は問題ですか?そう言えますが、inputタグの間に複数行のコードがある場合は?誤りは探しにくい.document.getElementByIdは、NodeListという類似の配列で複数を返す.
特定の要素ノードを取得できることを確認します
委任イベントの使用
Element.prototype.matches
  <body>
    <ul>
      <li class="fruit apple">apple</li>
      <li class="fruit banana">banana</li>
      <li class="fruit orange">orange</li>
    </ul>
    <script>
      const $elem = document.querySelector('.fruit');
      console.log($elem.matches('li.orange')); //true
      console.log($elem.matches('grape')); //false
    </script>
ノードの作成と追加

n個以上の変更が必要な場合は?
このようにすると、DOMの変更回数はn回を超え、リフレッシュとリフレッシュはパフォーマンスに影響します.
🗣ソリューションDocument.prototype.createDocumentFragment
  <body>
    <ul id="fruit"></ul>
    <script>
      const $fruit = document.getElementById('fruit');

      const $fragment = document.createDocumentFragment();

      ['apple', 'banana', 'grape'].forEach(item => {
        const $li = document.createElement('li');
        $li.appendChild(document.createTextNode(item));
        $fragment.appendChild($li);
      });

      $fruit.appendChild($fragment);
    </script>
DocumentFragmentでノードを追加し、一度にDOMにノードを追加するため、リフレッシュとリフレッシュは一度だけ実行されます.
appendChildは最後のサブノードとして追加できます.
指定した場所にノードを挿入する場合は、「Node」をクリックします.prototype.insertBefore(newNode,childNode)を使用すると、パラメータが入力されたchilNodeの上部にノードを追加できます.
調査する
html要素には複数の属性があります.querySelectorAllたとえば、です.現在、inputには2つのクエリー(id、type)が存在するため、2つのクエリーノードが生成されます.
ユーザーの場所情報の取得
AuthとJWT、MongoDB、およびPostgresでエクスプレス