简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

js에서 일반적으로 사용되는 DOM 메소드에 대한 자세한 설명

高洛峰
풀어 주다： 2017-02-06 09:16:06
원래의
1487명이 탐색했습니다.

js DOM의 몇 가지 일반적인 방법 소개

요소 노드 가져오기 getElementById getElementsByTagName getElementsByClassName

먼저 테스트용 간단한 웹 페이지를 작성합니다. 

/*
　　test.html
*/
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>test</title>
</head>
<body>
 <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">这段的id是contentId。</p>
 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">这段的class name是contentClass。</p>
</body>
</html>
로그인 후 복사

1.

1. 먼저 변수 var contentId = document.getElementById("contentId");

를 정의합니다.

2. 그런 다음 개체 contentId를 출력하고 ID가 contentId인 요소 개체를 반환합니다(

). 아래 그림을 참조하세요.

js常用DOM方法详解

2. getElementsByTagName

1. 먼저 변수를 정의합니다. var contentTag = document.getElementsByTagName("p")

2. 그런 다음 HTMLCollection [ , ]을 반환하는 contentTag를 출력합니다. 하나는 #으로 시작하여 클래스를 나타냅니다. 이름.

3. 계속해서 contentTag[0] 및 출력

contentTag[ 1] 출력

js常用DOM方法详解

이로부터 우리는 볼 수 있습니다 getElementsByTagName 반환되는 것은 배열입니다!

3. getElementsByClassName

1. var contentClass = document.getElementsByClassName("contentClass");

2. contentClass 출력 HTMLCollection [ 요소 객체가 하나만 있는 경우에도 배열입니다.

3. contentClass[0] 출력

js常用DOM方法详解

또한 일부 정보를 얻기 위해 일반적으로 getAttribute, setAttribute, ChildNodes, nodeType, nodeValue, firstChild 및 lastChild 메소드를 사용합니다.

4. getAttribute 및 setAttribute를 사용하여 각각 속성을 가져오고 설정합니다.

js常用DOM方法详解

스타일 속성을 변경한 후:

js常用DOM方法详解

5. 그러면 이것은 childNOdes입니다:

js常用DOM方法详解

즉,

개행 문자
가 있으며 브라우저는 하위 노드를 찾을 때 이를 텍스트 노드로 처리합니다. childNodes도 배열을 반환한다는 것을 그림에서 볼 수 있습니다.

라면 어떨까요?

js常用DOM方法详解

nodeType 값에는 12가지 유형이 있으며 일반적으로 사용되는 세 가지 유형이 있습니다. 1은 요소 노드를 나타내고, 2는 속성 노드를 나타내고, 3은 텍스트 노드를 나타냅니다.

nodeValue는 텍스트 노드의 값을 가져올 수 있을 뿐만 아니라 텍스트 노드의 값을 변경할 수도 있습니다.

js常用DOM方法详解

이 글의 내용이 모두의 공부나 업무에 조금이나마 도움이 되었으면 좋겠습니다. 중국사이트!

js에서 흔히 사용되는 DOM 메소드에 대한 자세한 설명은 PHP 중국어 홈페이지를 참고해주세요!

관련 라벨：
js DOM 方法
원천：php.cn
이전 기사：JavaScript 객체지향 필수사항 다음 기사：자바스크립트의 DOM 메소드에 대한 간략한 토론
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
React의 정렬 메서드에서 렌더링(필터 및 페이지 매김 사용)을 트리거하는 방법은 무엇입니까? 내 Sort.js 스타일 구성 요소는 다음과 같습니다. <SortWrapper><SortText>SortBy</SortText>&...
에서 2024-04-06 21:28:37
0
1
2257
스도쿠 검사기가 작동하지 않나요? 오류를 식별하는 데 도움을 줄 수 있는 사람이 있나요? 온라인 편집기에서 모든 것을 시도했지만 여전히 오류가 발생합니다. 하지만 내 컴퓨터의 VSCode에서 이 작업을 수행하면 제대로 작동합니다. 혼란스러워서 버그를 ...
에서 2024-04-06 21:21:07
0
1
474
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
MySQL SQL 쿼리를 사용하여 다른 테이블의 필드 합계를 계산합니다. 다음과 같은 스키마가 있습니다. "user_id" 및 "username" 속성이 있는 사용자 테이블과 "custome...
에서 2024-04-06 19:39:29
0
1
441
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！