기본 DOM 튜토리얼 : DOM 사용

저자：Eve Cole 업데이트 시간：2025-06-10 07:48:02

DOM (Text Object Model)의 프레임 워크 및 노드를 이해 한 후 가장 중요한 것은 이러한 노드를 사용하여 HTML 웹 페이지를 처리하는 것입니다.

DOM 노드 노드의 경우 사용할 일련의 속성과 방법이 있습니다. 일반적으로 사용되는 표는 다음 표입니다.

개선 : http://www.w3school.com.cn/xmldom/dom_element.asp

1. 액세스 노드

BOM은 노드에 액세스하기위한 몇 가지 경계 방법을 제공합니다. 일반적으로 사용되는 GetElementsByTagName () 및 getElementById ()입니다.

코드 사본은 다음과 같습니다.

함수 검색 () {

var oli = document.getElementsByTagName ( "li");

var j = oli.length;

var j2 = oli [5] .tagname;

var j3 = oli [0] .ChildNodes [0] .nodevalue;

document.write (j+"<br>"+j2+"<br>"+j3+"<br>");

}

</스크립트>

<body>

<ul> 클라이언트 언어

<li> JavaScript </li>

</ul>

<ul> 서버 측 언어

</ul>

</body>

document.getElementByid ()

코드 사본은 다음과 같습니다.

Window.onload = function () {

함수 findId () {

var j4 = oli2.tagname;

document.write (j4);

}

var oli2 = document.getElementById ( "inn");

oli2.onclick = findid;

}

</스크립트>

코드 사본은 다음과 같습니다.

<html>

x = document.getElementsByTagName ( 'div') [0];

document.write ( "div css class :" + x.classname);

document.write ( "<br />");

document.write ( "대체 방법 :");

document.write (document.getElementById ( 'myid'). className);

</스크립트>

</body>

</html>

// ID가 className을 얻습니다

2. 노드 유형 감지

노드 유형은 노드의 노드 타입을 통해 감지 될 수 있고 하나의 매개 변수는 12 정수 값을 반환합니다.

Document.NodeType와 같은 표현식 형식

실제로 유용한 것은 DOM (I) 모델의 모델 노드에서 언급 한 세 가지 유형입니다.

요소 노드, 텍스트 노드 및 속성 노드

1. 요소 노드는 요소 노드의 값을 반환합니다.

2. 속성 노드는 속성 노드의 값을 반환합니다.

3. 텍스트 노드 리턴 값은 3입니다

코드 사본은 다음과 같습니다.

Window.onload = function () {

함수 findId () {

var j5 = oli2.NodeType;

document.write ( "nodetype :" + j5 + "<br>");

}

var oli2 = document.getElementById ( "inn");

oli2.onclick = findid;

}

</스크립트>

반환 : Nodetype : 1

즉, 일부 노드는 별도로 처리 될 수 있으며 노드를 검색 할 때 매우 실용적입니다. 나중에 논의 될 것입니다.

3. 아버지-아들 형제 관계를 사용하여 노드를 찾으십시오

첫 번째 섹션 액세스 노드에서 노드의 ChildNodes 속성을 사용하여 요소 노드에 포함 된 텍스트 노드에 액세스하십시오.

이 섹션은 노드의 아버지 아들 형제 관계를 사용하여 노드를 찾습니다.

*이 노드에 포함 된 모든 노드를 얻으려면 HaschildNodes 및 Childnodes 속성을 사용하십시오.

코드 사본은 다음과 같습니다.

<헤드>

<title> childnodes </title>

window.onload = 함수 mydomispector () {

var oul = document.getElementById ( "mylist"); // <ul> 태그를 가져옵니다

var domstring = "";

if (oul.haschildnodes ()) {// 자식 노드가 있는지 판단합니다

var och = oul.childnodes;

for (var i = 0; i <och.length; i ++) // 하나씩 검색합니다

domstring + = och [i] .nodename + "<br>";

}

document.write (domstring);

}

</스크립트>

</head>

<body>

<li> Kimchi Fish </li>

</ul>

</body>

4. 돔 노드의 상위 노드를 가져옵니다

코드 사본은 다음과 같습니다.

Window.onload = function () {

var food = document.getElementById ( "mydarfood");

document.write (food.parentnode.tagname)

}

</스크립트>

</head>

<body>

<ul>

<li> Kimchi Fish </li>

</ul>

// UL로 돌아갑니다

상위 노드를 사용하여 지정된 노드의 상위 노드가 성공적으로 얻었습니다.

5. ParentNode 속성을 사용하십시오

코드 사본은 다음과 같습니다.

<헤드>

<title> childnodes </title>

Window.onload = function () {

var food = document.getElementById ( "mydarfood");

var parentelm = food.parentnode;

while (parentelm.classname! = "Colorful"&& parentelm! = document.body)

parentelm = parentelm.parentNode; // 끝까지 찾아보세요

document.write ( "tagename :"+parentelm.tagname+"<br>");

document.write ( "Claaname :"+parentelm.classname+"<br>");

document.write ( "typeof :"+typeof (food)+"<br>");

}

