quilt code

[자바스크립트] 보충 3 본문

daily/javascript

[자바스크립트] 보충 3

김뱅쇼 2023. 3. 16. 19:44

DOM API 속성 및 메소드


NODE의 속성

1. nodeType (노드의 종류)
  (1 -> Element, 2 -> Attribute, 3 -> Text, 8 -> Comment, 9 -> Document)

2. nodeName (노드의 이름)
  (#document -> Document, 태그이름 -> Element, #text -> Text)

3. nodeValue (노드의 값)
  (null -> Document, null -> Element, 해당문자열 -> Text)

4. parentNode (현재 노드의 부모 노드를 나타낸다.)

5. childNodes (현재 노드의 자식 노드 목록을 나타낸다.)

6. firstChild (현재 노드의 첫번째 자식 노드)   -> firstElementChild를 붙임

7. lastChild (현재 노드의 마지막번째 자식 노드) -> lastElementChild

8. previousSibling (현재 노드의 바로 앞의 형제 노드) -> previousElementSibling

9. nextSibling (현재 녿의 바로 뒤의 형제 노드) -> nextElementSibling

document 객체의 속성 및 메소드

1. document.documentElement : 문서의 루트 엘리먼트를 구한다. (HTML 문서에는 <html>태그를 말한다.)

2. document.body : HTML 문서의 <body>태그를 말한다.

3. document.getElementById("id값") : id로 엘리먼트 찾기(결과는 1개)

4. document.getElementsByTagName("태그명") : 결과가 nodeList에 담긴다. 
                                                                               (nodeList는 자바스크립트에서는 배열처럼 사용한다.)

5. document.getElementsByClassName("class값") : 결과가 nodeList에 담긴다.

6. document.querySelector("선택자") : (결과는 1개)

7. document.querySelectorAll("선택자") : 결과가 nodeList에 담긴다.

8. document.createElement("태그명") : '태그명'에 해당하는 엘리먼트 객체를 생성한다.

9. document.createTextNode("문자열") : '메시지'를 문자열값으로 갖는 Text 노드를 생성한다.

Element 객체의 속성 및 메소드

1. E.tagName : 해당 엘리먼트의 이름 즉, '태그명'을 나타낸다.

2. E.innerHTML : 해당 엘리먼트의 내용(contents)을 HTML태그까지 읽어오거나 설정한다.

3. E.innerText : 해당 엘리먼트의 내용 중에서 text만 읽어오거나 설정한다. (보이는 것만)

4. E.textContent : 해당 엘리먼트의 내용 중에서 text만 읽어오거나 설정한다. (숨겨진 것도)
                             (HTML 코드가 포함된 문자열을 설정하면 태그도 문자열로 처리하여 그대로 나타난다.)

5. E.setAttribute("속성명", "속성값") : 해당 엘리먼트의 '속성명'에 해당하는 속성에 '속성값'을 설정한다.

6. E.getAttribute("속성명") : 해당 엘리먼트의 '속성명'에 설정된 속성값을 읽어온다.

7. E.removeAttribute("속성명") : 해당 엘리먼트의 속성들 중에서 '속성명'에 해당하는 속성을 삭제한다.

8. E.appendChild(새로운 노드) : 현재 노드의 마지막 위치의 자식 노드 자리에 '새로운 노드'를 추가한다.

9. E.insertBefore(새로운 노드, 기준 노드) : 현재 노드의 자식 노드인 '기준 노드' 의 앞쪽에 '새로운 노드'를 추가한다.

10. E.replaceChild(새로운 노드, 이전 노드) : 현재 노드의 자식 노드인 '이전 노드'를 '새로운 노드'로 교체한다.

11. E.removeChild(삭제할 노드) : 현재 노드의 자식 노드 중 '삭제할 노드'를 삭제한다.

예시 코드)
function view() {
     var body = document.body;    // body 엘리먼트 찾기
   //  alert(body.nodeType);
   //  alert(body.nodeName);
   //  alert(body.nodeValue);
   //  alert(body.firstElementChild,tagName);

     var myDiv = document.getElementById("testId");
    // alert(myDiv.innerHTML);
    // alert(myDiv.innerText);
    // alert(myDiv.textContent);

    var oddList = document.getElementsByClassName("odd");
    for(let i=0; i<oddList.length; i++){
        str += oddLIst[i].innerHTML + "\n";
    }
    alert(str);
 
}


