DOM

47088 ワード

テキストリンク

HTMLとは

Webフレームワークのタグ言語.

DOMとは

Document Object Modelの略で、HTMLドキュメントの構造と関係をオブジェクトで表すモデルです.

ツリー構造
-HTMLドキュメントとJavaScriptオブジェクトはツリー構造です.

DOMはプログラミング言語ではありませんが、DOMがなければJavaScriptはページを理解しません.

DOMがないと、JavaScriptはHTMLを処理できません.JavaScriptでDOMを実装するdocumentオブジェクトを使用してHTMLドキュメントを操作できます.

他の言語が使えますが、JavaScriptがたくさん使われています.

JavaScriptを使用して、エンティティの属性値を取得または変更します.

DOM構造の参照

console.dir();

ドキュメントを()に挿入し、objectとして表示します.
サブ要素のクエリー

サブプロパティ
親の照会

親要素属性

document.body.children
document.body.parentElement

DOMによるHTMLの変更

document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 하는 방법을 알아보자.

1.JavaScriptから要素を作成する(createElement)

DOMを使用してdivを作成し、JavaScript変数に割り当てます.

ですが、HTMLでは何の変化もありません.要素が追加されていないためです.

    const tweetDiv = document.createElement('div')

2.appendを使用して属性を追加(要素を追加)

bodyにdiv要素が追加されたが、何の変化もなかった.div要素は追加されましたが、内容は追加されていないので見えません.

	document.body.append(tweetDiv)

.append()

// Inserting a Node object
const parent = document.createElement('div');
const child = document.createElement('p');
parent.append(child);
// This appends the child element to the div element
// The div would then look like this <div><p></p></div>

// Inserting a DOMString
const parent = document.createElement('div');
parent.append('Appending Text');
// The div would then look like this <div>Appending Text</div>

.appendChild()

// Inserting a Node object
const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child);
// This appends the child element to the div element
// The div would then look like this <div><p></p></div>

// Inserting a DOMString
const parent = document.createElement('div');
parent.appendChild('Appending Text');
// Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

2-1. append vs appendChild

違いは、ノードオブジェクトが追加できるDOMStirngオブジェクトとノードオブジェクトが追加できるノードオブジェクトしか追加できないことです.

// .append에서 DOMStirng과 Node object 추가 가능하지만 .appendChild는 Node object만 가능
const parent = document.createElement('div');
const child = document.createElement('p');
// Appending Node Objects
parent.append(child) // Works fine
parent.appendChild(child) // Works fine
// Appending DOMStrings
parent.append('Hello world') // Works fine
parent.appendChild('Hello world') // Throws error


//.append()는 여러 요소 추가 가능하지만 .appendChild()는 하나의 Node object만 가능
const parent = document.createElement('div');
const child = document.createElement('p');
const childTwo = document.createElement('p');
parent.append(child, childTwo, 'Hello world'); // Works fine
parent.appendChild(child, childTwo, 'Hello world');
// Works fine, but adds the first element and ignores the rest


// .append()는 반환값이 없고 .appendChild()는 반환값이 Node object이다.
const parent = document.createElement('div');
const child = document.createElement('p');
const appendValue = parent.append(child);
console.log(appendValue) // undefined
const appendChildValue = parent.appendChild(child);
console.log(appendChildValue) // <p><p>

2-2. prepend vs append

prepend : One or more nodes to insert before the first child node currently in the ParentNode.

親ノードの最初のノードの前にノードを追加します.

すなわち、prependは親ノードの一番前にappendを追加し、親ノードの一番後ろに追加する.

Advance

appendChildを使用して既存のノードを別のノードに追加する場合は、既存のノードを削除するかコピーするかを見てみましょう.

<div class="a">
    <span></span>
</div>
<div class="b"></div>

spanノードをclass=bのdivに追加すると、コピーして移動しません.

原因は2人の親がいないため、IDが重複しています.また,新しく追加したノードへの参照が失われる.

const span = document.querySelector(‘span’); 
const divB = document.querySelector(‘.b’); 
divB.appendChild(span);

