• 목록

크롬웹브라우저에서 개발자도구를 실행하기 위해 [F12]키를 친다.

콘솔에서 여러줄을 입력하기 위해 Shift+Enter를 치면 입력할 수 있다.

var li = document.getElementsByTagName('li'), len = li.length;

while(0<len--) {

  var li_value = li[len].firstChild.nodeValue;

  console.log(li_value);

}

console.log()를 이용하여 콘솔에서 결과를 확인할 수 있다.

<li>의 목록을 물러와 출력하도록 하였다.

ul 요소를 검색하여 해당 노드를 보고싶을 때 다음과 같이 입력한다.

document.getElementsByTagName('ul'); 

속성에서 ul에 마우스를 올리면 해당 요소가 표시된다.

노드의 값도 바꿀 수 있다. 

document.getElementsByTagName('li')[3].firstChild.nodeValue = ""; 

4번째 노드의 값이 삭제된다.

4번째 노드의 값을 "kunsan"으로 수정 해보겠다.

document.getElementsByTagName('li')[3].firstChild.nodeValue = "kunsan"; 

var aa = document.getElementById('test_div');

aa.innerHTML = "하이1";

요소의 스타일 바꾸기

var h1 = document.getElementsByTagName('h1')[0];

h1.style.color="blue";

기기 툴바 전환

기기에 맞추어 출력화면을 확인하고 싶을 때 다양한 기기를 바꾸어 가면서 확인할 수 있다.

아이폰 또는 겔럭시 화면을 선택할 수 도 있다.