집 >웹 프론트엔드 >JS 튜토리얼 >js에서 dom 요소를 얻는 방법은 무엇입니까? dom을 통해 요소 객체를 찾고 가져오는 js 메서드(코드 예)

js에서 dom 요소를 얻는 방법은 무엇입니까? dom을 통해 요소 객체를 찾고 가져오는 js 메서드(코드 예)

青灯夜游원래의: 2018-10-11 13:31:564541검색

JS에서 DOM 요소를 얻는 방법은 무엇인가요? 이 기사에서는 JS를 사용하여 DOM을 통해 요소 객체를 찾고 얻는 방법을 소개하므로 JS에서 DOM이 무엇인지, DOM을 통해 요소를 찾고 얻는 방법을 이해할 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

우선 간단히 알아보겠습니다. js에서 dom이란 무엇인가요?

dom: HTML DOM, 웹 페이지가 로드되면 브라우저는 페이지의 문서 개체 모델을 생성합니다.

보통 JavaScript를 통해 HTML 요소를 조작해야 합니다. 이렇게 하려면 먼저 요소를 찾아서 가져와야 합니다. JavaScript:

1에서 DOM을 통해 요소 객체를 찾고 가져오는 세 가지 일반적인 방법을 소개합니다. id로 요소를 찾고 가져옵니다: getElementById()

getElementById() 메서드: ID로 노드 요소를 가져옵니다. 페이지에 동일한 ID를 가진 여러 노드 개체가 포함되어 있으면 첫 번째 노드 개체만 반환됩니다.

구문:

document.getElementById("元素的id");

코드 예: id="box" 상자를 클릭하면 id="box" 상자의 내용을 보여주는 팝업 창이 나타납니다

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div id="box" onclick="getValue()">我是测试代码</div>
		<script>
		function getValue(){
		  var x=document.getElementById("box")
		  alert(x.innerHTML)
		 }
		</script>
	</body>
</html>

렌더링:

js에서 dom 요소를 얻는 방법은 무엇입니까? dom을 통해 요소 객체를 찾고 가져오는 js 메서드(코드 예)

참고: getElementById() 메서드는 대괄호 안의 값이 요소의 id 값이라고 판단하므로 대괄호 앞에 "#"을 추가할 필요가 없습니다. 이 메소드는 DOM 객체를 반환합니다.

2. 태그 이름으로 요소 찾기 및 가져오기: getElementsByTagName()

getElementsByTagName() 메서드: 요소의 태그 이름으로 요소 개체 집합을 찾아서 가져옵니다. 반환 지정된 태그 이름을 가진 개체의 컬렉션입니다.

문법:

document.getElementsByClassName("元素的标签名");

코드 예:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Hello World!</p>

<div id="main">
     <p>The DOM is very useful.</p>
     <p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>

<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write(&#39;id 为 "main" 的 div 中的第一段文本是：&#39; + y[0].innerHTML);
</script>

</body>
</html>

Rendering:

js에서 dom 요소를 얻는 방법은 무엇입니까? dom을 통해 요소 객체를 찾고 가져오는 js 메서드(코드 예)

3 클래스를 통해 요소 찾기 및 가져오기: getElementsByClassName()

getElementsByClassName() 메서드: 다음에 의해 지정됩니다. 클래스 속성 값은 다음과 같이 사용됩니다. 요소를 찾아서 가져옵니다. 지정된 클래스 이름을 가진 요소 컬렉션을 반환합니다. 개체 컬렉션이라고 할 수 있습니다.

문법:

document.getElementsByClassName("元素的class");

코드 예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div id="main">
			<p class="a">我是测试代码1</p>
			<p class="a">我是测试代码2</p>
		</div>
		<script>
			var x = document.getElementById("main");
			var y = x.getElementsByClassName("a");
			document.write(&#39;id 为 "main" 的 div 中的第一段文本是：&#39; + y[0].innerHTML);
		</script>
	</body>
</html>

Rendering:

js에서 dom 요소를 얻는 방법은 무엇입니까? dom을 통해 요소 객체를 찾고 가져오는 js 메서드(코드 예)

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면

JavaScript 비디오 튜토리얼을 방문하세요!

js에서 dom 요소를 얻는 방법은 무엇입니까? dom을 통해 요소 객체를 찾고 가져오는 js 메서드(코드 예)

관련 기사