기본조작

접근

사용 예 
<input type="text" id="output">
<script>
  var output = document.getElementById('output');
  consol.log(output.value);
</script>
B_Elements >> [No].html
검색함수
No 함수명 동작
a document.getElementById id로검색합니다.
a2 document.getElementsByClassName class이름으로 검색합니다.
a3 document.querySelectorAll CSS선택자를 인자로 받아 검색합니다.
#id1 : id1인 객체를 모두 검색
.class1 : class1인 클래스를 모두 검색

생성

<script>
  // 상위 객체를 가져옵니다.
  var body = document.querySelector('body');

  // 새로운 객체를 생성합니다.
  var newDiv = document.createElement('div');

  // 상위 객체에 추가합니다.
  body.appendChild(newDiv);
</script>
B_Elements >> b_create.html

조작

다음과 같이 가정 할 때, 각각의 접근은 아래와 같습니다.

<tag class="class1 ..." attribute="attribute-value" style="style-attr:style-attr-value">content</tag>
B_Elements >> [No].html
Attribute접근 방법
No 종류 코드
c class tag.className
※ 문자열로 넘겨받기 때문에 추가제거를 편하게 하려면,
객체.classList.contains(클래스명) : 확인용
객체.classList.add(클래스명) : 추가
객체.classList.remove(클래스명) : 제거
c2 attribute
(ID 포함)		 tag.attribute = "attribute-value"
tag.id = "myID";
getAttribute, setAttribute로도 접근 가능
c3 style tag.style.styleAttr = "style-attr-value"
tag.style.fontSize = "1.5em";
※ font-size > fontSize
※ style은 개별속성과 상속받은 속성이 있습니다.
문서에 반영된 속성은 상속속성 + 개별속성이므로 반영된 속성을 참고하려면, window객체로부터 속성을 받아와야 합니다.
c4 contents tag.innerText(테그도 그대로 출력)
tag.innerHtml

Form 예시

Form 접근
대상 방법 자료형
입력된 값 value 문자열
캡션(버튼이름) textContent 문자열
활성화 여부 disabled true, false
C_Form >> [No].html
읽기 예제
No 예제 명 코드 실행 모습
a A에서 복사하여 B에 붙여넣기 
<input type="password" id="getElemnet-text"
  onkeydown="document.getElementById('getElemnet-text2').value = this.value"></input>
<input type="text" id="getElemnet-text2" disabled></input>
 메시지를 입력하세요.
b 버튼이 눌릴 때 마다 캡션 바꾸기 
<button onclick=
"if(this.textContent=='열기'){
  this.textContent='닫기'
}else{
  this.textContent='열기'
};">
열기</button>
c 라디오 버튼 
<input name="sex" type="radio" value="남자" onclick="writeGender(this.value)">남자
<input name="sex" type="radio" value="여자" onclick="writeGender(this.value)">여자<br>

<input type="radio" name="color" value="red" onclick="setColor(this.value)">Red
<input type="radio" name="color" value="green" onclick="setColor(this.value)">Green
<input type="radio" name="color" value="blue" onclick="setColor(this.value)">Blue

<textarea id="textarea-js-test"></textarea>
<script>
  function writeGender(value) {
    document.getElementById('textarea-js-test').textContent = value;
  }
  function setColor(value) {
    document.getElementById('textarea-js-test').style.backgroundColor = value;
    document.getElementById('textarea-js-test').style.color = "white";
    document.getElementById('textarea-js-test').style.fontWeight = "Bold";
  }
</script>
 남자 여자
Red Green Blue
d 슬라이드 바 
마우스move: <input id="range-js-test" type="range" min="0" max="100" onmousemove="apply_progress(this.value)"><br>
on change: <input id="range-js-test" type="range" min="0" max="100" onchange="apply_progress(this.value)"><br>
반영된 값: <progress id="progress-js-test" value="0" max="100">
<script>
  function apply_progress(value) {
    document.getElementById('progress-js-test').value = value;
    document.getElementById('textarea-js-test').textContent = value;
  }
</script>
 마우스move:
on change:
반영된 값:
e 체크박스 
확인하였습니다.<input type='checkbox' onchange="enableButton(!this.checked)"><br>
<button id="button-js-test" disabled>후원</button>
<script>
  function enableButton(sts) {
    document.getElementById('button-js-test').disabled = sts;
  }
</script>
 확인하였습니다.

데이터베이스

json파일을 통해 DB처럼 이용할 수 있습니다. 파일형식과 관련해서 Json파일구조문서를 참조하십시오.

파일 열기

B_Elements >> f_json.html 
var request = new XMLHttpRequest();
request.open('GET', '/myData.json');
request.responseType = 'json';
request.send();
request.onload = function () {
  var list = request.response;
  ...
}

파일 읽기

B_Elements >> f_print.html

map

데이터 구조 
{
  key1:value1,
  key2:value2,
  key3:value3
}
접근
data.key1 = value1;
var newValue = data.key2;

Array

데이터 구조 
{
  "value1",
  "value2",
  "value3"
}
접근
data[0] = new_value;
var newValue = data[1];