DoM 검색 결과

15개 발견
  1. 미리보기
    2015.06.13 - Palpit

    [javascript] 63. DOM Node List - 자바스크립트 강좌 JS / CSE

  2. 미리보기
    2015.06.13 - Palpit

    [javascript] 62. DOM Node - 자바스크립트 강좌 JS / CSE

  3. 미리보기
    2015.06.13 - Palpit

    [javascript] 61. DOM Navigation - 자바스크립트 강좌 JS / CSE

  4. 미리보기
    2015.06.13 - Palpit

    [javascript] 60. DOM Event Listener - 자바스크립트 강좌 JS / CSE

  5. 미리보기
    2015.06.13 - Palpit

    [javascript] 59. DOM Event - 자바스크립트 강좌 JS / CSE

  6. 미리보기
    2015.06.13 - Palpit

    [javascript] 58. DOM CSS - 자바스크립트 강좌 JS / CSE

  7. 미리보기
    2015.06.13 - Palpit

    [javascript] 57. DOM HTML - 자바스크립트 강좌 JS / CSE

  8. 미리보기
    2015.06.13 - Palpit

    [javascript] 56. DOM 요소(DOM elements) - 자바스크립트 강좌 JS / CSE

조회수 확인


JavaScript HTML DOM Node List

 노드 목록은 노드의 집합입니다.






1. HTML DOM Node List

 getElementsByTagName() 메소드는 노드 목록을 반환합니다. 노드 목록은 배열 같은 노드 집합입니다.


 아래 코드는 문서의 모든 <p> 노드를 가져옵니다.



1
var x = document.getElementsByTagName("p");
cs
 







2. HTML DOM Node List Length

 length 속성은 노드 목록의 노드의 수를 정의 합니다:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <body>
 
    <p>Hello World!</p>
 
    <p>How many paragraphs in this document?</p>
 
    <p>This example demonstrates the length property of a nodelist.</p>
 
    <p id="demo"></p>
 
<script>
var myNodelist = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myNodelist.length;
</script>
 
    </body>
</html>
 
cs
 


 


 


 1. 노드 목록에서 모든 <p> 요소를 가져옵니다.

 2. 노드 목록의 길이를 출력합니다.

 

 length 속성은 노드 리스트 내의 노드들을 통하여 반복문을 돌 때 유용합니다.


1
2
3
4
5
6
 
var    myNodelist = document.getElementsByTagName("p");
var i;
for (i = 0; i <    myNodelist.length; i++) {
       myNodelist[i].style.backgroundColor = "red";
}
cs



 * 노드 목록은 배열이 아닙니다!

  노드 배열은 배열 같지만, 배열이 아닙니다. 노드 목록을 통하여 반복문을 돌아 각 노드를 배열처럼 참조 할 수 있습니다.

  그러나, valueOf()나 join()과 같은 배열 메소드는 노드 목록에서 사용하면 안됩니다!



다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인

JavaScript HTML DOM Elements (Nodes)

 





1. Creating New HTML Elements (Nodes)

 HTML DOM에 새로운 요소를 추가하기 위해서, 먼저 요소를 생성하고, 존재하는 요소에 덧붙이면 됩니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);
</script>
cs




  8번 라인은 <p> 요소를 새로  생성하는 코드입니다.


  9번 라인은 8번에서 생성한 요소를 추가하기 전에, 텍스트 노드를 만드는게 먼저입니다. 텍스트 노드를 만드는 코드입니다.


  10번 라인은 생성한 텍스트 노드를 <p> 요소에 붙이는 코드입니다.


  12번 라인은 기존의 존재하는 div1 아이디를 가진 요소를 찾는 코드입니다.


  13번 라인은 생성된 <p> 요소에 위에서 찾은 요소에 덧붙이는 코드입니다.







2. Creating new HTML Elements - insertBefore()

 appendChild() 메소드는 새로운 요소를 부모의 마지막 자식으로 붙이는 메소드 입니다.


 마지막 자식으로 붙이기 싫다면, insertBefore() 메소드를 사용하십시오.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <body>
 
    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    </div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script>
 
    </body>
</html>
 
cs
 



 

 






3. Removing Existing HTML Elements

 HTML 요소 제거를 위해서, 부모 요소를 알고 있어야 합니다:



