javaScript-DOM(생성, 조회, 수정)

documnet.createElement()

 

메모리에만 존재하는 새로운 HTML 요소를 생성해 반환.

 

파라미터에 태그 이름을 넣어서 메서드를 사용하면 된다.

 

// 새로운 <div> 요소를 생성합니다.
var newDiv = document.createElement("div");

// 새로운 <p> 요소를 생성합니다.
var newParagraph = document.createElement("p");

// 새로운 <a> 요소를 생성합니다.
var newLink = document.createElement("a");

이렇게 생성된 요소는 아직 문서에 추가되지 않았으며, 

원하는 위치에 추가하거나 다른 요소와 조작할 수 있다.

 

예를 들어, 요소를 문서에 추가하려면 appendChild()나 insertBefore()  같은 메서드를 사용할 수 있다.

 

그 전에 prepend()와 append()에 대해서 알아보자

 

 

---

 

 

E.prepend() / E.append()

 

노드를 요소의 첫 번째 혹은 마지막 자식으로 삽입한다.

 

var parentElement = document.getElementById("parent");
var newDiv = document.createElement("div");
newDiv.textContent = "New Div";

parentElement.prepend(newDiv);

먼저 prepend 메서드를 보자.

 

1. ID가 parent인 부모 요소를 parentElement라고 변수 지정

2. div요소를 새로 생성하고 newDiv라고 변수 지정.

3. newDiv의 텍스트 내용을 "New Div"라고 선언.

4. parentElement 첫 번째 자식으로 내용이 "New Div"이고 div로 감싸진 태그 삽입.

 

var parentElement = document.getElementById("parent");
var newParagraph = document.createElement("p");
newParagraph.textContent = "New Paragraph";

parentElement.append(newParagraph);

똑깥은 서순을 밟으면 

append는 마지막 자식으로 삽입.

 

---

E.remove()

 

요소 제거.

 

<div id="toBeRemoved">이 요소는 삭제됩니다.</div>

var elementToRemove = document.getElementById("toBeRemoved");
elementToRemove.remove();

remove... 알기 쉽다..! 삭제 !

 

---

E.insertAdjacentElement()

 

'대상 요소'의 지정한 위치에 '새로운 요소'를 삽입합니다.

대상_요소.insertAdjacentElement(위치, 새로운_요소)

 

<div id="target">이 요소에 새로운 요소를 삽입합니다.</div>

var targetElement = document.getElementById("target");
var newElement = document.createElement("p");
newElement.textContent = "새로운 단락입니다.";

// targetElement 요소의 바로 앞에 새로운 요소를 삽입합니다.
targetElement.insertAdjacentElement("beforebegin", newElement);

 

뭔가 기존 것들 보다 복잡한 것 같지만 그렇지 않다.

 

"대상 요소"를 주의깊게 보자.

 

대상 요소를 기준으로 요소를 어디에 삽입할지 정하는 것이다.

 

그리고 파라미터는 위치, 새로 넣을 요소.

 

참고로 위치는 여러 위치가 있다.

 

"beforebegin": element 요소의 바로 앞에 삽입
"afterbegin": element 요소의 첫 번째 자식 요소로 삽입
"beforeend": element 요소의 마지막 자식 요소로 삽입
"afterend": element 요소의 바로 뒤에 삽입

 

---

N.insertBefore()

 

'부모 노드'의 자식인 '참조 노드'의 형제로 '노드'를 삽입한다.

 

부모_노드.insertBefore(노드, 참조_노드)

 

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

var myList = document.getElementById("myList");
var newListItem = document.createElement("li");
newListItem.textContent = "New Item";

// "Item 2" 아래에 새로운 요소를 삽입
var referenceNode = myList.querySelector("li:nth-child(2)");
myList.insertBefore(newListItem, referenceNode);

말이 어려워 보이지만, 차근차근 해석해보자.

 

결론은 부모노드의 자식인 참조 노드와 동등한 등급의 형제 요소를 추가한다는 것이다.

결과,

<ul id="myList">
    <li>Item 1</li>
    <li>New Item</li> <!-- "Item 2" 앞에 추가됨 -->
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

---

N.contains()

 

'주어진 노드'가 '노드'의 자신을 포함한 후손인지 확인한다.

노드.contains(주어진_노드)

 

<div id="parent">
    <p id="child">이것은 자식 요소입니다.</p>
</div>

var parentElement = document.getElementById("parent");
var childElement = document.getElementById("child");

var isContained = parentElement.contains(childElement);

console.log(isContained); // 출력: true

부모 요소인 <div>가 자식 요소인 <p>를 포함하는지 여부를 확인한다.

 

---

N.textContent

 

노드의 모든 텍스트를 얻거나 변경한다.

 

<p id="myParagraph">이것은 <strong>강조된</strong> 문장입니다.</p>

var paragraph = document.getElementById("myParagraph");
var textContent = paragraph.textContent;

console.log(textContent); // 출력: "이것은 강조된 문장입니다."

쉽다. 많이 써봐서 더 더 쉽다..

 

---

E.innerHTML

 

요소의 모든 HTML 내용을 하나의 문자로 얻거나

새로운 HTML을 지정한다.

 

<p id="myDiv">이것은 <strong>강조된</strong> 문장입니다.</p>

ㅍvar myDiv = document.getElementById("myDiv");
var innerHTML = myDiv.innerHTML;

console.log(innerHTML);
// <p>이것은 <strong>강조된</strong> 문장입니다.</p>

쉽다..!!

 

또한 해당 요소의 내부 HTML 코드를 변경할 수도 있다.

 

myDiv.innerHTML = "<p>새로운 HTML 코드입니다.</p>";