자바스크립트 dom

자바스크립트 DOMㅇ DOM (Document Object Model) : HTML 문서를 구성하고 있는 태그 조작

문법 설명

document.node node 접근

document.node.childNodes 모든 자식요소 찾기

document.node.children 모든 자식요소 찾기 ( 요소 노드만 )

document.node.firstChild 첫번째 자식노드 찾기

document.node.lastChild 마지막 자식노드 찾기

document.node.nextSibling 다음 형제노드 찾기

document.node.previousSibling 이전 형제노드 찾기

document.node.parentNode 부모노드 찾기

ㅇ 노드 ( 객체 ) 접근

자바스크립트 DOM

함수 설명

getElementById(“id”) HTML 태그 속성 중 ID 를 사용하여 객체 찾음

getElementsByName(“name”) HTML 태그 속성 중 NAME 을 사용하여 객체 찾음

getElementsByClassName(“className”) HTML 태그 속성 중 CLASS NAME 을 사용하여 객체 찾음

getElementsByTagName(“tagName”) HTML 태그 속성 중 TAG NAME 을 사용하여 객체 찾음

ㅇ 함수

자바스크립트 DOMㅇ 속성

속성 설명

textContent 객체가 가지고 있는 Text 반환

value 객체 속성 중 value 반환

className 객체 속성 중 className 반환

name 객체 속성 중 name 반환

id 객체 속성 중 id 반환

nodeName / tagName 객체의 Node / Tag 명 반환

type 객체 속성 중 type 반환

자바스크립트 DOM<body><ul> <li id="firstId">A</li> <li name="liName">B</li> <li class="liClass">C</li></ul><input type="text" name="textName" id="txtId" class="textClass" value=" 텍스트 " /></body>


ㅇ FORM 객체 하위요소 접근 (name 또는 id 로 직접 접근 가능 )

<form name="examForm"> <input type="text" name="txt1" value=" 실행 1" /> <input type="text" name="txt1" value=" 실행 2" /> <input type="text" id="txt2" value=" 실행 3" /> <input type="text" id="txt3" value=" 실행 4" /></form>

자바스크립트 dom

Documents