[Javascript] 요소접근방법

요소접근방법

1. id로 요소 접근하기
document.getElementById("id 속성값");

2. class로 요소 접근하기
document.getElementsByClassName("클래스 속성값");

3. Tag Name으로 요소 접근하기
document.getElementsByTagName("태그명");

4. name으로 요소 접근하기
document.getElementsByName("name 속성값");

5. CSS 선택자를 이용하여 요소 접근하기
1) document.querySelector("css 선택자");
2)  document.querySelectorAll("css 선택자")

---

1. id로 요소 접근하기

document.getElementById("id 속성값");

: id가 일치하는 요소 하나만을 얻어온다

<h1>1. id로 요소 접근하기</h1>
<div class="area" id="div1"></div>
<button onclick="accessId();">클릭마다 배경색 변경</button>

// 1.id로 요소 접근하기
function accessId(){

    //id 속성값이 div1인 요소 얻어오기
    const div1 = document.getElementById("div1");

    // JS는 카멜 표기법을 사용 CSS에서는 background-color였음
    // #div1의 배경색을 얻어와 bgColor변수에 저장
    const bgColor = div1.style.backgroundColor;

    // JS에서는 문자열 비교시에도 비교연산자(==)를 사용한다.
    if(bgColor == "red"){
        div1.style.backgroundColor = "green";

    } else if(bgColor == "green"){
        div1.style.backgroundColor = "blue";
    } else{
        div1.style.backgroundColor = "red";
    }

}

---

2. class로 요소 접근하기

document.getElementsByClassName("클래스 속성값");

(같은 클래스를 가진 요소는 여러개가 있을 수 있으니 Elements)

: class가 일치하는 요소를 모두 얻어와 배열로 반환

 

<div class="area div2"></div>
<div class="area div2"></div>
<div class="area div2"></div>

<button onclick="accessClass();">배경색 변경하기</button>

//2. class로 요소 접근하기
function accessClass(){
    // class 속성값으로 div2를 가지는 요소를 모두 얻어와 배열로 저장
    const arr = document.getElementsByClassName("div2");

    console.log(arr); //console에서 배열인지 확인

    //각 배열 요소(== div 요소)
    arr[0].style.backgroundColor = "#F0844D";
    arr[1].style.backgroundColor = "#FA7150";
    arr[2].style.backgroundColor = "#E35B54";

    //각 배열 요소에 h1태그를 이용하여 자신의 이름 한글자씩 추가
    arr[0].innerHTML ="<h1>J</h1>"
    arr[1].innerHTML ="<h1>D</h1>"
    arr[2].innerHTML ="<h1>B</h1>"
}

 

div2요소 

 

---

3. Tag Name으로 요소 접근하기

document.getElementsByTagName("태그명");

: tag가 일치하는 요소를 모두 얻어와 배열로 반환

 

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<button onclick="accessTagName();">배경색 변경하기</button>

//3. Tag Name으로 요소 접근하기
function accessTagName(){
    const arr = document.getElementsByTagName("li");
    console.log(arr);
    for(let i =0; i<arr.length; i++){
        arr[i].style.backgroundColor = "rgb(152, 88," + (i*50+50) + ")";
    }
}

 

 

0~4까지의 인덱스로 얻어온다

 

색상을 지정하는 방법이 직접 색상명을 적거나 rgb 값을 직접 입력해도 된다.

---

4. name으로 요소 접근하기

document.getElementsByName("name 속성값");

: name이 일치하는 요소를 모두 얻어와 배열로 반환

 

<input type="checkbox" name="hobby" id="game" value="게임">
     <label for="game">게임</label>

     <input type="checkbox" name="hobby" id="music" value="음악감상">
     <label for="music">음악감상</label>

     <input type="checkbox" name="hobby" id="movie" value="게임">
     <label for="movie">영화감상</label>
     
     <br>
     
    <input type="checkbox" name="hobby" id="coding" value="코딩">
    <label for="coding">코딩</label>

    <input type="checkbox" name="hobby" id="exercise" value="운동">
    <label for="exercise">운동</label>

    <input type="checkbox" name="hobby" id="readbook" value="독서">
    <label for="readbook">독서</label>

     <div class="area" id="div4"></div>
     <button onclick="accessName();">확인하기</button>

//4. name으로 요소 접근하기
function accessName(){
    // #div4 얻어오기
    const div4 = document.getElementById("div4");

    //name 속성 값이 "hobby" 요소 모두 얻어오기
    const hobbyList = document.getElementsByName("hobby");
                                // ->JS에서 제공해주는게 아니라, 브라우저에서 제공해주는 함수이다
    
    div4.innerHTML = "";
    // hobby값이 얻어와지는지 console에서 확인

    console.log(hobbyList);


    let count = 0; //체크 개수 기록용 변수

    // 얻어 온 checkbox 중 체크된 요소 출력하기
    for(let i=0; i< hobbyList.length; i++) {
        
        if(hobbyList[i].checked) {
            //.checked : radio/ checkbox 요소에 체크가 되어있으면 true

            div4.innerHTML += hobbyList[i].value + " ";
            // .value : input요소의 값을 얻어온다
            // += : 이전 내용에 새로운 내용을 누적

            count++; //count 1 증가
        }
    }//for end

    div4.innerHTML +="<br><br>선택한 취미 개수: " +count;

}

class로 접근하면 HTMLCollection이라는 배열

 

이름으로 접근하면 NodeList라는 다른 객체로 배열은 아니지만 비슷하다.

---

5. CSS 선택자를 이용하여 요소 접근하기

1) document.querySelector("css 선택자");

: 여러 요소가 선택된 경우 첫 번째 요소만을 얻어온다.

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

: 선택된 요소를 전부 얻어온다.

<div class="area cls" id="div5"> test1 </div>
<div class="area cls"> test2 </div>
<div class="area cls"> test <span>3</span></div>

<button onclick="accessCss()">확인하기</button>


<hr>
<h1>input태그에 작성된 값 얻어오기</h1>
숫자 입력 : <input type="text" id="num1">
<button onclick="testFn();">확인하기</button>

//5. CSS선택자로 요소 선택하기 
function accessCss(){
    
    // #div5 선택
    const el1 = document.querySelector("#div5");
    el1.style.backgroundColor = "orange";

    // .cls 모두 선택
    const el2 = document.querySelectorAll(".cls");

    console.log(el2);

    //.cls 요소에 모두 글자색 파란색
    for(let i =0; i<el2.length; i++) {
        el2[i].style.color = "brown";
    }

    //span태그 선택
    //css에 적은 효과를 주석처리하고 실행해도 된다.
    const el3 = document.querySelector(".cls > span");
    el3.style.fontSize = "30px";
}

function testFn(){
    //#num1 input 요소에 작성된 값 얻어오기
    const num1 = document.getElementById("num1").value; //요소를 선택했는데 value로 그 안에 값 서택


    //input에 작성된 값은 모두 문자열!
    // ->Number(숫자 문자열) -> 숫자
    console.log(num1+100);
}

얘도nodelist