JavaScript - 문서 개체 모델(DOM)

<p>DOM에 대한 자세한 설명: 웹 문서용 프로그래밍 인터페이스

<p>DOM(Document Object Model)은 HTML 또는 XML 문서의 구조를 개체 트리로 표현하는 웹 문서용 프로그래밍 인터페이스입니다. DOM을 통해 개발자는 JavaScript를 사용하여 웹 페이지와 동적으로 상호 작용하고 조작할 수 있습니다. HTML DOM을 사용하면 JavaScript가 HTML 요소의 내용을 변경할 수 있습니다.

<p>

<p>HTML 페이지에서 HTML 요소를 찾고 액세스하는 방법은 무엇입니까?

• ID로 HTML 요소 찾기

<p>예:

<code class="language-javascript">const element = document.getElementById("intro");</code>

• 태그 이름으로 HTML 요소 찾기

<p>예:

<code class="language-javascript">const element = document.getElementsByTagName("p");</code>

• 클래스 이름으로 HTML 요소 찾기

<p>예:

<code class="language-javascript">const x = document.getElementsByClassName("intro");</code>

• CSS 선택기를 사용하여 HTML 요소 찾기

<p>지정된 CSS 선택기(ID, 클래스 이름, 유형, 속성, 속성 값 등)와 일치하는 모든 HTML 요소를 찾으려면 querySelectorAll() 메서드를 사용하세요.

<p>예: 클래스 이름이 "intro"인 단락 요소 찾기:

<code class="language-javascript">const x = document.querySelectorAll("p.intro");</code>

• HTML 개체 컬렉션을 사용하여 HTML 요소 찾기

<p>노드

<p>요소, 텍스트, 속성 등 DOM의 모든 것은 노드입니다.

<p>요소 노드:

<p>은 HTML 또는 XML 요소를 나타냅니다. 예: <div>, <h1>, <p>, <span> 등

<code class="language-html"><h1>Hello, World!</h1></code>

<p>위의 예에서 <h1>는 요소 노드입니다.

<p>텍스트 노드:

<p>은 요소 내의 텍스트 콘텐츠를 나타냅니다.

<code class="language-html"><h1>Hello, World!</h1></code>

<p><h1> 요소 내부의 "Hello, World!" 텍스트는 텍스트 노드입니다.

<p>새 HTML 요소(노드) 만들기:

1. 요소 만들기: document.createElement() 메서드를 사용하여 HTML 요소를 만듭니다.
2. 텍스트 노드 생성: document.createTextNode() 메서드를 사용하여 텍스트 노드를 생성합니다.
3. 요소에 텍스트 추가: 이미 생성된 요소에 텍스트 노드를 추가하려면 appendChild() 메서드를 사용합니다.
4. div 요소 만들기: document.createElement()를 다시 사용하여 <div> 요소를 만듭니다.
5. div에 요소 삽입: 이전에 만든 요소를 ​​div에 배치하려면 appendChild()을 사용하세요.
6. 문서에 div 삽입: 마지막으로 문서 본문(또는 원하는 다른 상위 요소)에 div를 추가합니다.

<p>샘플 코드 조각(전체 코드 생략, 핵심 부분만 유지):

<code class="language-javascript">// 创建一个段落元素
const para = document.createElement("p");
// 创建一个文本节点
const text = document.createTextNode("这是一个新的段落！");
// 将文本节点添加到段落元素
para.appendChild(text);
// ... (后续代码将段落元素添加到页面)</code>

<p>HTML 스타일 변경:

<p>구문:

<code class="language-javascript">document.getElementById(id).style.property = new style;</code>

<p>예: (생략)

<..> <p> <..> 위의 방법을 통해 웹 페이지의 내용을 효과적으로 작동하고 수정할 수 있습니다.

위 내용은 JavaScript - 문서 개체 모델(DOM)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!