</script>
</head>
<body>
<div class="odd">첫번째 div</div>
<div id="testId">두번째<span style="display:none">div</span></div>
<div>네번째 div</div>
<div class="odd">다섯번째 div</div>

function add1() {
    // <img src="../images/lion.jpg">와 같은 엘리먼트 생성하기
    var myImg = document.createElement("img");    // <img>태그 생성
    
    // <img>태그에 'src'속성을 만들고 그 속성값을 설정한다.
    myImg.setAttribute("src","../images/lion.jpg");

   // <img>태그가 나타날 부모 노드 찾기
   방법1) var conDiv = document.getElementById("container");
   방법2) var conDiv = document.querySelector(#"container");

   // 찾은 부모 노드의 자식 중에 맨 마지막 위치에 추가하기
    conDiv.appendChild(myImg);


}
function add2(){

     // 추가할 태그 : <a href="https://www.daum.net">Daum사이트 가기</a>

     // 1. <a> 태그
     var aTag = document.createElement("a");
     
     // 2. <a>태그의 내용에 들어갈 Text 노드 생성
     var aCont = document.createTextNode("Daum사이트 가기");
 
    // 3. <a>태그에 만들어진 내용 추가하기
     aTag.appendChild(aCont);

    // 4. <a>태그의 속성 설정
     aTag.setAttribute("href","https://daum.net");

    // 5. 부모 노드 찾기
     var contDiv = document.getElementById("container");
    
    // 6. 기준 노드 찾기
     var testDiv = document.querySelector("#test");
  
    // 7. 추가 작업
     contDiv.insertBefore(aTag, testDiv);
     contDiv.replaceChild(aTag, testDiv);

}
**간단한 방법**

function add3() {
     // 추가할 내용 : <h2> 안녕하세요 </h2>
     
     // 추가할 대상의 부모 노드 찾기
      var conDiv = document.getElementById("container");
     
     // innerHTML을 이용한 추가 작업
      conDiv.innerHTML = "<h2> 안녕하세요 </h2 >"               -------------여기까지는 추가가 아니고 덮어쓰기
      conDiv.innerHTML += "<h2> 안녕하세요 </h2>"             --------------추가(끝쪽)
      conDiv.innerHTML = "<h2> 안녕하세요 </h2>" +  conDiv.innerHTML     ------추가(앞쪽)
    
     // 위치에 따른 어쩌구 (새로 파싱하는 곳만.. 뭐 그렇다고 함) @@@@
      conDiv.insertAdjacentHTML("beforebegin", "<h2>안녕하세요</h2>");
      conDiv.insertAdjacentHTML("afterbegin", "<h2>안녕하세요</h2>");
      conDiv.insertAdjacentHTML("beforeend", "<h2안녕하세요</h2>");
      conDiv.insertAdjacentHTML("afterend", "<h2>안녕하세요</h2>");


}
function del() {
     // 삭제할 엘리먼트 찾기
     var delDiv = document.querySelector("#test");
     if(delDiv != null) {
            delDiv.parentNode.removeChild(delDiv);  자기 자신 
     } else {
            alert("삭제할 대상 x")
     }
        
     // 부모.removeChild(자식)

}
<style>
#container { border : 1px solid blue; padding: 10px }
#container div { border : 1px solid black; margin: 5px}
</style>

<br><hr color="red"><br>
<form>
     <input type="button" value="확인" onclick="view()">
     <input type="button" value="추가1" onclick="add1()">
     <input type="button" value="추가2" onclick="add2()">

</form>

<div id="container">  먼저 찾아야함 

              @@@@                            이 위치에 들어가게됨       
    <div> 연습용111 </div>
    <div id="test">연습용</div>
    <div>연습용222</div>
 
 

 

'daily > javascript' 카테고리의 다른 글

[자바스크립트] 보충 2  (0) 2023.03.15
[자바스크립트] 보충1  (0) 2023.03.08
'daily/javascript' Related Articles more