リファレンスリンク

3.JavaScriptでDOMを使用して要素を読み込む(querySelector)

<div>HTML Document</div>
<div id = 'div'>HTML Document</div>
<div id = 'div2'>
  <span class = 'span'>HTML Document</span>
</div>

document.querySelector('div');
//결과 : div

document.querySelector('#div');
//결과 : <div id = 'div'>HTML Document</div>

let div = document.querySelector('#div2');
div.querySelector('.span');
//결과 : <span class = 'span'>HTML Document</span>

div要素をインポートします.

.divはdivと名付けられたクラスのノードを取得する.

#divは、divという名前のIDを取得するノードである.

querySelector():ノードを1つだけ読み込みます.

querySelector All():複数のノードを読み込みます.結果値は類似配列です.

4. textContent, classList.追加(要素更新)

要素にコンテンツ(テキストコンテンツ、innerHTML)

を追加する.

要素へのクラス(クラスリスト)

の追加と削除

const oneDiv = document.createElement('div') // 요소 생성
console.log(oneDiv) // <div></div>

oneDiv.textContent = 'dev'; // 내용 삽입
console.log(oneDiv) // <div>dev</div>

oneDiv.classList.add('tweet') // class 속성 추가
console.log(oneDiv) // <div class="tweet">dev</div>

const container = document.querySelector('#container') // 부모 엘리먼트
container.append(oneDiv) //append로 요소 추가

4-1. element.classList

<html>
    <head>
        <title>
            안녕~
        </title>
    </head>
    
    <body>
        <div class='divTest'>
            <!-- 내용 시작 -->
            <p class='pTest'>은하수를 여행하는 히치하이커를 위한 안내서</p>
            <p class='pTest'>오리엔트 특급살인</p>
        </div>
    </body>
</html>

読取り専用属性

document.querySelector('div').classList

//결과 : DOMTokenList ["divTest", value: "divTest"]

let div = document.querySelector('div').classList
//결과 : <div class="divTest"> ... </div>

remove():クラス値

を削除

div.classList.remove('divTest');
//결과 : <div class> ... </div>

add():クラス値

を追加

div.classList.add('anotherclass')
// 결과 : <div class='anotherclass'> ... </div>

切替(String,[,force]):引数が1つしかない場合、クラスが存在する場合は削除し、falseを返し、存在しない場合はクラスを追加し、trueを返します.
2つの引数の場合、2番目の引数がtrueの場合、指定したクラス値が追加され、falseの場合は削除されます.

div.classList.toggle('visible');
//결과 <div class=""anotherclass visible"> ... </div>

div.classList.toggle('visible', false);
//결과 <div class="anotherclass"> ... </div>

div.classList.toggle('visible', true);
//결과 <div class="anotherclass visible"> ... </div>

contains(String):指定したクラス値が要素のクラス属性に存在するかどうかを確認します.

div.classList.contains('new')
//결과 false
//replace 후는 true

Replace(oldClass,newClass):既存のクラスを新しいクラスに置き換えます.

div.classList.replace('anotherclass','new');
// 결과 <div class="new"> ... </div>

4-2. setAttribute()は、属性を追加することによってidやclassなどを生成することができる。

	oneDiv.setAttribute("id","test"); //id="test" 속성을 추가

4-3. textContent vs innerHTML

innerHTML:ラベルとコンテンツをすべてインポートします.ラベルを付けることができます.

innerHTMLを使用する場合は、sciptに表示されないようにセキュリティに注意してください.

<p id = 'p'><h1 style="color:blue">innerHTML</h1></p>

let p = document.querySelector('#p');
p.innerHTML // <h1 style="color:blue">innerHTML</h1>

textContent:スペースとコンテンツをすべてインポートします.価格は再配分できます.

<p id="p"><h1 >textContent</h1></p>
// textContent

注：リンク1
メモリンク2

5.HasChildNodes()メソッド

は、Boolean値を返し、現在のノードにサブノードがあるかどうかを決定する.