1
2
3
4
5
6
7
8
9
10
11
 
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
cs





 HTML 문서는 2 개의 자식 노드를 갖는 <div> 요소를 가지고 있습니다.


 8번 라인에서 div1 아이디를 갖는 요소를 찾습니다.

 

 9번 라인에서 p1 아이디를 갖는 요소를 찾습니다.


 10번 라인에서 div1의 자식인 p1을 제거합니다.






4. Replacing HTML Elements 

 HTML DOM 요소를 바꾸기 위해서, replaceChild() 메소드를 사용합니다:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para,child);
</script>
cs

 

다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인
JavaScript HTML DOM Navigation

 HTML DOM에서, 노드 관계도를 이용하여 노드 트리를 탐사(naviagte)할 수 있습니다.


1. DOM Nodes

 W3C HTML DOM 표준에 따르면, 모든 HTML 문서는 노드입니다:
  - 전체 문서는 문서 노드입니다.
  - 모든 HTML 요소는 요소 노드입니다.
  - 텍스트 내부의 HTML 요소는 텍스트 노드입니다.
  - 모든 HTML 속성은 속성 노드입니다.
  - 모든 주석은 주석 노드입니다.

 





 HTML DOM에서, 노드 트리내의 모든 노드는 자바스크립트에 의해 접근 가능합니다.

 새로운 노드는 생성되어지고, 모든 노드는 수정되거나 삭제되어 집니다.



2. Node Relationships

 노트 트리의 노드는 각각 계층적 관계를 갖고 있습니다.

 부모, 자식, 형제 용어는 관계를 묘사하기 위해 사용됩니다.
  - 노드 트리에서, 상위 노드는 뿌리(root) 노드라 합니다.
  - 모든 노드는 root를 제외하고 정확히 하나의 부모를 갖습니다.
  - 노드는 여러명의 자식들을 갖을 수 있습니다.
  - 형제는 같은 부모를 갖습니다.


<html>
    
  <head>
    <title>DOM Tutorial</title>
  </head>

  
  <body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
  </body>

</html> 





 








 위의 HTML는 이렇게 해석 가능합니다:
  - <html>은 root 노드 입니다.
  - <html>은 부모가 없습니다.
  - <html>은 <head>와 <body>의 부모입니다.
  - <head>는 <html>의 첫 번째 자식입니다.
  - <body>는 <html>의 마지막 자식입니다.

  - <head>는 <title>이라는 하나의 자식을 갖습니다.
  - <title>은 "DOM Tutorial"이라는 텍스트 노드 자식을 갖습니다.
  - <body>는 <h1>과 <p>이라는 두 개의 자식을 갖습니다.
  - <h1>은 "DOM Lesson one"이라는 자식을 갖습니다.
  - <p>는 "Hello world!"이라는 자식을 갖습니다.
  - <h1>과 <p>는 형제입니다.


3. Navigating Between Nodes

 아래 나오는 속성으로 노드를 탐사 할 수 있습니다:
  - parentNode
  - childNodes[nodenumber]

  - firstChild

  - lastChild

  - nextSibling

  - previousSibling



4. Child Nodes and Node Values

 innerHTML 속성은, childNodes와 nodeValue 속성을 사용하여 요소의 내용을 가져올 수 있습니다.

 아래 예제는 <h1> 요소의 노드 값을 복사해서 <p> 요소에 붙여넣는 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<html>
    <body>
 
    <h1 id="intro">My First Page</h1>
 
    <p id="demo">Hello!</p>
 
<script>
var myText = document.getElementById("intro").childNodes[0].nodeValue;
document.getElementById("demo").innerHTML = myText;
</script>
 
    </body>
</html>
cs
 

 위 예제에서 getElementById는 메소드이고, childNodes와 nodeValue는 속성입니다.


 


5. DOM Root Nodes

 문서에서 2 개의 특별한 속성을 접근하는 것을 허용합니다:
  - document.body => 문서의 바디
  - document.documentElement => 모든 문서

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <body>
 
    <p>Hello World!</p>
 
    <div>
    <p>The DOM is very useful!</p>
    <p>This example demonstrates the <b>document.body</b> property.</p>
    </div>
 
<script>
alert(document.body.innerHTML);
</script>
 
    </body>
</html>
 
cs
 

 





6. The nodeName Property

 nodeName 속성은 노드의 이름을 명시합니다.
  - nodeName은 읽기 전용입니다.
  - 요소 노드의 nodeName은 tag name과 동일합니다.
  - 속성 노드의 nodeName은 attribute name 입니다.
  - 텍스트 노드의 nodeName은 항상 #텍스트입니다.
  - 문서 노드의 nodeName은 항상 #문서입니다.

 


