단일 Element 선택
Document API
HTML의 문서에 특정 elment를 DOM API로 얻는법?
엘리먼트의 ID 속성을 기준으로 해당 엘리먼트에 해당하는 태그를 반환한다.
-document.getElementBy~ : 단일 엘리먼트를 선택하는 메소드
-document.getElementsBy~ : 다중 엘리먼트를 선택하는 메소드
document.getElementById 메소드
인자로 HTML element 태그의 id를 전달하면 해당 엘리먼트가 반환된다.
Element API
1>innerHTML 속성
-엘리먼트 안의 HTML코드를 얻거나 변경할 수 있다.
-태그 전체가 파싱된다.
2>innerText 속성
-엘리먼트 안의 텍스트를 얻거나 변경할 수 있다.
-콘텐츠가 모두 텍스트로 인식되어 반환된다.
3>style 속성
-css를 변경 할 수 있다.
Element API를 통해서 엘리먼트 속성의 값을 변경하거나 새로운 속성을 추가할 수도 있다.
그러나 몇몇 필수 속성은 object의 속성이 미리 정의가 되어있다.
ex>이미지 태그 src속성에 대해서는 API가 src속성을 동기화해주지만
src 속성이 정의되지 않는 태그에 있어서는 속성을 동기화되어 있지 않기 때문에 속성에 접근 할 수가 없다.
getAttribute 메소드 & setAttribute 메소드
getAttribute 메소드 & setAttribute를 활용하여
element의 속성의 값에 접근하여 값을 얻어올 수 있다.
1>getAttribute 메소드
-element의 속성의 값을 얻어온다.
-하나의 인자 : attribute 이름을 받는다.
-직접 객체에 동기화되지 않는 속성에 대해서도 접근이 가능하다.<script> 변수.getAttribute("인자") </script>
2>setAttribute 메소드
-element의 속성의 값을 설정함
-두개의 인자 : attribute 이름, 설정할 속성의 값을 받는다.
-직접 객체에 동기화되지 않는 속성에 대해서도 값 설정이 가능하다.<script> 변수.setAttribute("인자1","인자2") </script>
Author And Source
이 문제에 관하여(단일 Element 선택), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minj9_6/Document-API저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)