1.DOM : 문서 개체 모델 dom (문서 개체 모델)은 HTML 문서에 액세스하고 처리하기위한 표준 메소드를 정의합니다. DOM은 HTML 문서를 요소, 속성 및 텍스트로 트리 구조 (노드 트리)로 렌더링합니다.
2. Dom의 일반적으로 사용되는 일부 특성
2.1 ID로 요소를 얻습니다
(1) 구문 :
코드 사본은 다음과 같습니다.
document.getElementById ( "id");
(2) 기능 : ID는 개인의 ID 카드를 나타냅니다. 태그 ID를 찾아 태그를 찾은 다음 해당 작업을 수행 할 수 있습니다.
(3) 참고 : 문서 작성을 잊지 마십시오!
2.2 InnerHtml 속성
(1) 구문 :
코드 사본은 다음과 같습니다.
obgect.innerhtml = "Hello World"
(2) 기능 : 주로 태그의 내용을 얻거나 교체합니다.
(3) 예 :
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> innerhtml </title>
</head>
<body>
<h2 id = "con"> javaScript </h2>
<p> JavaScript는 객체 및 이벤트 중심을 기반으로 한 간단한 스크립팅 언어입니다. HTML 문서에 포함되어 있으며 브라우저에서 해석 및 실행되며 웹 페이지에 동적 디스플레이 효과를 만들고 사용자 상호 작용 기능을 구현합니다. </p>
<script type = "text/javaScript">
var mychar = document.getElementById ( "con");
document.write ( "원본 제목 :"+mychar.innerhtml+"<br>"); // 원래 H2 태그 컨텐츠를 출력합니다
mychar.innerhtml = "Hello World!";
document.write ( "수정 제목 :"+mychar.innerhtml); // 수정 된 H2 태그 컨텐츠를 출력합니다
</스크립트>
</body>
</html>
(4) 참고 : Object는 Document.getElementById ( "id")를 통해 얻은 요소와 같이 얻은 요소 객체입니다.
2.3 HTML 스타일 변경
(1) 구문 :
코드 사본은 다음과 같습니다.
Object.style.property
(2) 기능 : HTML 스타일을 수정하는 데 사용됩니다
(3) 예 :
코드 사본은 다음과 같습니다.
<body>
<h2 id = "con"> 나는 JavaScript를 좋아합니다 </h2>
<p> javaScript를 사용하면 웹 페이지가 동적 효과를 표시하고 사용자 상호 작용 기능을 구현할 수 있습니다. </p>
<script type = "text/javaScript">
var mychar = document.getElementById ( "con");
mychar.style.color = "빨간색";
mychar.style.backgroundcolor = "#ccc";
mychar.style.width = "300px";
</스크립트>
</body>
(4) 참고 : 속성에는 색상, 높이 등과 같은 많은 스타일이 있으며이 방법을 사용하여 수정할 수 있습니다. 세미콜론을 속성에 추가하는 것을 잊지 마십시오.
2.4 표시 및 숨기기 (디스플레이 속성)
(1) 구문 :
Object.style.display = value
(2) 함수 : 디스플레이 및 숨겨진 것은 종종 웹 페이지에서 표시되며 디스플레이 속성을 사용하여 달성됩니다.
(3) 예 :
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
함수 hiddentext ()
{
var mychar = document.getElementById ( "con");
mychar.style.display = "none";
}
함수 showtext ()
{
var mychar = document.getElementById ( "con");
mychar.style.display = "block";
}
</스크립트>
(4) 참고 : 값의 값은없고 블록이 없으며, 아무것도 표시되지 않고 블록이 표시됩니다.
2.5 클래스 이름 속성
(1) 구문 :
코드 사본은 다음과 같습니다.
object.className = className
(2) 기능 : 1. 요소의 클래스 속성을 얻으십시오. 2. 웹 페이지의 요소에 대한 CSS 스타일을 지정하여 요소의 모양을 변경합니다.
(3) 예 :
코드 사본은 다음과 같습니다.
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = gb2312">
<title> ClassName 속성 </title>
<스타일>
바디 {font-size : 16px;}
.하나{
국경 : 1px Solid #eee;
너비 : 230px;
높이 : 50px;
배경 : #CCC;
색상 : 빨간색;
}
.둘{
국경 : 1px Solid #CCC;
너비 : 230px;
높이 : 50px;
배경 :#9CF;
색상 : 파란색;
}
</스타일>
</head>
<body>
<p id = "p1"> javaScript를 사용하면 웹 페이지가 동적 효과를 표시하고 사용자 상호 작용 기능을 구현할 수 있습니다. </p>
<입력 유형 = "버튼"value = "Add Style"onclick = "add ()"/>
<p id = "p2"> javaScript를 사용하면 웹 페이지가 동적 효과를 표시하고 사용자 상호 작용 기능을 구현할 수 있습니다. </p>
<input type = "button"value = "change lovance"onclick = "modify ()"/>
<script type = "text/javaScript">
함수 add () {
var p1 = document.getElementById ( "p1");
p1.classname = "one";
}
함수 modify () {
var p2 = document.getElementById ( "p2");
p2.classname = "2";
}
</스크립트>
</body>
위의 것은이 기사에 관한 모든 것입니다. 나는 당신이 그것을 좋아하기를 바랍니다.