ch4 - 4. DOM 조작하기

index

index 1. querySelector 2. querySeletorAll()3. addEventListner()4. removeEventListener()5. createElement()6. appendChild()7. removeChild()8. replaceChild()9. cloneNode()10. insertBefore() 11. createDocumentFragment()12. getComputedStyle()13. setAttribute()14. getAttribute()15. removeAttribute()

웹 개발자는 종종 웹 페이지의 논리적구조 를 지정하기 위해 브라우저에서 사용하는 객체 모델 인 DOM 을 조작 하고 이 구조를 기반으로 HTML요소를 랜더링합니다.

HTML은 기본 DOM 구조를 정의합니다 . 그러나 대부분의 경우 일반적으로 사이트에 추가기능 을 추가 하기 위해 JavaScript를 사용하여이 작업을 조작 할 수 있습니다.

이 챕터에서는 DOM 조작 을 돕는 15 가지 기본 JavaScript 메소드 목록이 있습니다. 코드에서 이러한 메소드를 자주 사용할 수 있습니다

1. querySelector

QuerySelector() 메서드는 하나 이상의 CSS 선택자와 일치하는 첫 번째 요소를 반환합니다. 일치하는 항목이 없으면 null을 반환합니다. QuerySelector()가 도입되기 전에 개발자는 지정된 ID 값을 가진 요소를 가져오는 getElementById() 방법을 광범위하게 사용했습니다. getElementById()는 여전히 유용한 방법이지만, 새로운 QuerySelector() 및 QuerySelectorAll() 방법을 사용하면 CSS Selector를 기반으로 요소를 자유롭게 대상으로 할 수 있으므로 유연성이 더 높아졌습니다.

사용 방법은 아래와 같습니다.


<p>1-1</p>
<p>1-2</p>
<p>1-3</p>

<div>div one</div>
<p>2-1</p>
<div>div two</div>

<scrpit>
	var set_color = document.querySelector('div');
	set_color.style.color = 'red';
</scrpit>

2. querySeletorAll()

querySelectorAll 은 querySelect 과 동일하게 작동하나 차이점은 해당 선택자에 해당하는 모든 요소를 가져옵니다. 일치하는 요소는 일치하는 요소를 찾을 수 없는 경우 빈 개체가 되는 NodeList 개체로 반환된다. 또한 반환객체는 nodeList이기때문에 for문 또는 foreach 문을 사용해야 합니다.

사용 방법은 아래와 같습니다.


<p>1-1</p>
<p>1-2</p>
<p>1-3</p>

<div>div one</div>
<p>no blue</p>
<div>div two</div>

<scrpit>
var blueColor = document.querySelectorAll('p');
for(var p of paragraphs)
  p.style.color = 'blue';
</scrpit>

3. addEventListner()

이벤트 는 클릭, 포커스 또는로드와 같이 HTML과 반응 할 수있는 HTML 요소에 어떤 일이 발생하는지 나타냅니다. 요소에서 이러한 이벤트 를 수신 하고 이벤트가 발생했을 때 무언가를 수행 하도록 JS 함수를 지정할 수 있습니다 .

특정 이벤트에 기능을 할당 할 수있는 세 가지 방법이 있습니다 .

1)HTML에 inline으로 등록


<button onclick="click">HTML</button>

2) element의 onload 속성을 통한 등록


<button id="test">클릭</div>
<script>
var check = document.getElementById("test"); 
check.onclick = function ()
 {     
		alert("클릭"); 
 } 
</script>

3) addEventListener 를 이용한 등록


<button id="test">클릭</div>
<script>
var check = document.getElementById("test"); 
check.addEventListener("click",function()
 {     
		alert("클릭"); 
 }, true);
</script>

addEventListener()(제 3 해결책)에는 몇 가지 장점이 있습니다 . 하나의 이벤트에 하나 이상의 이벤트 리스너로 기능을 할당 할 수있는 최신 표준이며 유용한 옵션 세트가 함께 제공됩니다.

capture : 이벤트 버블 링을 중지합니다. 즉, 요소의 조상에서 동일한 이벤트 유형에 대한 이벤트 리스너를 호출하지 않습니다.이 기능을 사용하려면 두 가지 구문을 사용할 수 있습니다. ele.addEventListener(evt, listener, true)ele.addEventListener(evt, listener, {capture:true});

once : 리스너는 이벤트가 처음 발생할 때만 호출되며, 이벤트에서 자동으로 분리되어 더 이상 트리거되지 않습니다.

passive : preventDefault() 메소드로 이벤트의 기본 조치를 중지 할 수 없습니다 .

4. removeEventListener()

addEventListenr()의 호출 된 click 이벤트 리스너를 제거합니다

사용 방법은 아래와 같습니다.


btn.removeEventListener('click',foo);

5. createElement()

작성 될 HTML 의 이름 ( 예 : p또는)을 사용하여 새 HTML 요소 를 작성 div 합니다.

