자바스크립트 노드4 [Javascript] 노드 추가하기 이전 포스트들에서 계속해서 자바스크립트에서 html의 요소에 접근하는 방법들을 다뤘었습니다. 이번에는 자바스크립트 파일에서 요소들을 추가하는 방법을 다뤄볼려고 합니다. 1. 노드 생성 - create~ 메소드 노드를 생성하는 create~ 메소드 입니다. 이 메소드는 추가하려는 노드에 따라 create뒤에 붙는 접미사가 달라집니다. 주의해야하는 점은 단순히 노드를 추가하는 기능만 하기 때문에 따로 명시적으로 추가하는 과정을 거쳐야 합니다. 우선 create~메소드들은 다음과 같습니다. create~메소드 메소드가 생성하는 노드 createElement(요소) 요소 createAttribute(속성) 속성 createTextNode(텍스트) 텍스트 createComment(텍스트) 주석 이 외에도 crea.. 2021. 3. 29. [Javascript] 노드 워킹 지난 포스트에서 노드 취득에 대해 알아봤습니다. 근데 이 노드 취득법은 무조건 문서 전체를 검사하기 때문에 노드 취득을 여러번 하게된다면 퍼포먼스에 영향을 미치게 됩니다. 그래서 나온 아이디어가 현재 취득한 노드를 기준으로 주변 노드를 취득해보자라는 것에서 기인한 노드 워킹입니다. 1. 노드 워킹의 프로퍼티 노드 워킹은 서론에서 이야기 했듯이 현재 취득한 노드를 기준으로 다른 노드를 취득합니다. 관계로만 살펴보자면 부모 노드, 형 노드, 동생 노드, 자식노드 이렇게 네가지를 한 노드에서 취득할 수 있게 됩니다. 이를 정리하면 다음과 같습니다. 노드 워킹 프로퍼티 설명 parentNode 부모 노드 취득 previousSibling 형 노드 취득 previousElementSibling 형 요소 취득 ne.. 2021. 3. 24. [Javascript] 노드 취득 2021.03.23 - [Programming/Javascript] - [Javascript] 문서 객체 모델 DOM 지난 포스트에서 문서 트리를 구성하는 요소, 속성, 텍스트 등을 노드라고 했었습니다. 이 노드들을 자바스크립트에서 이용하기 위해서는 취득을 해서 다뤄야 하기때문에 노드를 취득하는 법을 다룰려고 합니다. 1. ID를 가지고 노드 취득 노드를 취득하는 방법 중 하나는 ID를 이용하는 것 입니다. 이 id를 통해 노드를 취득하는 방법은 다음과 같습니다. document.getElementById(id); 2. 태그명으로 노드 취득 이번 방법은 html의 태그명으로 노드를 취득하는 방법입니다. id는 문서에서 한 번만 존재할 수 있는 점과 다르게 태그는 한 문서에서 여러번 올 수 있습니다. 그러.. 2021. 3. 24. [Javascript] 문서 객체 모델 DOM 오래전 포스트에 객체를 처음 소개하며 문서 객체 모델인 DOM에 대해 잠깐 이야기했었습니다. 이번 포스트부터는 그 DOM에 대해 다뤄볼까 합니다. 1. DOM 소개 DOM은 Document Object Model의 약자로 문자 그대로 해석하면 문서 객체 모델입니다. 왜 문서 객체 모델이냐면 이 자바스크립트의 DOM을 통해 html혹은 xml문서에 접근해 조작할 수 있기 때문입니다. 물론 DOM이 자바스크립트의 전유물은 아니고 다른 언어들에도 들어가 있습니다.그래서 이제까지는 자바스크립트의 기본 문법이었다면 지금부터는 자바스크립트를 본격적으로 이용할 수 있게 됩니다. 2. 문서 트리 문서 트리란, 문서를 트리 구조로 해석한다는 건데, 트리 구조란 상단에서 하단으로 가면 여러갈래로 뻗어나가는 형태를 의미합니.. 2021. 3. 23. 이전 1 다음 300x250