7. The nodeValue Property

 nodeValue 속성은 노드의 값을 명시합니다.
  - 요소 노드의 nodeValue는 undefined입니다.
  - 텍스트 노드의 nodeValue는 텍스트 값 그 자체 입니다.
  - 속성 노드의 nodeValue는 속성 값 입니다.

8. The nodeType Property

 nodeType 속성은 노드의 종류를 반환합니다. nodeType은 읽기 전용입니다.

 가장 중요한 노드 종류들 입니다:

Element typeNodeType
Element1
Attribute2
Text3
Comment8
Document9
 [ 출처: W3Schools ]


다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인

 

JavaScript HTML DOM EventListener



1. The addEventListener() method

 사용자가 버튼을 클릭 했을 때 이벤트 리스너를 추가하는 예제입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html>
<html>
    <body>
 
    <p>This example uses the addEventListener() method to attach a click event to a button.</p>
 
    <button id="myBtn">Try it</button>
 
    <p id="demo"></p>
 
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
 
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
 
    </body>
</html
 
cs



 






 addEventListener() 메소드는 특정 요소에 이벤트 핸들러를 첨부하는 것 입니다.


 addEventListener() 메소드는 기존에 존재하는 이벤트 핸들러에 덮어쓰기 없이 요소에 이벤트 핸들러를 첨부하는 것 입니다.


 하나의 요소에 여러 이벤트 핸들러를 추가 할 수 있습니다.


 HTML 요소 뿐만 아니라 여러 DOM 객체에도 이벤트 리스너를 추가 할 수 있습니다.


 addEventListener() 메소드를 사용 할 때, 자바스크립트는 HTML 마크업에서 부터 자바스크립트를 더 좋은 가독성을 위해 분리합니다.


 removeEventListener() 메소드를 통해 쉽게 이벤트 리스너를 분리 할 수 있습니다.






2. Syntax


 element.addEventListener(event, function, useCapture);





 첫 번째 매개변수는 이벤트의 종류 입니다(click 이나 mousedown과 같은).


 두 번째 매개변수는 이벤트가 발생 했을 때, 호출할 함수 입니다.


 세 번째 매개변수는 선택적으로 작성 할 수 있습니다.








3. Add an Event Handler to an Element

 요소를 클릭 했을 때 Hello World 알림창을 띄우는 예제입니다:


 

1
2
3
 
element.addEventListener("click"function(){ alert("Hello World!"); });
 
cs




 

 함수를 선언하여 사용 할 수 도 있습니다.


 

1
2
3
4
5
6
 
element.addEventListener("click", myFunction);
 
function myFunction() {
    alert ("Hello World!");
}
cs











4. Add Many Event Handlers to the Same Element

 addEventLister() 메소드는 같은 요소에 이미 존재하는 이벤트의 덮어씌움없이 여러 이벤트를 추가 할 수 있습니다.


1
2
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
cs

 






5. Add an Event Handler to the Window Object

 addEventListener() 메소드는 HTML 요소나, HTML 문서, window 객체, xmlHttpRequest 객체와 같은 지원되는 이벤트 종류의 다른 객체와 같은 어떤 HTML DOM 객체를 이벤트 리스너로 추가하는 것을 허용합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <body>
 
    <p>This example uses the addEventListener() method on the window object.</p>
 
    <p>Try resizing this browser window to trigger the "resize" event handler.</p>
 
    <p id="demo"></p>
 
<script>
window.addEventListener("resize"function(){
document.getElementById("demo").innerHTML = Math.random();
});
</script>
 
    </body>
</html>
 
cs
 


 







6. Event Bubbling or Event Capturing?

 HTML DOM에서 이벤트를 전파(Propagation)하는 2 가지 방법이 있습니다: bubbling 과 capturing


 이벤트 전파는 이벤트가 발생 할 때, 요소의 순서를 정의하는 방법입니다. <div> 요소 안에 <p> 요소가 있다면, 


 사용자가 <p> 요소를 클릭 헀는데, 어떤 걸 먼저 처리 해야 할 지 알 수 없습니다.


 bubbling 방법은, 가장 내부의 요소의 이벤트가 먼저 처리되고 다음에 바깥의 요소가 처리되는 방식입니다:

  - <p> 요소 클릭 이벤트가 먼저 처리되고, 다음으로 <div> 요소의 이벤트가 먼저 처리됩니다.


 capturing 방법은, bubbling의 반대 입니다.


 addEventListener() 메소드에서 전파 종류를 명시 하려고 할 때는 "useCapture" 매개변수를 이용 합니다:



