UMC WEB 4週間

コアキー🎯

DOMとJavaScript

querySelector

appendChild

insertAdjacentHTML

DOMとは?

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.

JavaScriptは、ブラウザが読み取り処理できる言語です.
DOMはこの任務を実現する場所である.
実際,「JavaScriptの使用」の正確な意味は「DOM API」であると考えられる.
要するに、DOMはブラウザによって記録されたすべてのコンテンツである.JavaScriptは操作可能な文法と言語で、ノードです.ブラウザ以外にDOM API(例えばjs)がない環境でも使用できます.
ソース
querySelector
DOMオブジェクトにアクセスできるJavaScriptオブジェクトの1つ

document.getElementById(「id名」)
対応するid名を持つ要素を返します.

document.QuerySelector(「セレクタ」)
選択した内容を満たす要素を返します.

document.getElementsByClassName(「class名」)
クラス名を持つ要素を配列に配置し、インデックスに一致する要素を返します.

document.getElementsByTagName(「ラベル名」)
対応するタグ名を持つ要素を配列に配置し、インデックスに一致する要素を返します.

document.querySelector All(「選択者名」)「順序」は、配列内の選択者を満たすすべての要素のインデックスを返します.

アクセス方法はいくつかあります.

//querySelector은 유사배열, 노드리스트로 받아옴
//노드리스트는 forEach 지원
const $citys = document.querySelector('li');
$citys.forEach(city => console.log(city.innerText));

//html collection은 forEach 지원 X map으로 접근
const $citys = document.getElementsByTagName('li');
newCities.map(city => console.log(city.innerText));


// spread operator, Array.from를 사용 유사배열을 배열로 전환
let newCities = [...$citys]
console.log(newCities)
newCities.map(city => console.log(city.innerText));

newCities = Array.from($citys);
newCities.map(city => console.log(city.innerText));


//자바스크립트에서의 스타일변환
const $body = document.getElementsByTagName('body');
$body[0].style.backgroundColor = 'teal';
let $cityDiv = document.querySelector('#cityList');
$cityDiv.style.color = 'gray'

//Why $body[0], $cityDiv 접근을 다르게 하는가?

appendChildとマークし、要素を追加します.

let worstCity = document.createElement('ul');
const worstCityArr = ["카이로","런던","리스본","시드니"];

//ul태그를 생성하고, li태그를 생성 및
//innerText 변환한 객체 만들고 넣기
worstCityArr.map(city => {
  const worstCityItem = document.createElement('li');
  worstCityItem.innerText = city;
  worstCity.appendChild(worstCityItem);
})

$cityDiv = document.querySelector('.city');
$cityDiv.appendChild(worstCity);

//ClassName으로 받아와서 배열취급
$container = document.getElementsByClassName('container');
const worstCityDiv = document.createElement('div');

const worstCitySubTitle = document.createElement("h2");
worstCitySubTitle.innerText = "< Worst 5 > ";

worstCityDiv.appendChild(worstCitySubTitle);
worstCityDiv.appendChild(worstCity);

//해당 요소의 맨 마지막 자식 노드로 추가함.
$container[0].appendChild(worstCityDiv);

insertAdjacentHTML
appenChild、beforechildに似ています
MDNサイト

特定の場所にDOMツリーに必要なノードを追加します.すでに使用されている要素はグループ化されません.したがって、エレメントに存在するエレメントには触れません.

element.insertAdjacentHTML(position, text);

Stringにpositionとtextを挿入

//insertAdjacentHTML를 사용하여 자식 추가
worstCityList = "<ul><li>카이로</li><li>런던</li></ul>";
      
$cityDiv.insertAdjacentHTML('beforeend',worstCityList);

JSを使用してDOMにクラスと属性を追加

//클래스 추가
worstCityDiv.classList.add("city");
worstCityDiv.classList.remove("city");

//속성추가
worstCityDiv.setAttribute('name','worstCity');
console.log(worstCityDiv);

実習照合表

document
getElementsByTagName、getElementsByClassName、およびgetElementByIdを使用して、コード

を以下に記述します.
innerText : spread operator : Array.from :

element
classList :

setAttribute : appendChild : insertAdjacentHTML : YouTube html、cssクローンコード
クローンコードのchodan youtube

JS実装によるコメントの追加

// dom 조작은 $붙임
const $commentList = document.querySelector("#commentsList");

const commentItemTemplate = (newId, newComment,Imgurl) => {
	return `
    <li class="commentItem">
    <img src="${Imgurl}"
        class="profileImg" />
    <div>
        .....
    </div>
</li>`
;
}

const newComment = commentItemTemplate("이해찬","너무 좋아요..!","https://yt3.ggpht.com/yti/APfAmoFjoi5B8bE0j5805xHwq1nnfHaRErC54Tcwrre3=s88-c-k-c0x00ffffff-no-rj-mo");
console.log(newComment);

// 댓글은 최신댓글이 맨 위로 올라옴, 최신부터 오래된 순으로 정렬
$commentList.insertAdjacentHTML("afterbegin",newComment);

第4週
UMC_WebStudy GitHub

よい品🔥

ブラウザにおける

JavaScriptの動作原理

について

JavaScriptがHTMLを制御するプロセス

について

appendChildとinsertAdjentHTMLの違いを理解する