HTML DOM getElementById() 메서드
- 지정된 값을 가진 ID 속성이 있는 요소를 반환한다
- HTML DOM에서 가장 일반적인 방법 중 하나이다.
- 문서의 요소를 조작하거나 정보를 얻으려고 할 때마다 거의 사용된다
- 만약 지정된 ID를 가진 요소가 없으면 null을 반환하고
- 지정된 ID를 가진 요소가 두 개 이상 있는 경우
getElementById()메서드는 소스 코드의 첫 번째 요소를 반환한다
document.getElementById(elementID)출처 : https://www.w3schools.com/jsref/met_document_getelementbyid.asp
문서 객체 모델(DOM)
문서 객체 모델(DOM, Document Object Model)
XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다
DOM의 기능
- 문서 내의 모든 요소를 정의
- 각각의 요소에 접근하는 방법을 제공
자바스크립트가 아래의 내용을 가능하게 한다
- HTML 문서의 모든 요소나 속성을 추가/제거/변경
- CSS 스타일을 변경
- HTML 이벤트 추가/반응
DOM의 종류
- Core DOM : 모든 문서 타입을 위한 DOM 모델
- HTML DOM : HTML 문서를 위한 DOM 모델
- HTML 문서를 조작하고 접근하는 표준화된 방법을 정의
- 모든 HTML 요소는 HTML DOM를 통해 접근이 가능하다
- XML DOM : XML 문서를 위한 DOM 모델
- XML 문서에 접근하여, 그 문서를 다루는 표준화된 방법을 정의
- 모든 XML 요소는 XML DOM를 통해 접근이 가능하다
출처 : http://tcpschool.com/javascript/js_dom_concept
인터페이스 (interface)
서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면
사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템
코드활용
HTML의id가count인 요소span태그에 우측의 더한 값을 넣기
document.getElementById("count").innerHTML = "(" + content.length + "/200)";
자바스크립트 특징 : 문장을 끝맺을 때 세미콜론을 붙여도 되고 안붙여도 되니까
value 다음에도 세미콜론을 입력해도 되고 안해도 된다
-
content.length;을 해버리면 문장이 끝나게 되서 "/200)" 의 내용은 입력이 안된다var content = document.getElementById("jasoseol").value; -
자바스크립트 문자열 길이
문자열string의 길이를 반환한다 (공백포함)
빈 문자열의 길이는 0
<body class="container">
<h1>자기소개</h1>
<textarea
class="form-control"
rows="3"
id="jasoseol">
나는 코딩공부를 합니다.
</textarea>
<span id="count">(0/200)</span>
<script>
var content = document.getElementById("jasoseol").value;
document.getElementById("count").innerHTML = "(" + content.length + "/200)";
</script>
새로운 것을 도전하고 배운것을 정리하려 합니다.