JavaScript의 DOM 객체 분석
- 不言원래의
- 2018-07-14 16:21:091359검색
1. DOM 소개
웹페이지가 로드되면 브라우저는 해당 페이지의 문서 객체 모델, 즉 DOM(Document Object Model)을 생성합니다.
2.DOM 작업 HTML
2.1 HTML 출력 스트림 변경
문서가 로드된 후에는 document.write()를 사용하지 마세요. 문서를 덮어씁니다.
2.2 요소 찾기
ID로 HTML 요소 찾기
태그로 HTML 요소 찾기
2.3 HTML 콘텐츠 변경
속성 사용: 내부 HTML
2.4 HTML 속성 변경
속성 사용: attribute
Object_HTML.html
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--修改-->
<p id="pid">Hello</p>
<button onclick="demo()">按钮</button>
<script>
function demo(){ var nv=document.getElementById("pid");
nv.innerHTML="World";
document.getElementsByName("p");//p如果相同，相同元素的第一个 } </script>
<!--修改属性-->
<br />
<a id="aid" href="http://www.baidu.com">百度</a>
<button onclick="demobd()">跳转</button>
<script>
function demobd(){
document.getElementById("aid").href="index.html";
} </script>
<br />
<img id="iid" src="img/294224.jpg" height="200" width="300"/>
<button onclick="demoimg()">切换</button>
<script>
function demoimg(){
document.getElementById("iid").src="img/308048.jpg";
} </script>
</body></html>
3.DOM 작업 CSS
DOM 개체를 통해 CSS 변경
구문: document .getElementById(id).style.property=new style
Object_CSS.html
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/Object_CSS.css" />
</head>
<body>
<p id="p" class="p">
hello </p>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("p").style.background="blue";
document.getElementById("p").style.color="white";
} </script>
</body></html>css/Object_CSS.css
.p{
background-color: blueviolet;
height: 200px;
width: 300px;
}4.DOM 이벤트 리스너
4.1 DOM EventListenter
메소드: addEventListener()
이 메소드는 지정된 요소에 핸들을 추가하는 데 사용됩니다.
4.3 RemoveEventListener()
메소드 제거 및 핸들 추가
EventListener.html
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<script>
document.getElementById("btn").addEventListener("click",function(){
alert("hello");
}); </script>
<button id="btnjb">句柄</button>
<script>
var x=document.getElementById("btnjb");
x.addEventListener("click",hello);
x.addEventListener("click",world);
x.removeEventListener("click",hello); function hello(){
alert("hello");
} function world(){
alert("world");
} </script>
</body></html>
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 관련 권장 사항:
js의 내장 객체 구문 분석code js의 사용자 정의 객체 구문 분석위 내용은 JavaScript의 DOM 객체 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!