나중에 DOM삽입에 다른 방법을 사용하여이 요소를 웹 페이지에 추가 할 수 있습니다

사용 방법은 아래와 같습니다.


var create = document.createElement('p')

6. appendChild()

메소드를 호출하는 HTML 요소에 마지막자식 으로 요소를 추가합니다 .

삽입 할 자식은 새로만든 요소 이거나 이미 존재하는 하는 요소 일 수 있습니다 . 후자의 경우 이전 위치에서 마지막 자식 위치로 이동합니다.

사용 방법은 아래와 같습니다.


var div = document.querySelector('korea');
var add_list = document.createElement('hi');
strong.textContent = 'welcome';
div.appendChild(strong);

7. removeChild()

문서 계층구조에서 하나의 노드를 삭제한다. 주의할 점은 이 메서드는 삭제하려는 노드가 아니라 이노드를 자식으로 가진 부모노드에서 실행된다는 점입니다.

사용 방법은 아래와 같습니다.


<button onclick="test"> 삭제하기 </button>

<div id="testing">
    <p> 삭제 안당함 </p>
    <p> 삭제당함 </p>
</div>

<script>

function delete (){ 

        var groom = document.getElementById( "testing" ); 

        groom.removeChild( groom.childNodes[ 0 ] ); 
} 
</script>

8. replaceChild()

이 메서드는 호출하는 부모 요소에 속하는 다른요소로 바꿉니다.

사용 방법은 아래와 같습니다.


<ul id="Caffe">
<li>아이스아메리카노</li>
<li id="oldlist">녹차</li> //아이스티로 바뀜
<li>에스프레소</li>
</ul>

<script>
function myTea() {
  var new_list = document.createElement("li");
  var test_text = document.createTextNode("아이스티");
  tea.appendChild(test_text);

  var Caffe_list = document.getElementById("Caffe");
	var change_list =  document.getElementById ("oldlist");
	var replcaeNode = Caffelist.replaceChild(new_list, change_list ); 

}
</script>

9. cloneNode()

cloneNode() 메서드란 자바스크립트에서 객체를 복사하는 방법입니다. 즉, 똑같은 기능을 하는 엘리먼트들을 일일이 다 적을 필요가 없어지고, cloneNode를 사용하여 DOM에 복제하여 작성하게 됩니다. 이 방법은 간결하고 쉬운 코드를 만들 수 있으며 생산성을 높여주는 함수로 매우 간단하게 구현이 가능합니다. 사용 방법은 아래와 같습니다.


복사할노드.cloneNode();

또한 자식 노드도 cloneNode를 이용하여 복제할 수 있습니다.


복사할노드.cloneNode(true);

메소드의 인자 안에 true를 사용하면 됩니다. 인자 값 안에 아무것도 입력하지 않을 경우는 false 처리되며 자식 노드를 복사하지 않습니다. 잠을 들지 못하는 냥이가 양을 세고있어요. 버튼을 클릭하면 양이 늘어나는 코드를 만들어 보도록 하겠습니다.


<button onclick="click1()">click me!</button>

<div id = "myPet1"><img src="cat.png" alt="고양이"  > </div>
<div id = "myPet2"><img src="sheep.png" alt="양" ></div>


<script>
function click1() {
  var test = document.getElementById("myPet2").lastChild;
  var clone = test.cloneNode();
  document.getElementById("myPet1").appendChild(clone);
}
</script>

다음 예제의 실행 화면은 다음과 같습니다. click me! 버튼을 클릭하면 고양이 옆에 양들이 추가됩니다!

10. insertBefore()

insertBefore() 메서드는 특정 부모 노드의 자식 노드 앞에 새로운 노드를 추가하는 메서드입니다. 특정 위치에 새로운 노드를 추가할 수 있는 appendChild(), insertData() 메서드가 비슷한 역할을 합니다. 또한 기준 자식 노드에 아무 값도 전달하지 않으면 새로운 노드는 자식 노드 리스트의 맨 마지막에 추가되게 됩니다. 즉, appendChild()와 같은 기능을 하게 됩니다. 사용 방법은 다음과 같습니다


부모노드.insertBefore(새로운자식노드, 기준자식노드)

새로운 자식 노드 : 자식 노드 리스트에 새롭게 추가할 노드를 전달합니다. 기준 자식 노드 : 이 노드 앞에 새로운 노드가 추가되며 새로운 노드를 삽입할 때 기준이 되는 노드입니다. insertBefore()의 예제는 바로 위에서 했던 cloneNode() 예제에서 응용하도록 하겠습니다.


<button onclick="click1()">click me!</button>

<div id="parentNode">
  <div id = "myPet1"><img src="cat.png" alt="고양이"> </div>
  <div id = "myPet2"><img src="sheep.png" alt="양"></div>
</div>


<script>
function click1() {
  var newNode = document.createElement("img");
  newNode.setAttribute("src", "sheep.png");

  var node = document.getElementById("myPet1");
  node.insertBefore(newNode, node.childNodes[0]);
}
</script>

