JavaScript - 22

23215 ワード
Document Fragment data-* replaceWith HTMLプロファイル dataset createTextNode elem.removeAttribute(name) append cloneNode() elem.getAttribute(name) prepend() after CreateElement before DOM構成 同期プロパティの構成 elem.setAttribute(name, value) .hasAttribute(name) テキストリンク

DOM構成


普通の相手のように表現する.
  • 任意の値が可能
  • 大文字と小文字の区別
    • Element.prototype.sayHi = function() {
  alert(`Hello, I'm ${this.tagName}`);
};

document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY
    オブジェクト宣言のプロパティを追加することで、すべての宣言でこれらのプロパティを使用することもできます.

    HTMLプロファイル


    HTMLコードを分割してDOMツリーを作成する場合、HTML標準属性を認識し、これらの標準属性を使用してDOMツリーを作成します.したがって、idなどの標準属性のみから構成される要素の場合、対応するプロパティが作成されます.ただし、標準属性でない場合は、その属性にマッピングされたDOMプロファイルは作成されません.1つのタグの要素は標準属性である可能性がありますが、別のタグの要素は標準属性ではない可能性があります.
    <body id="body" type="body">
  <input id="input" type="text">
  <script>
    alert(input.type); // text
    alert(body.type); // type은 body의 표준 속성이 아니므로 DOM 프로퍼티가 생성되지 않아 undefined가 출력됩니다.
  </script>
</body>
    非標準属性にもアクセスできます.
  • elem.hasAttribute(name)-属性が存在するか確認
  • elem.getAttribute(name)属性値取得
  • elem.setAttribute(name, value)属性値の変更
  • elem.removeAttribute(name)属性値クリア
    • また、elem.attributesすべての属性値を読み込むこともできます.elem.呼び出し属性は内蔵クラスAttrを実現する객체들을 담은 컬렉션,存在객체엔 name과 value 프로퍼티このうちgetAttribute()パスのインポート時に相対パスをインポートします.
    const logo1 = document.createElement('img');
logo1.src = 'img/logo.png';
console.log(logo1.src); // http://127.0.0.1:8080/img/logo.png
console.log(logo1.getAttribute('src')); // img/logo.png
    上のようにロゴsrcは絶対パスを取得し、
    logo1.getAttribute相対パスを取得します.

    プロパティとプロパティの同期


    通常、タグの属性とelementのpropertyは동기화です.
    𘥪¥でも修正できないPropertyもあります.valueはプロパティを追加することでプロパティ値を変更できますが、プロパティ値を変更してもプロパティは変更されない場合があります.
     let input = document.querySelector('input');
  // 속성 추가 => 프로퍼티 갱신
  input.setAttribute('value', 'text');
  alert(input.value); // text (갱신)
  // 프로퍼티를 변경해도 속성이 갱신되지 않음
  input.value = 'newValue';
  alert(input.getAttribute('value')); // text (갱신 안됨!)
    これは、ユーザーが任意の動作をしてProperty値が変更されたときに属性値を取得し、元のデータに復元するために使用できます.

    「data-*」プロパティとデータセットプロパティ


    「data」で始まるすべてのプロパティは、開発者が使用できるように個別に保持されます.データセットプロパティでは、このプロパティにアクセスできます.
    <body data-about="Elephants">
<script>
  alert(document.body.dataset.about); // Elephants
</script>

    DOM CRUD


    DOMの変更


    要素の作成


    DOM要素を作成する際に使用する方法は大きく2つあります.
  • document.createElement(tag):タグを引数として受け取ってEllementNodeを生成する.
  • document.createTextNode(text):テキストを引数としてテキストノードを生成します.

    • 挿入方法


  • node.append(ノードまたは文字列)–ノードの最後にノードまたは文字列を挿入します.
  • node.prepend(ノードまたは文字列)–ノードの前にノードまたは文字列を挿入します.
  • node.before(ノードまたは文字列)–ノードの前にノードまたは文字列を挿入します.
  • node.after(ノードまたは文字列)–ノードの後にノードまたは文字列を挿入します.
  • node.「Withの置き換え」(Replace With)-ノードを新しいノードまたは文字列で置き換えます.
    • const section1 = document.body.querySelector('#section--1');
const testElement = document.createElement('p');
testElement.className = 'test';
testElement.innerHTML = '테스트 엘레멘트 생성';
section1.before(testElement);
section1.prepend(testElement);
section1.append(testElement);
section1.after(testElement);

    DOM要素の削除

    remove()DOMからノードを削除できます.
    const section1 = document.body.querySelector('#section--1');
section1.remove();

    DOM要素の位置を移動

    <div id="first">First</div>
<div id="second">Second</div>
<script>
  // remove 메서드를 호출할 필요가 없습니다.
  second.after(first); // id가 second인 노드를 가져오고, 해당 노드의 뒤에 id가 first인 노드를 삽입
</script>
    DOM位置を移動する場合は削除する必要はありません.既存の場所を削除および追加します.

    DOM要素を深くコピー

    cloneNode()関数コピー可能要素.
    パラメータ値としてbooleanを受け入れ、trueを追加するとすべての子孫ノードの深さコピーにコピーされ、falseを受け入れた場合は表面にのみコピーされます.
    const section1 = document.body.querySelector('#section--1');
const sectionCopy = section1.cloneNode(true);
const sectionFrame = section1.cloneNode(false);
section1.after(sectionCopy);
// section1 바로 다음의 위치에 sectionCopy라고 완전히 같은 노드가 더 추가된다. 
console.log(sectionFrame);
// <section class="section" id="section--1"></section>

    Document Fragment


    元素の風呂敷だと思っています.new DocumentFragment()で新しいクリップを生成し、その中に入れたい要素を加えるとよい.
    div elementsを作っただけで、そこに置いたと思います.
    しかし,このような関数を直接使用することはあまり見られない.
    そして欲しいスペースを挿入すればいいのですが、fragmentは中身だけ入れてフレームを残さず.
    const section1 = document.body.querySelector('#section--1');
function getListContent() {
  let fragment = new DocumentFragment();
  for (const item of Array.from({ length: 3 }, (_, index) => index + 1)) {
    const list = document.createElement('li');
    list.innerHTML = `${item}`;
    fragment.append(list);
  }
  return fragment;
}
const ul = document.createElement('ul');
ul.append(getListContent());
section1.after(ul);
    const section1 = document.body.querySelector('#section--1');
function getListContent() {
  let result = [];
  for (const item of Array.from({ length: 3 }, (_, index) => index + 1)) {
    const list = document.createElement('li');
    list.innerHTML = `${item}`;
    result.push(list);
  }
  return result;
}
const ul = document.createElement('ul');
ul.append(...getListContent());
section1.after(ul);
    配列を利用して完全に代替できます.
    Linuxコマンド:chmod
    [Android Jetpack]データバインドデータのバインド