문서 객체의 일반적인 방법_기본 지식

1.getElementById(id)
요소의 ID를 통해 요소에 액세스합니다. 이는 DOM에서 페이지 요소에 액세스하는 기본 방법입니다.
예를 들어, 다음 예에서는 DOM 레이어를 거치지 않고도 DIV의 ID로 빠르게 액세스할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

h

테스트용입니다.

테스트용
<script> .getElementById('divid'); <br>alert(div.nodeName); <br></script>


이 기능을 사용할 때 요소의 ID가 고유하지 않은 경우 첫 번째 A 한정 요소입니다.
IE6에서는 input, checkbox, radio. 및 기타 요소 이름이 지정된 ID와 일치하면

에도 액세스됩니다. 예를 들어 다음 예에서는

코드 복사 코드는 다음과 같습니다.

<입력 이름=' divid' type="text"/ >

테스트용
<script> =document.getElementById('divid' ); <br>alert(div.nodeName) <br></script>



2. getElementsByName(name)

IE6에서 요소 ID가 이 이름과 일치하면 이 요소도 포함되며 getElementsByName()은 다음과 같은 요소 개체에만 사용됩니다. 입력, 라디오, 체크박스 등
아래 예시처럼 george 배열의 길이는 0이 되어야 합니다.

코드 복사

코드는 다음과 같습니다. div name= "george">f

f

3 . getElementsByTagName( tagname)

getElementByTagName은 DOCUMENT 또는 요소에 사용할 수 있습니다. getElementsByTagName은 지정된 태그 이름을 가진 하위 요소의 목록(배열)을 반환합니다. 이 배열을 반복하여 각 개별 하위 요소를 얻을 수 있습니다. 매우 큰 DOM 구조를 처리할 때 이 접근 방식을 사용하면 전체 구조의 범위를 쉽게 좁힐 수 있습니다.

코드 복사
코드는 다음과 같습니다.

head> <script> <u>function start() { </u>// tagName이 body인 모든 요소 가져오기(물론 페이지당 하나만) </a>myDocumentElements =document.getElementsByTagName("body"); </span>myBody=myDocumentElements.item(0); </div>// 본문 하위 요소의 모든 P 요소 가져오기 <div class="codebody" id="code41932">myBodyElements=myBody.getElementsByTagName("p "); <br>//두 번째 P 요소 가져오기<br>myP=myBodyElements.item(1); <br>//이 요소의 텍스트 표시<br>alert(myP.firstChild.nodeValue); <br>} <br></script>

안녕하세요

p>hello< ;/p>


DOM 요소 공통 메소드

1. )
현재 노드 객체에 노드를 추가합니다. 페이지에 콘텐츠를 동적으로 추가하는 데 자주 사용됩니다.
예를 들어 다음과 같이 div에 텍스트 노드를 추가합니다.




코드를 복사합니다.


코드는 다음과 같습니다.

3 , cloneNode(deepBoolean) 현재 노드의 복사된 노드를 복사하여 반환합니다. 복사된 노드는 격리된 노드이며 문서 트리에 없습니다. ID 속성을 포함하여 원래 노드의 속성 값을 복사하므로 이 새 노드를 문서에 추가하기 전에 ID 속성을 고유하게 수정해야 합니다. 물론, ID의 고유성이 중요하지 않다면 처리할 필요가 없습니다.
이 메서드는 부울 매개변수를 지원합니다. deepBoolean이 true로 설정되면 노드 내의 텍스트를 포함하여 현재 노드의 모든 하위 노드가 복사됩니다.

코드 복사 코드는 다음과 같습니다.

p=document.getElementById("mypara")
pclone = p.cloneNode(true)
p.parentNode.appendChild(pclone)
4 , replacementChild(newChild, oldChild)
현재 노드의 하위 노드를 다른 노드로 교체
예:

코드 복사

코드는 다음과 같습니다.

span< script type="text/javascript">

var oldel=document.getElementById("innerspan")

var newel=document.createElement("p"); text=document.createTextNode( "ppppp");
newel.appendChild(text)
document.getElementById("adiv").replaceChild(newel, oldel)


5.insertBefore(newElement, targetElement)
현재 노드에 새 노드를 삽입합니다. targetElement가 null로 설정된 경우 새 노드가 마지막 하위 노드로 삽입됩니다. targetElement Location 앞에 가장 가까운 하위 노드로 삽입되어야 합니다.

코드 복사

코드는 다음과 같습니다. span id= "lovespan">원하는 것은 무엇이든 원합니다! 🎜>

DOM 요소 속성: (다음은 일반적으로 사용됩니다. IE5.0 이상은 mozllia에서 지원됩니다.)
1. childeNodes는 모든 하위 노드 개체를 반환합니다.
예:




코드 복사

코드는 다음과 같습니다.

스님이 마실 물이 있습니다.

두 명의 승려가 마실 물을 나르고 있습니다.

세 스님들은 마실 물이 없었습니다.