아래 예시에서는 "foo"라는 id를 가진 요소를 찾고 "foo" 요소에게 자식노드가 있으면 첫번째 자식노드를 제거해줍니다.


let foo = document.getElementById("foo");

if ( foo.hasChildNodes() ) { 
  foo.removeChild( foo.childNodes[0] );
}

6. element.childNodes

サブノードへのアクセス方法

現在の要素サブノードを含むノード

のNoteListを返します.アノテーションノードなどの非要素ノードも含まれます.

<div>
    <!-- 내용 시작 -->
    <p>은하수를 여행하는 히치하이커를 위한 안내서</p>
    <p>오리엔트 특급살인</p>
</div>

document.querySelector("div").childNodes

// 결과 NodeList(7) [text,comment, text, p, text, p, text]

div起動後、0番目の配列要素としてtext
コンテンツ開始をコメント
コンテンツの開始後、
pはp銀河旅行のヒッチハイクガイド
次のテキストは
pはp東方特級殺人
次のテキストは
結局、ChildNodes <p>은하수를 여행하는 히치하이커를 위한 안내서</p> <p>오리엔트 특급살인</p>はい.

7. ParentNode.children

サブノードへのアクセス方法

現在の要素サブ要素

を含むHTML Collectionを返します.非要素ノードはすべて除外されます.

<div>
    <!-- 내용 시작 -->
    <p>은하수를 여행하는 히치하이커를 위한 안내서</p>
    <p>오리엔트 특급살인</p>
</div>

document.querySelector("div").children

// 결과 HTMLCollection(2) [p, p]

7-1. children vs childNodes

8.要素の削除(remove,removeChild)

追加

ノード

を削除

const body = document.querySelector('body')
const div = document.createElement('div')
body.append(div)
div.remove()

すべてのサブエレメントを削除

const body = document.querySelector('body')
body.innerHTML='' // 자식 엘리먼트 전부 삭제

特定のサブエレメント

を削除する.

const body = document.querySelector('body');
while (body.firstChild) {
  body.removeChild(container.firstChild);
}

9. node vs element

ノードはDOMの全

である.

要素はノードの1つです.

注：リンク1
メモリンク2
参照リンク3

[特定のエンティティを選択してインポート]

タグ:documentを使用します.getElementsByTagName

id:documentを使用します.getElementById

class:documentを使用します.getElementsByClassName

セレクタ:documentを使用します.querySelector/document.querySelectorAll

ボタンクリック時にDOMを使用して要素を追加


//p 요소를 body에 javascript를 이용해서 추가해 보기
<body>
<p>요소 하나 추가</p>
</body>

let button = document.querySelector('#button'); // 클릭 이벤트할 요소 가져오기

function buttonInput() { // 요소를 추가하는 함수
  let p = document.createElement('p');
  p.textContent="요소 하나 추가";
  
  let parent = document.querySelector("body");
  parent.appendChild(p);*- 
}

button.addEventListener('click',buttonInput); //클릭 이벤트 발생 시 이벤트 핸들러 사용
button.onclick = buttonInpu;

Prototypeを使用した作成方法


/* this가 number형인 값을 불러와 함수 작성 가능 */
Number.prototype.[메서드 이름] = function() {
//...함수 실행할 명령어들
}

template tagを使用して表示したい要素のみを表示

テンプレートの使用目的:JavaScriptで要素の作成、コンテンツの追加、クラスの追加、idの重複を回避するためにHTMLにテンプレートを作成します.

テンプレートを使用すると、中の要素が見えません.

<template id='a'>
  <span>after</span>
</template>

<div id='b'>before</div>

let b = document.querySelector('#b');
let template = document.querySelector('#a');

let newContent = document.importNode(template.content,true);
// 자식 노드 전부 포함하여 복사

b.textContent = '';
b.appendChild(newContent); //<div id='b'>after</div>

DOMは難しすぎる

Reference

この問題について(DOM), 我々は、より多くの情報をここで見つけました https://velog.io/@bsy/DOM

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

LALAVEL Where and orwhere条件例

Azure SDKアーキテクチャ入門