부트캠프교육중/DOM11 [DOM] DOM다루기 (Create, append, Read, Update, Delete) CRUD (Create, Read, Update, Delete) 일단 간단히 정리해보았다 1.Create 생성 - div요소를 만든다 - div를 tweetDiv라는 변수에 할당한다 ->아직 공중부양상태 2.append 포함 - 변수인 tweetDiv를 body에 넣는다 3. Read 조회 - 말그대로 조회한다 - querySelector - getElementById 4. Update 갱신 - 일단 만들어졌다. 이걸 꾸미고 하는거다 - 문자열을 입력 => textContent이용 - css사용위해 class추가 5. Delete 삭제 - remove() - innerHTML : 자식요소를 모두 지운다. 근데 기술적문제로 사용권장하지않는다 - removeChild : 자식요소를 지정해서 삭제한다, 반복문.. 2023. 1. 6. [DOM] element와 node 간단히 생각하면 node가 부모, element가 자식이라고 생각하자! #element는 node의 특정 타입 즉 Node.ELEMENT_NODE인 것이다. element는 HTML에서 태그로 적은 노드들을 지칭한다. 예를 들어, , , 과 같은 태그로 나타낸 것들은 전부 element인 것이다. 주석이나 text node와 같은 것들은 HTML 태그로 표현된 것이 아니므로 element가 아니다. #부모요소 반환: parentElement 자식요소 반환: children parentNode는 부모인 노드 중 모든 노드를 반환(빈공간... 등 포함) parentElement는 부모인 노드중의 요소노드만 반환(태그만 찾는다) 요소노드는 html태그로 이루어진 요소 2023. 1. 6. [DOM] DOM이란? DOM (document object model) html요소를 javascript object처럼 조작할수 있는 model이다 #html에 javaScript를 적용하기 위해서는 태그를 이용한다. 요소는 등장과 함께 실행되기때문에 보통 태그 직전에 삽입한다.!! 태그는 html페이지 어디에나 삽입할수 있다. 이를 태그에 삽입할경우 가 로딩되기 전에 자바스크립트가 실행된다. 그래서 보통은 태그 직전에 자바스크립트를 삽입합니다. 이는 html문서가 모두 로딩된 다음 Dom을 통해 보다 안전하게 이와 상호작용할수있기때문이다. #자바스크립트에서 DOM은 document객체에 구현되어있습니다. #DOM구조를 조회할때에는 console.dir이 유용하다. console.dir은 console.log와 달리 DOM.. 2023. 1. 6. 이전 1 2 3 다음