<script> <BR>var msg=”” <BR>var mylist=document.getElementById("mylist") for (i=0; i<mylist.childNodes.length; i ){ <BR>var tr=mylist.childNodes[i] <BR>for(j=0;j<tr.childNodes[j].length; j ) { <BR>var td=tr.childNodes[j]; <BR>msg =td.innerText; <BR>} <BR>} <BR>alert(msg); 🎜><BR> <BR>2.innerHTML <BR>이것은 사실상의 표준이며 w3c DOM에 속하지 않지만 DOM을 지원하는 거의 모든 브라우저가 이 속성을 지원합니다. 이 속성을 통해 요소의 HTML을 쉽게 수정할 수 있습니다. </script>

코드 복사 코드는 다음과 같습니다.

New 인간, 뭐? !

return a 각 개별 스타일을 얻고 수정할 수 있는 요소의 스타일 개체에 대한 참조입니다.
예를 들어 다음 스크립트는 요소의 배경색을 수정할 수 있습니다. document.getElementById("test").style.BackgroundColor="yellow"
firstChild는 첫 번째 하위 노드를 반환합니다
5. lastChild는 마지막 하위 노드를 반환합니다
6. parentNode는 상위 노드의 객체를 반환합니다.
7. nextSibling은 다음 형제 노드의 객체를 반환합니다.
8. PreviousSibling은 이전 형제 노드의 객체를 반환합니다.
9. nodeName은 영어 대문자를 사용하여 노드의 HTML 태그 이름을 반환합니다. P, FONT
예를 들어




코드 복사

코드는 다음과 같습니다. < ;div id='test'> ;ddd

<script> if (document.getElementById("test").nodeName=="DIV") <div class="codebody" id="code19906">alert("이것은 a DIV"); <BR> </script>


첫 번째 예:
DOM1.0 자바스크립트를 사용하여 HTML 테이블을 동적으로 생성합니다.



코드 복사

