JavaScript를 사용하여 DOM 노드를 수정하는 방법

웹 애플리케이션이 개발되면서 JavaScript는 필수적인 부분이 되었습니다. JavaScript를 사용하여 웹 콘텐츠를 수정하고 동적 효과를 얻을 수 있습니다. 그 중에서도 DOM을 수정하는 것은 웹페이지와 상호작용하는 핵심이기 때문에 매우 중요한 부분입니다.

DOM이란 무엇인가요?
DOM은 HTML 문서의 트리 구조 표현인 문서 개체 모델입니다. 이 문서에서 각 HTML 요소는 ,

,

등과 같은 노드입니다. 예를 들어, 노드

는 하위 노드 를 포함할 수 있으며 클래스, ID 등과 같은 속성도 가질 수 있습니다. JavaScript는 이러한 노드를 조작하여 웹페이지의 콘텐츠를 변경합니다.

노드를 선택하는 방법은 무엇입니까?
DOM을 조작하려면 노드를 선택해야 합니다. 이는 다양한 방법으로 달성할 수 있으며 주요 방법은 다음과 같습니다.

1. ID로 노드 선택

document.getElementById() 메서드를 사용하여 지정된 ID를 기반으로 노드를 선택합니다. 아래와 같이:

var myNode = document.getElementById("myNode");

위 코드는 id="myNode"인 HTML 요소를 선택합니다.

2. 클래스별로 노드 선택

동일한 클래스 속성을 가진 하나 이상의 노드를 선택하려면 getElementsByClassName() 메서드를 사용할 수 있습니다. 아래와 같이:

var myNodes = document.getElementsByClassName("classNode");

위 코드는 클래스 속성이 "classNode"와 동일한 모든 HTML 요소를 선택합니다.

3. 태그 이름으로 노드 선택

지정된 태그 이름을 가진 모든 노드를 선택하려면 getElementsByTagName() 메서드를 사용할 수 있습니다. 아래와 같이:

var myNodes = document.getElementsByTagName("p");

위 코드는 문서의 모든

태그를 선택합니다.

DOM 노드 속성의 작동
DOM 노드에는 ID, 클래스, 제목 등과 같은 많은 속성이 있습니다. JavaScript를 통해 이러한 속성의 값을 수정하거나 가져올 수 있습니다. 다음은 일반적으로 사용되는 DOM 노드 속성 조작 방법입니다.

1. innerHTML 속성 가져오기 또는 설정

getInnerHTML() 메서드를 사용하여 노드의 innerHTML 속성을 가져올 수 있습니다. setInnerHTML() 메서드를 사용하여 노드의 innerHTML 속성을 설정할 수도 있습니다. 아래와 같이

var myNode = document.getElementById("myNode");

// 获取节点的innerHTML属性
var myNodeInnerHTML = myNode.innerHTML;

// 设置节点的innerHTML属性
myNode.innerHTML = "新的HTML内容";

2. innerText 속성을 가져오거나 설정하세요

innerText 속성을 얻으려면 getInnerText() 메서드를 사용하고, innerText 속성을 설정하려면 setInnerText() 메서드를 사용할 수 있습니다. 아래와 같이

var myNode = document.getElementById("myNode");

// 获取节点的innerText属性
var myNodeInnerText = myNode.innerText;

// 设置节点的innerText属性
myNode.innerText = "新的文本内容";

3. nodeType 속성을 가져오거나 설정합니다.

nodeType 속성은 현재 노드의 유형을 반환합니다. getNodeType() 메서드를 사용하여 노드의 nodeType 속성을 가져올 수 있습니다. setNodeType() 메서드를 사용하여 노드의 nodeType 속성을 설정할 수도 있습니다. 아래와 같이

var myNode = document.getElementById("myNode");

// 获取节点的nodeType属性
var myNodeType = myNode.nodeType;

// 设置节点的nodeType属性
myNode.nodeType = 1;

4. nodeName 속성을 가져오거나 설정합니다.

nodeName 속성은 노드의 이름을 반환합니다. getnodeName() 메서드를 사용하여 노드의 nodeName 속성을 가져올 수 있습니다. setnodeName() 메서드를 사용하여 노드의 nodeName 속성을 설정할 수도 있습니다. 아래와 같이:

