실습 프로젝트를 통한 JavaScript Dom 조작에 대한 최고의 가이드

안녕하세요,
웹 사이트 개발에서 DOM은 Document Object Model을 나타냅니다. DOM 조작은 JavaScript를 사용하여 웹 사이트의 요소를 추가, 제거 및 수정하는 것입니다. 이 튜토리얼에서는 그 방법을 배웁니다. 마지막에 확인해야 할 실습 프로젝트에 대한 GitHub 링크를 포함하겠습니다.
이벤트, 이벤트 처리기 및 요소에 액세스하고 조작하는 다양한 방법은 다루지 않습니다. 그러나 권장되고 쉬운 방법입니다.

DOM 요소에 액세스하기

CSS를 통해 요소를 선택하는 것과 동일합니다.

// Returns the first element within the document that matches the specified group of selector/selectors. 
//Now you have also access to the element attributes, element.href etc and you can directly change any property element.href = "https://newlink.com"
const element = document.querySelector('.someclass')
// Returns a list of the elements within the document using depth-first pre-order traversal of the document's node. That match the specified group of selector/selectors.
const eleList = document.querySelectorAll('.someclass')
// Getting child nodes
const getIt = document.querySelector('.someclass')
const children = getIt.childNodes
// Getting parent node
const parent = children.parentNode
//A few others you can use
//element.previousSibling
//element.nextSibling
//element.firstChild
//element.lastChild

새 DOM 요소 생성

//create h1 element
const heading = document.createElement('h1');
// create a text node for the element
const headingText= document.createTextNode('This is the h1 heading!');
// Attach the text node to the element
heading.appendChild(headingText);
//Append the element to the body or to a specific element
document.body.appendChild(heading)
element.appendChild(heading)

요소 선택, 콘텐츠 추가, 요소 교체 및 제거

//Select the element
const element = document.querySelector('.someclass')
//Get the inner text , innerText or just using the text
const insideText = element.innerText
//Adding more content to element
element.innerText = insideText + "the new value"
//Replacing the value
element.innerText = "New Value"
//Use innerHTML if you want to add HTML along with it
element.innerHTML = "New Heading Value <a href="https://dev.to/itsfz1">Developer</a>"
//Let's remove this element from the dom tree
element.remove()

다른 위치에 HTML 삽입

const element = document.querySelector('.someclass')
// beforebegin - The HTML would be placed immediately before the element, as a sibling.
// afterbegin - The HTML would be placed inside the element, before its first child.
// beforeend - The HTML would be placed inside the element, after its last child.
// afterend - The HTML would be placed immediately after the element, as a sibling.
element.insertAdjacentHTML("afterbegin
", "<div><p>New Grid Item</p></div>");

클래스 추가, 제거, 전환, 확인

const element = document.querySelector('.someclass')
// Will remove unwanted if it is a class of element
element.classList.remove("unwanted");
//Will add the class 'anotherClass' if one does not already exist
element.classList.add("anotherclass");
// Add or remove multiple classes
element.classList.add("class1", "class2");
element.classList.remove("c1", "c2");
//If "visible" class is set remove it, otherwise add it
element.classList.toggle("visible");
// will return true if it has class of 'exist' or false if it does not
const flag = element.classList.contains("exist");
flag ? "Yes this class exist" : "Not exist"

속성 가져오기, 추가 및 제거

const element = document.querySelector('.someclass')
//will return the link
element.getAttribute("href")
//will set class="awsome"
element.setAttribute("class", "awsome")
//Will remove the attribute from element
element.removeAttribute("class")
//Check for attribute existance, it returns a boolean
if (element.hasAttribute("target")) {
    element.setAttribute("style", "color: green; text-decoration: none;");
  }

다음은 연습용 링크입니다project.

보너스

다음과 같이 한 번에 여러 setAttribute 함수를 사용하지 않고 여러 속성을 할당할 수 있습니다.

const elementInput = document.createElement("input")
 Object.assign(elementInput , {
        className: "textField",
        id: "address",
        name: "address",
        type: "text",
        placeholder: "",
        value: ""
    })
document.body.appendChild(elementInput )

"innerText"와 "textContent"의 차이점은 innerText는 공백 없이 보이는 텍스트만 반환하는 반면 textContent는 공백이 있는 스크립트를 포함하여 보이는 텍스트와 보이지 않는 텍스트를 반환한다는 것입니다.
읽어 주셔서 감사합니다!.