DOM 기초

CRUD

 

Ceate

createElement:  

요소를 생성한다.

document.createElement('div')

 

createDocumentFragment:    아직 잘 모르겠다! 우선 이런 것이 있다는 것만 알고 넘어간다!

untitledtblog.tistory.com/44

DocumentFragment를 이용한 JavaScript 성능 최적화

ko.javascript.info/modifying-document#document-fragment

문서 수정하기

 

Read

하기 모든 querySelector의 인자에는 CSS selector를 사용할 수 있다.

 

querySelector :

가장 상위 요소 한 개만 찾는다.

const oneTweet = document.querySelector('.tweet')

 

querySelectorAll:

모든 요소를 찾는다.

const tweets = document.querySelectorAll('.tweet')

 

 

그 밖에 get으로 시작하는 것들이 있다. 알고만 있자.

const getOneTweet = document.getElementById('container') const queryOneTweet = document.querySelector('#container') console.log(getOneTweet === queryOneTweet) // true

 

element.querySelector:

element도 부모 요소로 들어갈 수 있다.

var el = document.body.querySelector("style[type='text/css'], style:not([type])");

 

 

 

Update

textContent:  

선택한 요소에 글자를 추가

const oneDiv = document.createElement('div')
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>

 

 

innerHTML:

htmlString에 값을 설정하면 요소의 모든 자손이 제거되고, 문자열 htmlString에 지정된 HTML을 파싱하여 생성된 노드로 대체한다.

const content = element.innerHTML;

element.innerHTML = htmlString;

 

id: 

element.id
요소의 id 값을 반환

 

 

classList:

classList에 add 메소드를 이용해서 class 추가할 수 있음

oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>

 

setAttribute:

attribute 추가

Element.setAttribute(name, value);

 

getAttribute:

특정 attribute 유무 조회

let attribute = element.getAttribute(attributeName);

 

removeAttribute:

특정 attribute 제거

element.removeAttribute(attrName);

 

Delete

 

remove :

해당 노드를 삭제함

ChildNode.remove()

Node.remove()

 

 

 

removeChild:

Node.removeChild()

var oldChild = node.removeChild(child);
//or just
node.removeChild(child);

자식 노드를 제거하고, 그 제거한 노드를 반환함.

 

APPEND

appendchild : 

Node.appendChild() / 새로운 노드를 해당 노드의 자식 노드 리스트의 맨 마지막에 추가한다. 
만약 주어진 노드가 이미 존재하고 있는 노드를 가리킨다면, 기존 위치에서 노드를 제거하고 새 위치에 노드를 추가한다.
이유는 좀 더 찾아봐야겠지만,
우선 1) 모든 노드는 하나의 부모 노드만 가질 수 있다.
       2) 복제가 된다면 두 가지를 모두 가리키기 때문에 1대1 매칭이 끊긴다.

 

var aChild = element.appendChild(aChild);

 

*append vs. append.child

1) append는 DOMString 객체도 추가 가능, but appendChild는 Node 객체만 허용
2) append는 반환값이 없으나, appendChild는 추가한 node객체 반환
3) append는 여러 개 노드와 문자 추가 가능, bug appendChild는 노드 하나만 추가 가능

 

append

 

 

 

 

 

 

 

 

 

innerHTML vs. textContent