DOM

출처 : https://www.w3schools.com/js/js_htmldom.asp웹 페이지가 다운로드 되면, 브라우저는 스스로 페이지의 문서 객체 모델(DOM)을 생성합니다.HTML DOM 모델은 트리의 구조를 가집니다.객체의 HTML DOM 트리입니다.

Methods는 HTML 요소에 대해 수행할 수 있는 어떤 Actions을 말합니다.Properties는 HTML 요소 속에 바꾸거나 설정할 수 있는 values를 말합니다.이 HTML DOM은 Javascript를 통해 접근할 수 있습니다.DOM에서는 모든 HTML

HTML 요소를 찾아주는 method는 지난시간에 getElementById("id명")이 있었죠.사실 몇개가 더있습니다.document.getElementsByTagName("태그명")document.getElementsByClassName("클래스명")태그네임은 말

id, tag name, class name, CSS 선택자, HTML 객체 컬렉션찾았으면 요소를 객체로 리턴해줍니다. 없으면 null을 리턴해줍니다.아이디와 태그네임을 둘다 활용해 범위를 좁혀보겠습니다.결과값은이 됩니다.이 밖에 document와 함께 쓰일 수 있는

JS와 HTML DOM에 대해 처음부터 언급할 때 7가지의 내용이 있었는데요.간략하게 빠르게 정리하면, HTML안의 요소나 속성의 값을 추가, 제거, 변경할 수 있고, 스타일도 변경할 수 있으며, 이벤트에 대한 처리, 추가도 가능했습니다.다음은 JS로 HTML을 변경하

마지막으로 정리하고 넘어가겠습니다.HTML DOM은 자바스크립트로 하여금 HTML 요소에 대해 여러가지를 변경할 수 있게 합니다.그 중 하나가 스타일인데, 이 부분은 CSS에서 주로 사용하는 선택자(selector)를 사용합니다.다음과 같이 쓰면 됩니다. 예문은 아래와

HTML DOM은 자바스크립트로 하여금 HTML 이벤트 발생에 대응하도록 해줍니다.예를 들면 마우스 hover시 어떻게 동작하는지, 클릭시 어떻게 동작하는지, 키보드에 뭔가 입력시에 어떻게 동작하는지, 윈도우가 작아질때 resize에 대해서 어떻게 동작하는지 등등이 있

addEventListener() method는 특정 요소에 이벤트 핸들러를 부착시킵니다.기존의 이벤트 핸들러를 덮어쓰지 않고, 부착시켜줍니다.하나의 요소에 많은 이벤트 핸들러를 추가할 수 있습니다.즉, 하나의 요소에 같은 타입의 핸들러를 추가할 수 있다는 얘기입니다.

HTML DOM에서는, node 관계를 사용하여 노드 트리를 항해할 수 있습니다.W3C HTML DOM 표준에 따르면, HTML 문서안의 모든 것이 노드입니다.전체 문제는 문서 노드입니다.모든 HTML 요소는 요소 노드입니다.HTML 요소 안의 텍스트들은 텍스트 노드입

HTML DOM에 새로운 요소를 추가하기 위해서, 요소(요소 노드) 생성을 먼저해주고, 그 다음에 기존에 존재하는 요소에 그것을 적용합니다.먼저, para를 통해 새로운 <p> HTML 요소를 만들어냅니다.그 후, 안에 들어갈 텍스트 노드를 생성하고, 그것을 pa

기존에 HTML DOM에 접근하여, 요소를 가져오는 메소드들은 다양한 것들이 있었는데,예를 들면 getElementsByTagName()이 있었습니다. 이런것들을 컬렉션이라고 부른다고 전에 적었던 기억이 납니다.이 컬렉션은 객체이지만, HTML 요소의 배열 비스무리한

노드리스트 객체는 문서로부터 추출되는 노드들의 리스트입니다.거의 HTML컬렉션 객체와 똑같습니다.몇몇의 오래된 브라우저들은 HTML컬렉션을 반환해달라고 요청한 메소드에 노드 리스트를 대신해서 반환해줍니다.childNodes()를 사용한다면 모든 브라우저에서 노드 리스트