var myNode = document.getElementById("myNode");

// 获取节点的nodeName属性
var myNodeName = myNode.nodeName;

// 设置节点的nodeName属性
myNode.nodeName = "span";

5. nodeValue 속성을 가져오거나 설정합니다.

nodeValue 속성은 노드의 값을 반환하거나 설정합니다. nodeValue 속성은 getNodeValue() 메서드를 사용하여 얻을 수 있습니다. 속성 값을 설정하려면 setNodeValue() 메서드를 사용합니다. 아래와 같이:

var myNode = document.getElementById("myNode");

// 获取节点的nodeValue属性
var myNodeValue = myNode.nodeValue;

// 设置节点的nodeValue属性
myNode.nodeValue = "新的节点内容";

6. className 속성을 가져오거나 설정합니다.

className 속성은 노드의 클래스 이름을 반환하거나 설정합니다. className 속성은 getclassName() 메서드를 사용하여 얻을 수 있습니다. 속성 값을 설정하려면 setclassName() 메서드를 사용할 수 있습니다. 아래와 같이

var myNode = document.getElementById("myNode");

// 获取节点的className属性
var myClassName = myNode.className;

// 设置节点的className属性
myNode.className = "newClass";

7. id 속성을 가져오거나 설정합니다.

id 속성은 노드의 ID를 반환하거나 설정합니다. id 속성은 getId() 메소드를 사용하여 얻을 수 있습니다. 속성 값을 설정하려면 setId() 메소드를 사용할 수 있습니다. 아래와 같이

var myNode = document.getElementById("myNode");

// 获取节点的id属性
var myId = myNode.id;

// 设置节点的id属性
myNode.id = "newNode";

DOM 노드 생성 및 삽입
DOM 노드 속성을 수정하는 것 외에도 DOM 노드를 생성하여 기존 DOM 구조에 삽입할 수도 있습니다.

DOM 노드 만들기
DOM 노드를 만들려면 createElement() 메서드를 사용할 수 있습니다. 아래와 같이:

// 创建一个新的 <p> 元素
var newNode = document.createElement("p");

// 设置元素的内容
newNode.innerHTML = "新的 HTML 内容";

// 将新元素添加到文档中
document.body.appendChild(newNode);

DOM 노드 삽입
DOM 노드를 삽입하는 방법은 다음과 같습니다.

1. 상위 노드 삽입
   상위 노드 끝에 요소를 추가하려면appendChild() 메서드를 사용하세요. 아래와 같이:

var parent = document.getElementById("parent");

// 创建新的 <li> 元素
var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 将新元素添加到父节点的末尾
parent.appendChild(newNode);

2. Insert 형제 노드
   insertBefore() 메서드를 사용하여 다른 노드 앞에 새 노드를 삽입합니다. 아래와 같이

var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 将新元素添加到 "node" 元素之前
parent.insertBefore(newNode, node);

3. Replace Node
   replaceChild() 메서드를 사용하여 노드를 교체합니다. 아래와 같이

var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 替换父节点下的第二个子节点
parent.replaceChild(newNode, parent.childNodes[1]);

DOM 노드 제거
DOM 노드는 다양한 방법으로 제거할 수 있습니다. 다음은 일반적으로 사용되는 몇 가지 방법입니다.

1. 하위 노드 제거
   removeChild() 메서드를 사용하여 하위 노드를 제거합니다. 아래와 같이

var parent = document.getElementById("parent");

// 移除 "node" 元素
parent.removeChild(node);

2. Remove self
   remove() 메소드를 사용하여 노드 자체를 제거할 수 있습니다. 아래와 같이

var node = document.getElementById("node");

// 移除节点本身
node.remove();

요약
JavaScript를 사용하여 DOM을 조작하면 HTML 마크업 및 텍스트 콘텐츠를 포함한 웹페이지 콘텐츠를 쉽게 수정할 수 있습니다. 노드를 선택하고, 노드 속성을 변경하고, 새 요소를 생성 및 삽입하고, 기존 노드를 삭제할 수 있습니다. 이러한 작업을 통해 웹사이트는 사용자 행동을 동적으로 업데이트하고 응답할 수 있습니다.

위 내용은 JavaScript를 사용하여 DOM 노드를 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!