인천 일보 아카데미 34일차 -3- DOM - Document / DOM - 태그에 내용 추가,수정 / DOM - id로 요소 가져오기 / DOM - class로 요소가져오기

• DOM이란 ?

html의 body부분을 javascript로 가져와 변수로 사용하기 위해 주로 사용됩니다

쉽게 말하면 javascript에서 html을 제어하는것을 말합니다

DOM의 구조

 

 

• DOM - document의 사용 예시

Document  객체

Document 객체는 웹 페이지 그 자체를 의미합니다.

웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 합니다.

<script>
    // document 객체 값 출력
    console.log(document);
</script>

 

이렇게 document로 html의 모든 정보를 가져와 document의 메소드와 함께 사용합니다

아직 다 배우지는 못했지만 document 객체의 대표적인 메소드 기능은

html 요소 선택 , html 요소 생성 , html 이벤트 추가 , html 객체 선택 정도가 있습니다

 

 

- html 요소 선택

이미지 출처 : TCP School

그중 오늘 알아볼 내용은 html 요소 선택부분입니다

 

 

- document.get.ElementByTagName("태그")

<script>
    // 현재 문서에 있는 모든 h2 요소 출력
    console.log(document.getElementsByTagName("h2"));
</script>

 

 

- const 변수이름 = document.getElementsByTagName("h2");

<script>
    변수 h2All 에 해당 태그 이름의 모든 요소를 배열로 넣음
    const h2All = document.getElementsByTagName("h2");
    
    배열로 대입받은 h2All 출력
    console.log(h2All);
    
    h2All의 0번째칸 출력
    console.log(h2All[0]);
</script>

 

 

- 태그의 속성값 출력 & 텍스트만 출력

<script>
    //(해당 태그 안의 태그까지 모두 출력해줌)
    console.log(h2All[0].innerHTML);
    
    //첫번째 h2 태그의 innerText 속성값 출력
    //(해당 태그 안의 Text만 모두 출력해줌)
    console.log(h2All[0].innerText);
</script>

 

 

- 반복문을 확용하여 h2요소들의 innerText 출력

<script>
    //반복문을 확용하여 h2요소들의 innerText 출력
    for (let a = 0; a < h2All.length; a++) {
        console.log(h2All[a].innerText);
    }
</script>

 

 

- document.querySelector("css선택자")

<script>
// querySelector(css선택자): 해당 요소 중 첫번째 것만 가져옴
    console.log(document.querySelector("h2"));
</script>

 

 

- document.querySelectorAll("css선택자")

<script>
    // All을 붙이면 모두 가져옴
    console.log(document.querySelectorAll("h2"));
</script>

 

 

- 내용이 없는 h4 태그에 텍스트 추가하기

<script>
    // h4태그 요소 가져오기
    const h4ele = document.getElementsByTagName("h4");
    // h4태그 innerText 값
    h4ele[0].innerText = "이 내용이 화면에 보입니다";
</script>

 

 

- h4태그에 텍스트 수정하기

<script>
    document.getElementsByTagName("h4")[0].innerText = "ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ"
</script>

 

 

- id가 적용된 요소 가져오기

ElementById 와 querySelector 2가지 방법이 있다

<script>
    const ele1 = document.getElementById("id1");
    const ele2 = document.querySelector('#id1');
    console.log(ele1.innerText);
    console.log(ele2.innerText);
</script>

 

- class가 적용된 모든 요소 가져오기

<script>
    // class1이 적용된 모든 요소 가져오기
    const ele3 = document.getElementsByClassName("class1");
    const ele4 = document.querySelectorAll('.class2');
    
    for (let i = 0; i < ele3.length; i++) {
        console.log(ele3[i].innerText);
    }

    for (let i = 0; i < ele3.length; i++) {
        console.log(ele4[i].innerText);
    }
</script>

 

 

자투리 - 왜 id출력문과 class의 출력문이 다른가?

html에서 id는 같은 이름으로 중복 사용이 불가능하다

하지만 class는 같은 class이름 중복 사용이 가능하기 때문에

애초에 getElementById가 복수형이 아닌것과 마찬가지로 출력문도 다르다

하지만 class도 배열의 번호만 알고 있다면 for문을 사용할 필요는 없다