[Javascript] 노드 삽입, 노드 추가, 복제, 스타일 가져오기

노드 삽입

.insertAdjacentElement('position', 'html')

• 특정 위치에 원하는 node들을 추가한다.
• 이미 사용중인 element 는 다시 파싱하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다.
• innerHTML은 덮어쓰기가 되지만 insertAdjacentElement은 추가만 한다. innerHtml보다 작업이 덜 드므로 빠르다.

'position'에 올 수 있는 값

1. 'beforebegin' : element 앞에
2. 'afterbegin' : element 안에 가장 첫번째 child
3. 'beforeend' : element 안에 가장 마지막 child
4. 'afterend' : element 뒤에

• beforebegin , afterend position은 element의 부모가 존재해야 하고, node가 tree 안에 있어야 한다.

 

 

.replaceChild(new, old)

• new 자리를 old로 대체하고 new를 반환한다

.insertBefore(newNode, e1)

• newNode를 e1 앞에 삽입한다

var e1 = container.querySelector("div:first-child"); //first
var e2 = container.querySelector("div:nth-child(2)"); //second

//  Replace
		// var oldNode = parentNode.replaceChild(new, old)
		// new 자리에 old를 넣고 new를 반환한다, 반환값을 newNode에 넣어준다
        // 자리에서 빠지는 놈이 new다: Detach해서 새로 생긴 놈이라고 쳐서 newNode이다
        var newNode = container.replaceChild(e1,e2);

//  insertBefore
		// container.insertBefore(new, n1)
		// newNode를 e1 앞에 삽입한다
        container.insertBefore(newNode, e1);

---

객체를 문서에 추가하기

.appendChild()

• createElement 함수를 이용하여 먼저 객체를 만들어 넣는다
• 옛날 방식

.append()

• 객체를 생성할 필요 없다
• div를 생성할 때도 이제는 이걸 쓰자

.cloneNode(false)

• default false, false일 시 자식은 복제가 안 된다
• 객체를 복사하여 반환한다

---

CSS 스타일 자바스크립트로 가져오기

window.getComputedStyle(변수)

• 변수의 CSS 스타일을 가져와서 리턴한다
• let boxStyle = window.getComputedStyle(box);

 

객체.getPropertyValue("스타일명")

• 객체의 CSS 스타일을 가져와서 문자열로 리턴한다
• var left = parseInt(boxStyle.getPropertyValue("left"));
• parseInt를 붙이면 (뒤에 붙어 있는) 스타일 문자열을 자동으로 삭제하여 숫자값으로 변환해 준다