JAvascript-深化(1)-修正中

JavaScript深化編!

window

グローバルオブジェクト

は、私たちが使用している組み込みオブジェクトをプロパティとして使用しています(ex.console、documentなど...)

を表すブラウザウィンドウは、最上位オブジェクト(グローバルオブジェクト)です.

console.log(window)
console.log(window.innerWidth);
console.log(window.innerHeight);

DOM(Document Object Model)

ページに表示されるすべてのHTMLタグをオブジェクトとして使用できます.

dirメソッドは、コンソール

に文字列形式で出力する.

logメソッドは、パラメータ値

をHTML形式で出力する.

dirメソッド出力の

オブジェクトのプロパティの詳細

console.log(documnet) // HTML을 보여준다.
console.log(typeof document) // object
console.dir(document) // 객체로 보여준다.

DOMツリー

各オブジェクトをノードと呼びます.

親ノード/子ノードが

ノードと同じ位置にある場合、兄弟ノード

はタグのノードが要素ノードを表し、文字のノードがテキストノード

を表す.

テキストノードは要素ノードのサブノードです!/サブノードを所有できません!

合計12ノードタイプ

サブノードの選択

const myTag = document.querySelector('#content')

console.log(myTag);

//형제 요소 노드
console.log(myTag.previousElementSibling);
console.log(myTag.nextElementSibling);

//부모 요소 노드
console.log(myTag.parentElement);

// 자식 요소 노드
console.log(myTag.children(1));
console.log(myTag.firstElementChild);
console.log(myTag.lastElementChild);

要素ノードの構成

innerHTMLはHTMLコードを文字列として出力します.

innerHTMLには、タグ間の改行、インデント、スペースが含まれます.

outerHTMLは、要素自体が新しい要素に置き換えられます.(修正x)

テキストの内容は、特殊文字もテキストと見なします.

const myTag = document.querySelector('#list-1')

myTag.innerHTML = '<li>Exotic</li>' // 값을 변경하기
myTag.innerHTML += '<li>Exotic</li>' // 값을 추가하기

myTag.outerHTML = '<ul id="new-list"><li>Exotic</li></ul>' // 요소 자체가 변경

console.log(myTag.textContent) // 요소 안의 텍스트를 가져온다.
myTag.textContent = '<li>new text!</li>' //   <li>도 텍스트로 인식한다.

要素ノードの追加

prepend,append:呼び出しメソッドの内部から前後に追加します.

before,aft:呼び出しメソッドの前後に兄弟ノード

を追加する.

// 요소 노드 추가하기
const tomorrow = document.querySelector('#tomorrow')
// 요소 노드 만들기
const first = document.createElement('li')
// 요소 노드 꾸미기(innerHTML, textContent..)
first.textContent = '처음';

// 요소 노드 추가히가
const last = document.createElement('li')
last.textContent = '마지막'
first.prepend(first); // 제일 앞 부분 추가
tomorrow.append(first); // 제일 뒷 부분 추가

const prev = document.createElement('p');
prev.textContext= '이전';
tomorrow.before(prev);  // 이전(앞)부분에 형제 노드 추가
tomorrow.after(prev);  // 이후(뒷)부분에 형제 노드 추가

要素ノードの削除と移動

ノードの削除:remove;

ノード移動:prepend、append、before、aft

const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');

// 노드 전체 제거
tomorrow.remove();
// 노드 자식 요소 제거
tomorrow.children[2].remove();

// 노드 이동하기
today.append(tomorrow.children[1]); // 내일 노드의 첫 번째 자식 노드를 오늘 노드로 이동
tomorrow.children[1].after(today.children[1]);