addEventListener(eventfunctionuseCapture);



 

 기본 값은 false이고, 이때 bubbling 전파를 사용하게 되고, true로 설정하면, capturing 전파를 사용하게 됩니다.




1
2
3
 
document.getElementById("myP").addEventListener("click", myFunction,true);
document.getElementById("myDiv").addEventListener("click", myFunction,true);
cs
 





7. The removeEventListener() method

 removeEventListener() 메소드는 addEventListener() 메소드로 추가한 이벤트 핸들러를 제거하는 메소드 입니다:




1
2
element.removeEventListener("mousemove", myFunction);
 
cs

 

 






8. Browser Support


Method
addEventListener()1.09.01.01.07.0
removeEventListener()1.09.01.01.07.0

 [ 출처: W3Schools ] 

다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인


JavaScript HTML DOM Events

 HTML DOM은 HTML 이벤트의 반응을 자바스크립트에게 허용합니다.




1. Reacting to Events

 자바스크립트는 이벤트가 발생할 때 실행되어 질 수 있습니다, 마치 사용자가 HTML 요소를 클릭 했을 때 처럼 말이죠.


 사용자가 요소를 클릭 했을 때 코드를 실행시키기 위해, HTML 이벤트 속성에 자바스크립트 코드를 추가해주시면 됩니다.




onclick=JavaScript


 HTML 이벤트의 예제:

  - 사용자가 마우스로 클릭 했을 때

  - 웹 페이지가 로드 되었을 때

  - 이미지가 로드 되었을 때

  - 마우스가 요소의 위에 올라갔을 때

  - 입력 필드가 변경 되었을 때

  - HTML 서식이 제출 되었을 때



 아래 예제의 텍스트를 클릭하면 텍스트가 바뀝니다:



Click on this Text!





 코드:

 



1
2
 
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
cs

 








2. HTML Event Attributes

 이벤트 속성을 사용하여 HTML 요소의 이벤트를 할당 할 수 있습니다. 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <body>
 
    <p>Click the button to display the date.</p>
 
    <button onclick="displayDate()">The time is?</button>
 
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
 
    <p id="demo"></p>
 
    </body>
</html
 
cs




 



 







3. Assign Events Using the HTML DOM

 button 요소에 onclick 이벤트를 할당하는 예제입니다:



1
2
3
4
 
<script>
document.getElementById("myBtn").onclick = function(){ displayDate() };
</script>
cs
 









4. The onload and onunload Events

 onload와 onunload 이벤트는 사용자가 페이지에 들어오거나 나갈 때 발생하는 이벤트 입니다.


 onload 이벤트는 방문자의 브라우저 타입이나 브라우저 버전, 정보를 기반으로 웹 페이지의 적당한 버전을 로드를 검사하는데 사용됩니다.


 onload 와 onunload 이벤트는 쿠키와 함께 사용 되어 집니다:


1
2
<body onload="checkCookies()">
 
cs





 


5. The onchange Event

 onchange 이벤트는 입력 필드의 검사와 혼합되어 사용됩니다.


 아래 예제에서 upperCase() 함수는 입력 필드가 사용자에 의해 변경되어 질 때, 호출됩니다.


1
2
3
 
<input type="text" id="fname" onchange="upperCase()">
 
cs
 







6.The onmouseover and onmouseout Events

 onmouseover와 onmouseout 이벤트는 사용자의 마우스가 요소에 올라 갔다가, 나갈 때 발생하는 이벤트입니다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html>
<html>
    <body>
 
    <div onmouseover="mOver(this)" onmouseout="mOut(this)" 
    style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
    Mouse Over Me</div>
 
<script>
function mOver(obj) {
obj.innerHTML = "Thank You"
}
 
function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>
 
    </body>
</html
 
cs

 










7. The onmousedown, onmouseup and onclick Events

 onmousedown, onmouseup, onclick 이벤트는 마우스 클릭의 모든 부분입니다. 


 onmousedown은 마우스 버튼이 클릭 되었을 때, 발생합니다.

 

 onmouseup은 마우스 버튼이 클릭 되었다가 풀릴 때, 발생합니다.



