js에서 dom 요소를 얻는 방법은 무엇입니까? dom을 통해 요소 객체를 찾고 가져오는 js 메서드(코드 예)-JS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2018-10-11 13:35:21

원래의

4502명이 탐색했습니다.

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 메서드(코드 예)