요소 접근 방법

DOM ( Document Object Model) : 웹 문서(html)의 모든 태그를 객체 형식으로 표현한 것

 

HTML의 태그를 JS에서는 객체라고 표현.

 

즉, body 태그(html) = body 객체(JS)

=> HTML 문서 내에서 특정 태그에 접근 가능.

특정 태그에 접근해서 속성값을 새로 생성, 변경 및 얻어올 수 있음.

 

ex) document.getElementById("id이름값");

=> 어떤 태그인지는 알 수 없ㅂ지만 id 이름값으로 지정한 태그 정보를 가져온다는 뜻

 

DOM을 이용한 태그 접근법

 

1. id로 접근하기 : document.getElementById("id이름값");
    -> id가 일치하는 태그를 얻어옴

2. class로 접근하기 : document.getElementByClassName("class이름값");
    -> class 이름이 일치하는 태그를 얻어옴
    클래스 이름이 일치하는 태그가 많을 경우(두 가지 이상일 경우) 모두 가져와서 배열 형태로 저장한 다음 전달

3. name으로 접근하기 : document.getElementByName("name이름값");
    -> name이 일치하는 모든 요소를 가져와서 배열 형태로 저장, 전달

 

태그 속성 정리

 

DOM을 이용해서 접근한 태그에 추가, 제거, 수정하는 역할을 해주는 속성이 있음

textContent : 태그에서 자식 태그의 모든 텍스트 내용을 보여줌.
             - HTML 태그를 무시하고 텍스트만 가져오거나 설정할 때 사용
             - 외부 공격을 방지할 때 사용. 
             - innerText와 같지만 다른 방식으로 작동하나 쓰임은 같음.

innerText : 태그에서 자식 태그의 모든 태그 내용을 보여줌.  
           - HTML 태그를 무시하고 텍스트만 가져오거나 설정할 때 사용
           - css를 새로 설정해서 적용하거나 추가적인 스타일 변경이 필요할 때 사용
           - 외부 공격 방지 불가능

value : input이나 textarea 등의 값을 가져오거나 설정할 때 사용
       - 이외 checkbox나 radio 버튼 등 다양한 form 태그 값을 다룰 때 유용

       - innerText : 태그 안에 작성된 텍스트를 선택해서 
       - 변경, 추가, 삭제 및 필요한 작업을 진행
       - 태그 안에 소비자가 입력하거나 개발자가 입력해놓은 값을 가져옴

innerHTML : HTML 안에 HTML을 만들어서 작성

style : HTML 태그의 스타일을 설정하거나 가져올 때 사용
       - 스타일을 유동적으로 변경할 수 있음.
       - 색상, 글꼴, 배경색, 보이기 숨기기 등 설정 가능

className : html 태그에서 클래스 이름을 가져오거나 설정할 때 사용

========================================================================

creatElement : 태그 생성하기. 닫는 태그 표시 안해도 됨
    ex) div 태그를 생성하기 
        document.createElement('div');

appendChild : 눈에 보이게끔 부모 태그에 새로 만든 자식태그를 추가

                                         ex) menulist.appendChild(newItem);
id값 제거하고 작성하기 :         ul.          appendChild( li );
menulist = ul 태그 값
newItem = 새로 추가되는 li 태그 값