</스크립트>

</head>

<body>

<div>

<ul>

<span>

<li> Kimchi Fish </li>

</span>

</ul>

</div>

</body> <br> // output <br> // tagename : div <br> claaname : Colorful <br> typeof : Object

하위 노드로 시작하여 노드 클래스 이름이 "화려한"상태가 될 때까지 상위 노드를 위로 검색하십시오.

6. 돔의 형제애

코드 사본은 다음과 같습니다.

<헤드>

<title> childnodes </title>

Window.onload = function () {

var foods = document.getElementById ( "mydarfood");

var nextf = foods.nextibling;

Alert ( "NexTibling :" +nextf.tagname +"<br>");

}

</스크립트>

</head>

<body>

<div>

<ul>

<span>

<li> Kimchi Fish </li>

</span>

</ul>

</div>

</body>

Nextibling 및 Prevertsibling Properties를 사용하여 형제 노드에 액세스하는 것이 좋습니다.

그러나 IE 브라우저에서만 작동합니다

코드와 호환성이 우수하기 위해서는 Nodetype을 사용하여 판단해야합니다.

다음은 호환성입니다.

코드 사본은 다음과 같습니다.

<헤드>

함수 nextsib (노드) {

var templast = node.parentNode.LastChild;

// 마지막 노드인지 판단하십시오. 그렇다면 NULL을 반환합니다.

if (node == 템플릿)

널 리턴;

var tempobj = node.nextsibling;

// 요소 노드가 발견 될 때까지 후속 형제 노드를 하나씩 검색합니다.

while (tempobj.nodetype! = 1 && tempobj.nextsibling! = null)

tempobj = tempobj.nextsibling;

// 3 점 연산자, 요소 노드 인 경우 노드 자체를 반환하면 NULL을 반환합니다.

return (tempobj.nodetype == 1)? tempobj : null;

}

함수 prevsib (노드) {

var tempfirst = node.parentNode.FirstChild;

// 첫 번째 노드인지 판단하십시오. 그렇다면 NULL을 반환합니다.

if (node == tempfirst)

널 리턴;

var tempobj = node.previousSibling;

// 요소 노드가 발견 될 때까지 이전 형제 노드를 하나씩 검색합니다.

while (tempobj.nodetype! = 1 && tempobj.previoussibling! = null)

tempobj = tempobj.previoussibling;

return (tempobj.nodetype == 1)? tempobj : null;

}

