소프트웨어 개발 업데이트 #12: DOM의 세계

이번 주 업데이트는 DOM(Document Object Model)의 주요 주제를 다룹니다. 이러한 개념을 설명하기 위해 몇 가지 예를 이해하고 공유하기 위해 가장 중요한 부분을 분석할 것입니다.

정의

DOM : 문서 개체 모델로 알려진이 웹 페이지의 JavaScript 표현입니다. 웹 페이지의 콘텐츠에 대한 JS "창"입니다. 본질적으로 JS를 통해 상호 작용할 수 있는 개체의 집합입니다. 드롭다운 메뉴를 만드는 것과 같은 작업을 수행하는 방법입니다.

JavaScript Element : JavaScript의 요소는 단일 HTML 요소를 나타내는 속성이있는 객체입니다. getElementById, getElementsByTagName 및 getElementsByClassName

의 세 가지 방법으로 요소를 선택할 수 있습니다.

HTML Collection : HTML 요소 특성 및 메소드를 표시하는 객체와 같은 배열입니다. getElementById, getElementsByTagName 및 getElementsByClassName을 사용할 때 생성됩니다.

특성, 속성 및 메서드

Query Selector : DOM에 새로 추가 된 QuerySelector는 단일 요소를 선택하는 올인원 방법입니다.

//Select by ID
console.log(document.querySelector('#banner'));

//Select by class
console.log(document.querySelector('.square'));

//You can also chain on other CSS style selectors
console.log(document.querySelector('img:nth-of-type(2)'));

//We can add multiple selectors. In this example we are selecting by type (anchor tag) and attribute (title="java")
console.log(document.querySelector('a[title="java"]'));

//And an example of querySelectorAll, this will create a collection of all paragraphs
console.log(document.querySelectorAll('p'));

//Here's an example of nested selectors. We'll create a colletion of all anchor tags inside a paragraph tag.
console.log(document.querySelectorAll('p a'));

innerHTML, textContent, innerText : 요소의 내용을 설정하거나 업데이트하는 데 사용할 수있는 DOM 속성입니다.

//innerText
//This will only show what's actually shown on the page at the moment. If an Element is hidden, innerText will not capture it
console.log(document.querySelector('p').innerText);

//textContent
//Notice the spacing in the console which is from the actual HTML markup because textContent returns every Element, hidden or not
console.log(document.querySelector('p').textContent);

//innerHTML retrieves the full contents (including the tag names) of the Element between the opening and closing tags
//We can overwrite an Element's HTML. Example will be the first h1 of the page
document.querySelector("h1").innerHTML = "<i>Silkie Chickens</i>";

getAttribute 및 setAttribute : 지정된 요소에서 속성의 값을 가져 오거나 설정합니다.

JavaScript Style Object: 다른 파일(예: .css 파일)에 설정된 스타일 속성은 표시하지 않지만 HTML에 있는 인라인 스타일은 표시합니다. 이러한 값은 일반적이지 않으므로 Style 개체를 사용하여 JavaScript를 사용하여 .css 파일에서 해당 값을 재정의합니다.

classList : 요소의 클래스를 제어하고 검색하거나 조작하기 위해 상호 작용할 수있는 객체입니다. .add, .remove 및 .toggle

과 같은 유용한 방법이 있습니다.

Traversing : 이러한 모든 속성을 사용하면 한 요소에서 상대 (부모/자식/형제)로 탐색 할 수 있습니다. parentElement, childElementCount, children, nextSibling, nextElementSibling, previousSibling 및 previousElementSibling

추가 및 제거 : appendChild, append, prepend, insertAdjacentElement, after, removeChild 및 remove

//Append Child---------------------------------------------------------------
//We are creating a new image with a source, but it's not on the page yet
const newImage = document.createElement("img");
newImage.src = "https://i.imgur.com/Gz7nBcv.jpg";

//Now we'll append the image to the body as a child
document.body.appendChild(newImage);

//Now lets apply a class so css will have an effect
newImage.classList.add("square");

//We'll combine a few things we've leanred
const newH3 = document.createElement("h3");
newH3.innerText = "I am a new H3!"
document.body.appendChild(newH3);

//Append---------------------------------------------------------------------
const p = document.querySelector("p");
p.append("I can be a full sentance!", "And I can be a second added Element!");

//Prepend--------------------------------------------------------------------
const newBold = document.createElement("b");
newBold.innerText = "Hello!";
p.prepend(newBold);

//insertAdjacentElement------------------------------------------------------
const h2 = document.createElement("h2");
h2.innerText = "I am insertAdjacentElement";

const h1 = document.querySelector("h1");
h1.insertAdjacentElement("afterend", h2);

//After----------------------------------------------------------------------
const h4 = document.createElement("h4");
h4.innerText = "I am an 'after' H4";

h2.after(h4);

//removeChild------------------------------------------------------------
const firstLi = document.querySelector("li");
const ul = firstLi.parentElement;

//Now we can pass in the child we want to remove by selecting the parent
ul.removeChild(firstLi);

//remove-----------------------------------------------------------------
//Remove is newer and allows you to directly select the Element you want to rmeove instead of needing to select the parent
//first and then defining the child Element to be removed
const image = document.querySelector("img");
image.remove();

주간 검토

DOM의 기본을 이해하는 것은 내 부트캠프의 다음 여러 섹션에서 자체적으로 구축할 기본 지식인 것 같습니다. 다음에 오는 DOM 이벤트에 대해 알아가면서 이것으로 더 놀기를 기대합니다!

Bootcamp 수업 완료: 253/579


즐겁게 읽으셨기를 바랍니다!

GitHub에서 저를 팔로우하고 더 많은 정보를 얻으십시오!