다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인
JavaScript HTML DOM - Changing CSS

 


1. Changing HTML Style

 HTML 요소의 스타일을 변경하기 위해서 아래 문법을 사용합니다:

document.getElementById(id).style.property=new style


 아래 예제는 <p> 요소의 스타일을 변경하는 예제입니다:


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <body>
 
    <p id="p1">Hello World!</p>
    <p id="p2">Hello World!</p>
 
<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>
 
    <p>The paragraph above was changed by a script.</p>
 
    </body>
</html>
 
cs



 



 





2. Using Events

 HTML DOM은 이벤트가 발생했을 때, 코드를 실행하도록 허용합니다.

 이벤트는 HTML 요소에 어떠한 일이 발생할 때, 브라우저에서 생겨나는 것 입니다.
  - 요소가 클릭 되었을 때

  - 페이지가 로드 되었을 때

  - 입력 필드가 변경 되었을 때


 아래 예제는 id가 id1인 HTML 요소의 스타일을 버튼이 클릭 되었을 때 바꾸는 예제입니다:


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<!DOCTYPE html>
<html>
    <body>
 
    <h1 id="id1">My Heading 1</h1>
 
    <button type="button" 
    onclick="document.getElementById('id1').style.color = 'red'">
    Click Me!</button>
 
    </body>
</html>
 
cs




 






다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인


JavaScript HTML DOM - Changing HTML

 HTML DOM은 HTML 요소의 내용을 변경 할 수 있게 자바스크립트에게 허용합니다.






1. Changing the HTML Output Stream

 자바스크립트는 동적인 HTML 내용을 만들 수 있습니다.


 document.write()는 HTML 출력 스트림을 직접 작성하는 것 입니다.



1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <body>
 
<script>
document.write(Date());
</script>
 
    </body>
</html
 
cs

 


 

 


 


 * 문서가 로드가 된 후, document.write()를 사용하지 마세요. 문서에 덮어쓰게 됩니다.







2. Changing HTML Content

 HTML 요소의 내용을 바꿀때, 아래 문법을 사용합니다.


document.getElementById(id).innerHTML = new HTML






 

3. Changing the Value of an Attribute

 HTMl 요소의 값을 바꾸기 위해서는 아래 문법을 사용합니다.


document.getElementById(id).attribute=new value




 아래 예제는 <img> 요소의 src 속성을 변경하는 예제 입니다:




1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!DOCTYPE html>
<html>
<body>
 
<img id="myImage" src="smiley.gif">
 
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
 
</body>
</html>
cs
 

 


 



다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다
조회수 확인
JavaScript HTML DOM Elements



1. Finding HTML Elements

 종종 자바스크립트에서, HTML 요소를 조작하기를 원합니다.

 이러한 일을 하기 위해, 요소를 찾는 일을 먼저 해야합니다. 이러한 일을 하는 여러 가지 방법이 있습니다:
  - id를 통하여 HTML 요소 찾기
  - tag 이름을 통하여 HTML 요소 찾기
  - class 이름을 통하여 HTML 요소 찾기
  - HTML 객체 집합을 통해서 HTML 요소 찾기 



2. Finding HTML Elements by Id

 DOM에서 HTML 요소를 찾는 가장 쉬운 방법은 요소 아이디를 이용하는 것 입니다.
 
1
var x = document.getElementById("intro");
cs
 

 요소를 찾았다면, 메소드는 요소를 객체로서 반환하게 됩니다.

 찾지 못하면, x는 null을 갖게 됩니다.


3. Finding HTML Elements by Tag Name

 아래 예제는 id 가 main인 요소를 찾아서 main안의 모든 <p> 요소를 찾는 예제입니다:

1
2
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
cs



4. Finding HTML Elements by Class Name

 같은 class 이름으로 모든 HTMl 요소를 찾길 원한다면, 아래 메소드를 사용하면 됩니다.

 document.getElementsByClassName("intro");

 


5. Finding HTML Elements by HTML Object Collections

 아래 예제는 id가 frm1인 서식 요소를 찾아서, 서식안의 집합내에서 모든 요소의 값을 출력하는 예제입니다:

 
1
2
3
4
5
6
7
8
 
var x = document.getElementById("frm1");
var text = "";
var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
cs



다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다