본문 바로가기

분류 전체보기
48

[JS] DOM이란? #4 CSS style, class 제어 1. Style제어 HTML BOX Red Green blue 일반적으로는 background-color 라고 적지만 여기에서는 backroundColor라고 명시한다. 만일, 익숙한 방식으로 하고싶다면 대괄호를 써도 된다. ex) box.style["margin-left"] = "30px"; 여러 속성 동시에 적어주는 단축속성도 문자열로 적어주면된다. ex) box.style.border = "10px solid #000" 2. Class제어 //콘솔창 box.className; ' ' box.className = 'bg-red'; 2023. 3. 26.
[JS] DOM이란? #3 노드 생성,추가,복제,삭제 *DOM: 문서 객체 모델(The Document Object Model) 1. 생성하고 추가하는 방법 ul이 있다. document.createElement('li')를 만들어준다. document.createTextNode('pink')도 만들어준다. 그다음 li에 appendChild(pinkText)이용해서 방금 만든 text node를 넣어준다. 그다음에 ul.appendChild(li)넣어주면 마무리된다. * appendChild(): 지정한 부모노드의 가장 마지막 자식으로 추가된다. * insertBefore() : 지정한 부모노드의 그 이전으로 추가된다. //Console const newLi3 = document.createElement('li); undefined cost textNod.. 2023. 3. 26.
[JS] DOM이란? #2 부모, 자식, 형제 Node *DOM: 문서 객체 모델(The Document Object Model) query와 element의 차이점: pList1 = NodeList pList2 = HTML컬렉션 NodeList(4) HTMLCollection(4) : 모두 4개가 나옴 이제태그를 넣어보자. :다시 실행시켜보니 NodeList는 4개, HTML Collection은 5개가 돼있다. :코드를 다시 작성하지 않았지만 HTMLCollection은 node의 변경사항이 자동으로 반영돼있다.반면 NodeList는 한 번 사용했던 값을 계속 사용한다. 부모, 자식, 형제 Node -red에 접근한다고 가정해보자. //Console const red = document.getElementById( 'red'); < undefined 1... 2023. 3. 26.
[JS] DOM이란? #1 Node에 접근하는 방법 *DOM: 문서 객체 모델(The Document Object Model) 웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면을 통해 보여주는 과정을 '렌더링'이라 한다. - DOM은 html 문서의 각 요소들을 트리형태로 구조화해 표현하는 문서(데이터)를 생성한다. 개발자는 자바스크립트을 이용해서 일을 생성하거나 수정하거나 삭제할 수 있다. 이를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다. DOM목적 Q. Html 코드에 써져 있는 데로 결과를 출력하는게 브라우저 역할인데 굳이 중간에 DOM이라고 하는 데이터를 생성하는 이유? A. 자바스크립트를 사용해 이 문서에 대한 스크립트를 작성할 수 있게 해주기 때문이다. DO.. 2023. 3. 26.
728x90

최근댓글

최근글

skin by © 2024 ttutta

티스토리툴바