JavaScript_기본 지식을 바탕으로 HTML DOM을 작동하는 기본 방법에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 15:35:57

원래의

1190명이 탐색했습니다.

HTML DOM은 JavaScript HTML 문서의 모든 요소에 대한 액세스를 제공합니다.
HTML DOM(문서 개체 모델)
웹 페이지가 로드되면 브라우저는 페이지의 문서 객체 모델을 생성합니다.
HTML DOM 모델은 객체 트리로 구성됩니다.
JavaScript_기본 지식을 바탕으로 HTML DOM을 작동하는 기본 방법에 대한 자세한 설명
프로그래밍 가능한 개체 모델을 통해 JavaScript는 동적 HTML을 생성할 수 있는 충분한 성능을 얻었습니다.

JavaScript는 페이지의 모든 HTML 요소를 변경할 수 있습니다
JavaScript는 페이지의 모든 HTML 속성을 변경할 수 있습니다
JavaScript는 페이지의 모든 CSS 스타일을 변경할 수 있습니다
JavaScript는 페이지의 모든 이벤트에 반응할 수 있습니다

HTML 요소 찾기
일반적으로 JavaScript를 사용하면 HTML 요소를 조작해야 합니다.
이렇게 하려면 먼저 요소를 찾아야 합니다. 이를 수행하는 방법에는 세 가지가 있습니다.

ID로 HTML 요소 찾기
태그 이름으로 HTML 요소 찾기
클래스 이름으로 HTML 요소 찾기
ID로 HTML 요소 찾기

DOM에서 HTML 요소를 찾는 가장 쉬운 방법은 요소의 ID를 사용하는 것입니다.
이 예에서는 id="intro"인 요소를 찾습니다.
예시

var x=document.getElementById("intro");

로그인 후 복사

요소가 발견되면 메소드는 요소를 객체(x에서)로 반환합니다.
요소를 찾을 수 없으면 x에 null이 포함됩니다.
태그 이름으로 HTML 요소 찾기
이 예에서는 id="main"인 요소를 찾은 다음 id="main" 요소 내의 모든

요소를 찾습니다. 예시

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

로그인 후 복사

클래스 이름으로 HTML 요소 찾기 이 예에서는 getElementsByClassName 함수를 사용하여 class="intro"가 있는 요소를 찾습니다.
예시

var x=document.getElementsByClassName("intro");

로그인 후 복사

HTML 변경 HTML DOM을 사용하면 JavaScript가 HTML 요소의 내용을 변경할 수 있습니다.

HTML 출력 스트림 변경 JavaScript는 동적 HTML 콘텐츠를 생성할 수 있습니다.
오늘 날짜: 2015년 10월 21일 수요일 14:43:25 GMT 0800 (중국 표준시)
JavaScript에서는 document.write()를 사용하여 HTML 출력 스트림에 직접 콘텐츠를 쓸 수 있습니다.
예시

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

로그인 후 복사

램프 문서 로드가 완료된 후에는 document.write()를 사용하지 마십시오. 문서를 덮어쓰게 됩니다.

HTML 콘텐츠 변경 HTML 콘텐츠를 수정하는 가장 간단한 방법은 innerHTML 속성을 사용하는 것입니다.
HTML 요소의 내용을 변경하려면 다음 구문을 사용하세요.
document.getElementById(id).innerHTML=새 HTML
이 예에서는

요소의 내용을 변경합니다.
예시

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

로그인 후 복사

이 예에서는

요소의 내용을 변경합니다.

예시

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

로그인 후 복사

예시를 통한 설명:

요소가 포함되어 있습니다.

우리는 HTML DOM을 사용하여 id="header"인 요소를 가져옵니다

JavaScript는 이 요소(innerHTML)의 내용을 변경합니다

HTML 속성 변경 HTML 요소의 속성을 변경하려면 다음 구문을 사용하세요.

document.getElementById(id).attribute=new value

로그인 후 복사

이 예에서는 JavaScript_기본 지식을 바탕으로 HTML DOM을 작동하는 기본 방법에 대한 자세한 설명 요소의 src 속성을 변경합니다. 예시

<!DOCTYPE html>
<html>
<body>

<img  id="image" src="smiley.gif" alt="JavaScript_기본 지식을 바탕으로 HTML DOM을 작동하는 기본 방법에 대한 자세한 설명" >

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

로그인 후 복사

예시를 통한 설명:

위 HTML 문서에는 id="image"인 JavaScript_기본 지식을 바탕으로 HTML DOM을 작동하는 기본 방법에 대한 자세한 설명

요소가 포함되어 있습니다.