자바스크립트 정리 (2)

-JS 데이터입출력-

innerText, innerHTML 을 이용한 요소 내용 입출력

 

1) innerText : 요소에 작성된 내용을 읽거나 변경할 때 innerText 속성을 사용한다

 

2) innerHTML : innerText와 다르게 요소에 작성된 내용 + 태그 + 속성을 모두 읽어 사용한다

 

<button onclick="check1();">innerText 확인하기</button>
<button onclick="check2();">innerHTML 확인하기</button>

<script>
	function check1(){
    	const area1 = document.getElementById("area1");
        
        const input = prompt("내용을 입력해주세요");
        area1.innerText = input;
    {
    finction check2(){
    	const area1 = document.getElementById("area1");
        
        area1.innerHTML = "<input type='text' size = '20'> innerHTML로 태그넣기";
      }
 </script>

-JS에서 HTML 요소를 접근하는 방법

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

--> id가 일치하는 요소 하나만 얻어옴

2. class로 요소 접근하기 : document.getElementByClassName("class 속성값")

-->class가 일치하는 모든 요소 얻어와 배열로 반환

3. tag로 요소 접근하기 : document.getElementByTagName("태그명")

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

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

-->name이 일치하는 모든 요소 얻어와 배열로 반환

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

-->1) document.querySelector("css 선택자") : 여러 요소가 선택된 경우 첫 번째 요소만을 얻어옴

-->2) document.querySeletorAll("css 선택자") : 선택된 요소 전부를 얻어옴