함수 mydomispector () {

var myitem = document.getElementById ( "MyDearFood");

// 다음 요소 형제 노드를 가져옵니다

var nextlistitem = nextsib (myitem);

// 이전 요소 형제 노드를 가져옵니다

var prelistitem = prevsib (myitem);

ALERT ( "마지막 항목 :" + ((NextListItem! = null)? nextListItem.FirstChild.NODEVALUE : NULL) + "PRERLISTITEM :" + ((PRELISTITEM! = NULL)? PRERLISTIM.FIRSTCHILD.NODEVALUE : NULL);

}

</스크립트>

</head>

<ul>

<li> Kimchi Fish </li>

</ul>

</body>

7. 노드 속성을 설정하십시오

코드 사본은 다음과 같습니다.

<헤드>

<title> childnodes </title>

Window.onload = function () {

// 사진을 얻습니다

var imgdatabe = document.getElementsByTagName ( "IMG") [0];

// 사진의 제목 속성을 가져옵니다

imgdatabe.setattribute ( "src", "02.gif");

imgdatabe.setattribute ( "제목", "친절한 경사");

document.write (imgdatabe.getAttribute ( "title"));

document.write (imgdatabe.getAttribute ( "alt"));

document.write (imgdatabe.getAttribute ( "node-data"));

document.write (imgdatabe.getAttribute ( "node_data"));

}

</스크립트>

</head>

<body>

<div>

</body>

setattribute () 메소드를 사용하여 노드 속성을 설정하십시오

코드 사본은 다음과 같습니다.

<헤드>

<title> childnodes </title>

Window.onload = function () {

var bkk = document.getElementById ( "new5");

var clickbk = document.getElementById ( "Qiehuan");

clickbk.onclick = dsqiehuan;

함수 dsqiehuan () {

bkk.setattribute ( "class", "xxx")

}

</스크립트>

<스타일>

.xxx {색상 : #ddd}

</스타일>

</head>

<body>

555

</div>

</body>

8.CreateElement () 생성 노드

코드 사본은 다음과 같습니다.

<헤드>

<title> childnodes </title>

Window.onload = function () {

var op = document.createelement ( "P");

var otext = document.creatextNode ( "dom을 사용하여 노드 생성");

var otext1 = document.creatextNode ( "DOM을 사용하여 노드 만들기 123");

op.appendChild (OTEXT);

op.appendChild (OTEXT1);

document.body.appendChild (OP);

}

</스크립트>

</head>

<body>

<p> 원래 p가 여기에 있었고 테스트 createElement () </p>

</body>

9. RemoveChild는 노드를 제거합니다

코드 사본은 다음과 같습니다.

<헤드>

<title> childnodes </title>

Window.onload = function () {

var op = document.getElementsByTagName ( "P") [0];

op.parentnode.removechild (op); // 결말은 .removechild (op), .removechild ( "op")입니다.

}

</스크립트>

</head>

<body>

<p> 원래 p가 여기에 있었고 테스트 createElement () </p>

</body>

10. INSERTBEFRE () 특정 노드 전에 노드를 삽입합니다

코드 사본은 다음과 같습니다.

<헤드>

<title> childnodes </title>

Window.onload = function () {

var opold = document.getElementsByTagName ( "P") [0];

var opnew = document.createElement ( "P");

var otext = document.creatextNode ( "새 노드")

opnew.appendChild (OTEXT);

opold.parentnode.insertbefore (opnew, opold); // 두 매개 변수를 받으십시오. 하나는 새 매개 변수이고 다른 하나는 이전 노드 매개 변수입니다.

}

</스크립트>

</head>

<body>

<p> 원래 p </p>가있었습니다

</body>

11. 특정 노드 후 새 요소 삽입 (2015 년 1 월 9 일 추가)

DOM이 제공 한 메소드는 insertbefore ()를 사용하여 대상 요소 앞에 새로운 요소를 추가하거나 AppendChild () 메소드를 사용하여 부모 요소의 어린이 끝에서 새 요소를 추가 할 수 있습니다 (예 : 주소).

실제로, 그것은 종종 특정 요소의 끝에 새로운 요소를 추가하는 데 사용됩니다. DOM 메소드에는 insertBefore () 메소드가 없지만 기존 지식을 사용하여 쓰는 데 사용될 수 있습니다.

코드 아이디어는 다음과 같습니다

코드 사본은 다음과 같습니다.

함수 insertAfter (NewElement, TargetElement) {

var Outdoor = TargetElement.parentNode; // 대상 요소의 부모 요소를 찾습니다

if (adarent.lastchild == targetElement) // 대상이 마지막 요소 인 경우

야외. // 마지막 요소에 직접 추가합니다

else // 다음 요소의 상위 요소 노드에 삽입하기 전에

Outdoor.insertbefore (Newlement, TargetElement.Nextsibling)

예 : (요소 외부에 추가) 원본 인스턴스 : 주소

코드 사본은 다음과 같습니다.

<헤드>

<제목> </title>

</head>

함수 insertAfter (NewElement, TargetElement) {

var Outdoor = TargetElement.parentNode; // 대상 요소의 부모 요소를 찾습니다

if (adarent.lastchild == targetElement) // 대상이 마지막 요소 인 경우

야외. // 마지막 요소에 직접 추가합니다

else // 다음 요소의 상위 요소 노드에 삽입하기 전에

Outdoor.insertbefore (Newlement, TargetElement.Nextsibling)

}

함수 interp () {

var ooparent = document.getElementById ( "대상");

var ooonewp = document.createElement ( "a");

Oonewp.setAttribute ( "href", "http://www.qq.com");

var ootextp = document.creatextNode ( "링크");

Oonewp.appendChild (ooetextp);

insertAfter (ooonewp, ooparent);

}

</스크립트>

</body>

예 : 요소에 추가되었습니다

12. 실행 효율성을 향상시키기 위해 문서 조각화를 추가하십시오

코드 사본은 다음과 같습니다.

<헤드>

<title> childnodes </title>

Window.onload = function () {

var opold = document.getElementsByTagName ( "P") [0];

var acolors = [ "빨간색", "녹색", "파란색", "마젠타", "노란색", "초콜릿", "검은 색", "아쿠아 마린", "라임", "Fuchsia", "Brass", "Azure", "Brown", " 청동 ","딥 핑크 ","aliceblue ","그레이 ","그레이 ","구리 ","산호 ","Feldspar ","Orange ","Orchid ","Pink ","Plum ","Quartz ","Purple "];

var ofragment = document.createdOcumentFragment (); // 문서 조각화를 만듭니다

for (var i = 0; i <acolors.length; i ++) {

var op = document.createelement ( "P");

var otext = document.creatextNode (acolors [i]);

op.appendChild (OTEXT);

Ofragment.AppendChild (OP); // 먼저 조각에 노드를 추가합니다

}

//document.body.appendChild (OFRAGMENT); // 마침내 페이지에 추가되었습니다

opold.parentnode.insertbefore (Ofragment, opold); // 노드에 문서 조각을 추가하기 위해 삽입과 결합

}

</스크립트>

</head>

<body>

<p> 원래 p </p>가있었습니다

</body>