코드는 다음과 같습니다. title>샘플 코드 <script> function start() { <div class="codebody" id="code62890">//body 참조 가져오기<BR>var mybody=document.getElementsByTagName("body").item (0);//<table></table> 요소 생성<BR>mytable = document.createElement("TABLE") <BR>//<TBODY></TBODY&gt ; element<BR>mytablebody = document.createElement("TBODY"); <BR>//행 및 열 생성<BR>for(j=0;j<3;j ) { <BR>//<TR&gt 생성 ;</TR&gt ;요소<BR>mycurrent_row=document.createElement("TR") <BR>for(i=0;i<3;i ) { <BR>//<TD>< /TD> 요소<BR>mycurrent_cell=document.createElement("TD"); <BR>//텍스트 요소 생성<BR>currenttext=document.createTextNode("cell은 행 " j ", 열 " i); 🎜>//Put 새 텍스트 요소가 셀 TD에 추가됩니다. <BR>mycurrent_cell.appendChild(currenttext) <BR>// TR 행에 셀 TD를 추가합니다. <BR>//TR 행에 셀 TD를 추가합니다. <BR>mycurrent_row.appendChild(mycurrent_cell) <BR>} <BR>//TBODY에 행 추가 <BR>mytablebody.appendChild(mycurrent_row) <BR>} <BR>//TABLE에 TBODY 추가 <BR> mytable.appendChild(mytablebody); <BR>// BODY에 TABLE 추가 <BR>mybody.appendChild(mytable); <BR>// mytable의 테두리 속성을 2로 설정 <BR>mytable.setAttribute("border", " 2") <BR></script>
>


먼저 테이블 요소를 생성합니다.
다음으로, TABLE 요소의 하위 요소인 TBODY 요소를 생성합니다.
그러나 이제 둘 사이에는 연결이 없습니다.
다음으로 루프를 사용하여 TBODY 요소의 하위 요소인 TR 요소를 만듭니다.
각 TR에 대해 루프를 사용하여 TR의 하위 요소인 TD 요소를 생성합니다.
각 TD에 대해 텍스트 노드 요소를 생성합니다.
이제 이러한 TABLE, TBODY, TR, TD 및 텍스트 요소를 생성했지만 이들 간의 계층적
관계는 설정되지 않았습니다. 그런 다음 각 객체를 역순으로 상위 노드에 추가합니다.
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
mytablebody.appendChild(mycurrent_row);
mytable.appendChild(mytablebody)
이제 DOM 계층은 다음과 같습니다. :
BODY

TABLE

TBODY

TR------TR---- --- -----------TR

TD------TD-----TD TD------TD-----TD TD-- --- TD-----TD

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

더보기

인기 기사

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

3 몇 주 전 By DDD

Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법

2 몇 주 전 By DDD

Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다

3 몇 주 전 By DDD

어 ass 신 크리드 섀도우 - 대장장이를 찾고 무기 및 갑옷 커스터마 화 잠금 해제 방법

1 몇 달 전 By DDD

<s> : 데드 레일 - 모든 도전을 완료하는 방법

3 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7621

15

Cakephp 튜토리얼

1389

52

Steam의 계정 이름 형식은 무엇입니까?

89

11

Win11 활성화 키 영구

70

19

NYT 연결 힌트와 답변

31

136

더보기

Related knowledge

PHP의 json_encode() 함수를 사용하여 배열 또는 객체를 JSON 문자열로 변환 Nov 03, 2023 pm 03:30 PM

JSON(JavaScriptObjectNotation)은 웹 애플리케이션 간의 데이터 교환을 위한 일반적인 형식이 된 경량 데이터 교환 형식입니다. PHP의 json_encode() 함수는 배열이나 객체를 JSON 문자열로 변환할 수 있습니다. 이 기사에서는 구문, 매개변수, 반환 값 및 구체적인 예를 포함하여 PHP의 json_encode() 함수를 사용하는 방법을 소개합니다. 구문 json_encode() 함수의 구문은 다음과 같습니다. st

MySQL 쿼리 결과 배열을 객체로 변환하는 방법은 무엇입니까? Apr 29, 2024 pm 01:09 PM

MySQL 쿼리 결과 배열을 객체로 변환하는 방법은 다음과 같습니다. 빈 객체 배열을 만듭니다. 결과 배열을 반복하고 각 행에 대해 새 개체를 만듭니다. foreach 루프를 사용하여 각 행의 키-값 쌍을 새 개체의 해당 속성에 할당합니다. 개체 배열에 새 개체를 추가합니다. 데이터베이스 연결을 닫습니다.

Python의 __contains__() 함수를 사용하여 객체의 포함 작업을 정의합니다. Aug 22, 2023 pm 04:23 PM

Python의 __contains__() 함수를 사용하여 객체의 포함 작업을 정의합니다. Python은 다양한 유형의 데이터를 처리할 수 있는 많은 강력한 기능을 제공하는 간결하고 강력한 프로그래밍 언어입니다. 그 중 하나는 __contains__() 함수를 정의하여 객체의 포함 작업을 구현하는 것입니다. 이 기사에서는 __contains__() 함수를 사용하여 객체의 포함 작업을 정의하는 방법을 소개하고 몇 가지 샘플 코드를 제공합니다. __contains__() 함수는 Python입니다.

소스 코드 탐색: Python에서 객체는 어떻게 호출되나요? May 11, 2023 am 11:46 AM

웨지 우리는 객체가 두 가지 주요 방법으로 생성된다는 것을 알고 있습니다. 하나는 Python/CAPI를 사용하는 것이고, 다른 하나는 유형 객체를 호출하는 것입니다. 내장 유형의 인스턴스 객체의 경우 두 가지 방법이 모두 지원됩니다. 예를 들어 목록은 [] 또는 list()를 통해 생성할 수 있으며 전자는 Python/CAPI이고 후자는 호출 유형 객체입니다. 그러나 사용자 정의 클래스의 인스턴스 객체의 경우 유형 객체를 호출해야만 생성할 수 있습니다. 객체를 호출할 수 있으면 해당 객체는 호출 가능하고, 그렇지 않으면 호출할 수 없습니다. 객체가 호출 가능한지 여부는 해당 유형 객체에 메서드가 정의되어 있는지 여부에 따라 결정됩니다. 좋다

PHP에서 배열과 객체의 차이점은 무엇입니까? Apr 29, 2024 pm 02:39 PM

PHP에서 배열은 순서가 지정된 시퀀스이며 요소는 인덱스로 액세스됩니다. 객체는 new 키워드를 통해 생성된 속성과 메서드가 있는 엔터티입니다. 배열 액세스는 인덱스를 통해 이루어지며, 객체 액세스는 속성/메서드를 통해 이루어집니다. 배열 값이 전달되고 객체 참조가 전달됩니다.

document.cookie를 얻을 수 없는 문제를 해결하는 방법 Nov 23, 2023 am 10:02 AM

document.cookie를 얻을 수 없는 경우: 1. 브라우저 개인정보 보호 정책, 3. HTTPOnly 쿠키, 5. 쿠키가 존재하지 않거나 만료됨, 7. .뷰어 모드; 8. 서버 문제 9. JavaScript 실행 타이밍 등을 확인하십시오.

Javascript 객체의 5가지 루프 순회 방법에 대한 자세한 설명 Aug 04, 2022 pm 05:28 PM

Javascript 객체를 반복하는 방법은 무엇입니까? 다음 글에서는 JS 객체 탐색 방법 5가지를 자세히 소개하고, 이 5가지 방법을 간략하게 비교해 보도록 하겠습니다.

PHP 함수는 어떻게 객체를 반환하나요? Apr 10, 2024 pm 03:18 PM

PHP 함수는 return 문과 객체 인스턴스를 사용하여 객체를 반환함으로써 데이터를 사용자 정의 구조로 캡슐화할 수 있습니다. 구문: functionget_object():object{}. 이를 통해 사용자 정의 속성과 메소드를 사용하여 객체를 생성하고 객체 형태로 데이터를 처리할 수 있습니다.

See all articles

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개 부인 성명 Sitemap

© php.cn All rights reserved