[jQuery] 노드 생성, 추가, 삭제, 이동 / 스타일 다루기 / 속성 다루기

노드 다루기 - 노드 생성/ 추가/ 삭제/ 이동

---

 

1. 노드 생성 및 추가

01. 노드 생성 

var $신규노드 = $("신규DOM");

 

$()함수에 태그정보를 넣어주면 Jquery 객체로 포장된 노드가 만들어 진다.

$()함수 내부에서는 매개변수로 받은 태그 노드 정보를 파싱해 태그와 1:1 대응하는 HTMLElement 객체를 생성하는 작업이 일어난다. 

 

<** 자바스크립트 노드 생성 방법> 

var new1 = document.createElement("li");

var new2 = document.createTextNode("텍스트노드생성");

new1.appendChild(new2); //텍스트노드를 신규 노드에 추가

 

- jquery 노드 생성은 위의 자바스크립트 코드를 jquery 내부에서 구현 하고 있다.

 

02. 신규 노드를 첫 번째 자식 노드로 추가

     $부모노드.prepend($추가노드)

     $추가노드.prependTo($부모노드)

 

03. 신규 노드를 특정 노드의 마지막 번째 자식 노드로 추가 

$부모노드.append($신규노드)

$신규노드.appendTo($부모노드)

 

04. 특정 노드의 이전 위치에 추가

$추가노드.insertBefore($기준노드)

$기준노드.before($추가노드)

 

05. 특정 노드 다음에 노드 추가

$추가노드.insertAfter($기준노드)

$기준노드.after($추가노드)

 

2. 노드 이동

01. 첫 번째 자식 노드로 이동

$부모노드.prepend($이동노드)

$이동노드.prependTo($부모노드)

 

02. 마지막 번째 자식 노드로 이동 

$부모노드.append($이동노드)

$이동노드.appendTo($부모노드)

 

03. 특정 노드의 이전 노드로 이동 

$이동노드.insertBefore($기준노드)

$기준노드.before($이동노드)

 

04. 특정 노드의 다음 노드로 이동

$이동노드.insertAfter($기준노드)

$기준노드.after($이동노드)

 

3. 노드 삭제

01. 특정 노드 삭제

$대상.remove()

 

02. 모든 자식 노드 삭제

$대상.children().remove()

 

4. 노드 내용 읽기 및 변경

01. 노드 내용을 문자열로 읽기

$대상.html()

$대상.text()

 

<ul class="menu">

<li>m</li>

<li>s</li>

<li>e</li>

</ul>

 

$(".menu").html() 결과 

<li>m</li>

<li>s</li>

<li>e</li>

 

$(".menu").text() 결과

m

s

e

 

html()메서드는 특정 노드의 내부 내용을 마크업까지 확인 가능 / 메서드 결과는 dom 객체가 아닌 문자열이다. 또한, 자신의 태그 정보는 포함되지 않고 오직 자식을 포함한 자손 노드 정보만이 사용된다.

 

text()메서드는 마크업 내용을 제외한 텍스트 노드이 내용만을 문자열로 구한다.

 

02. 노드 내용 수정하기

$대상.html(수정할 태그 문자열)

$대상.text(수정할 텍스트)

 

$(document).ready(function(){

$("ul.menu li").click(function(){

var $item = $(this);

$item.html("<a href='.....'>text</a>");

})

});

변경할 노드 내용에 태그 정보가 포함 된 경우는 html()메서드를 사용해야 한다.

 

03. 노드 내용을 이용해 여러 개의 자식 노드 추가하기

$대상.html("추가할 태그 문자열")

 

- append() 메서드를 이용하는 경우 

for(var i=1; i<=10; i++){

var d = "<li>menu</li>";

$("ul.menu").append(d);

}

 

- html() 메서드를 이용하는 경우

var d ="";

for(var i=1; i<=10; i++){

d += "<li>menu</li>";

}

$("ul.menu").html(d);

 

노드를 대량으로 추가해야 하는 경우, 단일 노드 추가는 html() 메서드를 사용하는 것이 효율적

 

04. 노드 내용을 이용해 모든 자식 노드 제거하기

$대상.html("")

 

자식 노드를 지우고 싶을 때 remove() 메서드를 사용하면 내부에서 루프를 돌며 노드를 하나씩 삭제 하기 때문에 html() 메서드를 사용하는 것이 효과적이다.

 

 

 

 

 

스타일 다루기

---

1. 스타일 종류 

내부 스타일 

<style>

</style>

외부 스타일

<link type="text/css" rel="...." ...>

인라인 스타일 

<div style="color:...">

 

자바스크립트는 인라인과 아닌 경우 스타일 속성 접근 방법이 다르다.

인라인 경우 content.style.color.. 

내부,외부인 경우 window.getComputedStyle(content).border.. 

 

제이쿼리는 동일하다.

 

 

 

 

속성 다루기

---

cass, id, data-value, href, src등 모두 속성이다.

1. 속성값 구하기

$대상.attr("속성이름")

$대상.data("data-속성이름")

 

일반 속성 값을 구할 때는 attr()메서드를 사용하고 "data-"로 시작하는 속성의 경우 data()메서드를 이용한다.

 

<div class="p" data-name="웹동네" data-tel-"123" temp-data="test1">

<p class="name">웹동네</p>

<p class="tel">1234</p>

 

var $d = $("div.p");

$d.data()  --> Object { tel: 123, name="웹동네" }   : data-로 시작하는 속성 정보를 하나의 오브젝트로 구한다.

data- 로 시작하지 않는 속성은 data() 메서드 사용 안됨

$d.data("name") -- > data(name) = 웹동네 

$d.attr("data-name") --> attr(data-name) = 웹동네

 

2. 속성값 설정하기

$대상.attr("속성이름", "값")

$대상.data("data-속성이름", "값")