웹브라우저 자바스크립트 (6) 썸네일형 리스트형 웹브라우저 자바스크립트_6 DOM-4 (Node 객체) 6. DOM window에 로드된 문서를 제어하기 위한 object model 6.8 Node 객체 DOM의 최상위에 있는 객체. DOM의 모든 객체는 Node 객체를 상속받는다. 주요기능 관계: 각 Node 객체 사이의 관계를 부여 Node.childNodes Node.firstChild Node.lastChild Node.nextSibling Node.previousSibling Node.contains() Node.hasChildNodes() 노드의 종류: 각 Node(구성요소)가 어떤 카테고리에 속하는지 알려줌 Node.nodeType Node.nodeName 값: Node 객체의 값을 제공 Node.nodeValue Node.textContent 자식관리: Node 객체의 자식을 관리(추가 혹은.. 웹브라우저 자바스크립트_6 DOM-3 (Element 객체) 6. DOM window에 로드된 문서를 제어하기 위한 object model 6.7 Element 객체 HTMLElement: HTML에서 사용되는 태그를 포함하는 객체. HTMLElement를 포함하는 Element 객체가 존재한다. 문서상의 모든 element에 대한 특성을 정의. HTMLElement와 Element 객체를 구분한 이유 DOM은 HTML만을 대상으로 하지는 않기 때문이다. 모든 markup element를 대상으로 한다. (e.g., XML, SVG 등) Chrome 개발자 도구의 property를 이용해서 선택한 element가 소속된 모든 부모객체를 볼 수 있다. 다른 객체들과의 관계 주요기능 Element 객체의 주요 API 식별자: 문서 내의 element를 식별하는 용도... 웹브라우저 자바스크립트_6 DOM-2 (HTML Elements, HTMLCollection, jQuery 객체) 6. DOM window에 로드된 문서를 제어하기 위한 object model 6.4 HTML Elements getElements * 로 얻은 객체가 무엇인지 정확히 알아야 적절한 method나 property를 사용할 수 있다. constructor method를 이용해서 객체에 대한 정보를 얻을 수 있다. (e.g., countructor.name: 선택한 객체의 유형명) var li = document.getElementById('active'); console.log(li.constructor.name); // => HTMLLIElement var lis = document.getElementsByTagName('li'); console.log(lis.constructor.name); // =>.. 웹브라우저 자바스크립트_6 DOM-1 (제어대상을 찾기, jQuery) 6. DOM window에 로드된 문서를 제어하기 위한 object model 6.1 제어 대상을 찾기 DOM으로 문서를 제어하기위해 가장 먼저 해야할 일: 제어대상을 찾기 document.getElementsByTagName Tag의 이름이 전달한 argument와 같은 element들을 가져옴. var list = document.getElementsByTagName('li'); 문서 내의 태그들을 유사 배열로 가져와서 list 변수에 담는다. 유사 배열: Nodelist, 실제로 배열은 아니지만 배열처럼 접근이 가능하다. 특정한 태그 (e.g., ) 아래의 태그 (e.g., )만 선택하고 싶으면: 상위 태그를 먼저 받아서 변수에 저장한 뒤, 그 객체에서 다시 하위 element를 받는.. 웹브라우저 자바스크립트_5 BOM 5. BOM (Browser Object Model) 웹 브라우저에 관련된 객체를 모아놓은 것 5-1. 전역객체 Window 모든 객체가 소속된 객체. Console에 window를 입력하면 window에 속한 객체들을 볼 수 있다. e.g: window.document, window.navigator, window.array window는 전역객체이다. 전역변수나 method가 아닌 일반 함수를 선언하면 모두 window에 속하게 된다. alert('Hello world')는 window.alert('Hello world')와 동일 a = 1이면 window.a도 값을 1로 갖는다. 즉 alert(a)와 alert(window.a)는 모두 1을 표시. 5-2. 사용자와 커뮤.. 웹브라우저 자바스크립트_4 Object Model 4. Object Model JavaScript가 제어의 역할을 한다는 것은 JavaScript가 제어할 수 있는 '무언가'가 존재한다는 뜻이다. Object를 그 '무언가'로 생각하면 편하다. Object Model: 브라우저와 웹 페이지의 여러 구성 요소들을 object로 만들어 제공하는 것. 웹 페이지의 element를 JavaScript가 제어할 수 있도록 브라우저가 웹 페이지를 읽는 과정에서 element에 해당하는 object를 생성한다. Example /* 태그를 제어할 수 있는 object 찾기 */ /* getElementByTagName을 이용하면 해당하는 Tag Element들을 list로 return */ var imgs = document.getElementByTagName('im.. 이전 1 다음
