Javascript 기본 튜토리얼: HTML 요소를 얻는 방법

ID로 html 요소 가져오기

document.getElementById()

예:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>getElementById</title>	
</head>
<body>
	<h2><a href="www.php.cn">Javascript DOM</a></h2>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementById('sp');
		document.write(sum);
	</script>
</body>
</html>

head 태그에 스크립트 문을 넣으면 null이 출력됩니다.

그런 다음 아래에서는 innerHTML을 살펴보고 html 요소

아래 예시를 작성해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementById("sp");
		alert(sum.innerHTML);
	</script>
</body>
</html>

이렇게 하면 php 중국어 사이트가 출력되고, js 코드가 실행되면 php 중국어 사이트가 팝업됩니다.

합계를 다시 할당할 수도 있습니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementById("sp");
		sum.innerHTML="玩转javascript";
		alert(sum.innerHTML);
	</script>
</body>
</html>

친구 여러분, Firebug 디버깅 페이지를 열고 단축키 F12를 누르세요

태그 이름으로 HTML 요소 찾기

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementsByTagName("p");
		document.write(sum);
	</script>
</body>
</html>

는 배열 컬렉션을 반환합니다. 다음 코드를 참조하세요.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>

	<script type="text/javascript">
		var sum=document.getElementsByTagName("li");
		//alert(sum);  //返回一个数组集合
		//alert(sum.length);//返回数组数量
		//alert(sum[0]);  //返回HTMLLIElement  li的节点对象
		//alert(sum.item(0)); //同上，意义一样
		//alert(sum[0].tagName);  //返回第一个标签的名字
		alert(sum[0].innerHTML);  //显示第一个标签的内容
	</script>
</body>
</html>

다음을 살펴보겠습니다. 본문 노드 개체를 가져오는 방법은 다음과 같습니다. 하지만 html에서는 한 쌍의 몸체만 있고 두 번째 몸체 쌍은 없습니다

코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum=document.getElementsByTagName("body")[0];
		alert(sum);
	</script>
</body>
</html>

getElementsByName

동일한 이름의 요소를 가져와 객체 배열을 반환합니다.

다음 code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
		<div name="test">php 中文网</div>

	<script type="text/javascript">
		var sum=document.getElementsByName("test")[0];
		alert(sum);
	</script>
</body>
</html>

IE Firefox와 Google Chrome의 차이점에 유의하세요. Firefox와 Google 모두 이를 지원합니다. IE 브라우저의 name 속성은 div 자체의 속성이 아니므로 IE는 일반적으로 이를 무시합니다. 양식에 이름을 적용하면 더

getElementsByClassName

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
		<div name="test" class="dv">php 中文网</div>

	<script type="text/javascript">
		var sum=document.getElementsByClassName("dv");
		alert(sum);
	</script>
</body>
</html>

는 객체를 반환합니다.

으아아아

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>getElementById</title> </head> <body> <h2><a href="www.php.cn">Javascript DOM</a></h2> <p id="sp">php中文网</p> <script type="text/javascript"> var sum = document.getElementById('sp'); document.write(sum); </script> </body> </html>

제출하다 코드 재설정

자동운전