click me! 버튼을 클릭하면 냥이(node)가 기준자식노드 이므로 그 앞에 양 친구(newNode)가 생기는 것을 확인할 수 있습니다. 위 예제의 실행 화면은 다음과 같습니다.

11. createDocumentFragment()

자바스크립트의 DOM 객체는 연산을 수행할 때마다 'DOM tree'라는 자료구조에 접근해서 사용해야 하고, 이는 자바스크립트의 성능을 저하시키는 주요한 요인입니다.(chap4-2 참조) DocumentFragment는 다른 노드를 담는 가상 노드 객체이며 메모리 상에서만 존재합니다. 그렇기 때문에 DocumentFragment를 이용한다면 객체 접근을 최소화할 수 있습니다. 테이블에 여러 행을 추가하기 등 여러 요소를 대량으로 삽입하거나 DOM 객체에 대한 다소의 접근을 필요로 하는 경우 사용하는 방법입니다. 사용 방법은 다음과 같습니다.


var d = document.createDocumentFragment();

자바스크립트에서 제공하는 DocumentFragment() 객체를 이용하면 DOM 객체에 대한 접근을 최소화할 수 있으며 성능을 최적화할 수 있습니다.

12. getComputedStyle()

getComputedStyle() 메서드를 사용했을 경우 객체를 반환합니다. 이때 객체는 인자로 전달받은 요소의 모든 CSS 속성값을 의미합니다. 이 메서드를 사용하는 이유는 element.style 속성을 사용할 경우 외부에서 import된 style 속성값을 읽어올 수 없기 때문에 사용합니다. 사용 방법은 다음과 같습니다.


var s = window.getComputedStyle(elem, pseudoElement)

elem : 속성값을 얻고자 하는 Element

pseudoElement : 일치시킬 의사 요소(pseudo element)를 지정하는 문자열, 보통의 요소에서는 생략하거나 null을 사용합니다.

예제를 한번 만들어 보겠습니다.


<p><button onclick="click_func()">클릭해보세요</button></p>
<div id="test" style="height: 50px; background-color: skyblue;">hello world</div>
<p>테스트 해 볼 div 입니다. <br><span id="test2"></span></p>


<script>
function click_func(){
  var txt = "";
  var elem = document.getElementById("test");
  s = window.getComputedStyle(elem, null)

  for (i = 0; i < s.length; i++) {
    getcss = s.item(i)
    txt += getcss + " = " + s.getPropertyValue(getcss) + "<br>";
  }
  document.getElementById("test2").innerHTML = txt;
}
</script>

html과 js를 모두 올바르게 입력한다면 실행 결과는 다음과 같습니다.

버튼을 클릭하면 hello world 가 써져 있는 박스의 태그를 가져와서 html 페이지 내에 css 속성을 출력해 줍니다.

13. setAttribute()

setAttribuet() 메서드는 HTML 요소에 새 속성을 추가하거나 이미 존재하는 속성의 값을 업데이트합니다. 다음은 사용 방법입니다.


element.setAttribute(name, value);

element : 속성이 추가되거나 속성을 업데이트할 HTML 요소.

name : 속성의 이름

value : 속성 값

예를 들어


document.getElementById('test').setAttribute('href', '링크')

id 값이 test인 요소의 href 속성을 '링크'로 정합니다. 이미 속성값이 있다면 그 값을 지우고 새로운 값으로 적용합니다.

14. getAttribute()

getAttribute() 메서드는 특정 HTML 요소에 속하는 지정된 속성의 값을 반환해줍니다. 사용방법은 다음과 같습니다.


ele.getAttribute(name);

ele : 속성이 요청 된 HTML 요소.

name : 속성의 이름.

예를 들어 다음과 같은 문장이 있을 때,


var g = document.getElementById('test').getAttribute('href');

id의 값이 test인 요소의 href 속성 값을 가져와서 출력해줍니다.

15. removeAttribute()

removeAttribute() 메서드는 특정 HTML 요소의 지정된 속성을 제거합니다. 기본적인 문법은 다음과 같습니다.


ele.removeAttribute(name);

ele : 속성을 제거할 HTML 요소.

name : 속성의 이름.

예를 들어,


document.getElementsByTagName('h1')[0].removeAttribute( 'class' );

이 문장은 h1의 0번째 요소의 class 속성을 제거합니다.

QuerySelector() 메서드는 하나 이상의 CSS 선택자와 일치하는 첫 번째 요소를 반환한다. 일치하는 항목이 없으면 null을 반환한다.QuerySelector()가 도입되기 전에 개발자는 지정된 ID 값을 가진 요소를 가져오는 getElementById() 방법을 광범위하게 사용했다.getElementById()는 여전히 유용한 방법이지만, 새로운 QuerySelector() 및 QuerySelectorAll() 방법을 사용하면 CSS Selector를 기반으로 요소를 자유롭게 대상으로 할 수 있으므로 유연성이 더 높아진다.