키보드와 하루

1. 개념 removeChild - 자식 요소 제거 removeChild는 부모에서 포함된 자식 노드가 존재할 경우 일치하는 아이디나 클래스 등과 같은 속성을 통해 자식 노드를 제거 2. 태그 removeChild javascript 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 첫번째 div 두번째 div 세번째 div var parent = document .getElementById( "par_div" ); var child = document .getElementById( "child_div2" ); 1 parent. removeChild (child); 2 if (child. parentNode ) { child. paren..

1. style - 역할객체의 스타일 변경 2. style - 예제◈ 코드 123456789101112window.onload = function () { var v_test = document.getElementById('test1'); v_test.style.color='blue'; v_test.style.border='1px solid #000000'; v_test.style.padding='5px';} Test1 ◈ 결과화면 ◈ 설명 javascript 영역에서 style 을 활용하여 현재 h1 태그에 해당하는 객체에 스타일을 주고 있습니다 여기서 주어진 스타일은 color,border,padding 3가지 입니다

1. querySelector,querySelectorAll - 역할 querySelector - 가장 처음 선택되는 문서 객체 가져옴 querySelectorAll - 선택되는 문서 객체를 배열로 가져옴 2. querySelector - 예제 ◈ 코드 12345678910111213141516window.onload = function () { var v_font = document.querySelector('#t_font'); alert(v_font); //[object HTMLFontElement] alert(v_font.size); //10px} test1 test2 test3 ◈ 설명 font 태그를 보게 된다면 현재 id 는 모두 t_font로 일치시키고 querySelector를 사용하여 선..

1. getElementsByName - 역할 getElementsByName - 태그의 name 속성이 일치하는 객체를 배열로 가져옴 getElementsByTagName - tagName과 일치하는 문서 객체를 배열로 가져옴 2. getElementsByName - 예제 ◈ 코드 123456789101112131415161718window.onload = function () { alert(document.getElementsByName('t_font')); //[object NodeList] alert(document.getElementsByName('t_font')[0].size); //10px alert(document.getElementsByName('t_font')[1].size); //15..

1. getElementById - 역할 태그에서 id 속성이 일치하는 문서 객체를 가져옴 2. getElementById - 예제 ◈ 코드 1234567891011121314151617window.onload = function(){ alert(document.getElementById('t_font')); //[object HTMLfontElement] alert(document.getElementById('t_font').id); // t_font alert(document.getElementById('t_font').size); // 10px}; test1

1. innerHTML() - 역할태그의 내부를 의미하는 속성 2. innerHTML() - 예제◈ 코드 12345678window.onload = function(){ var v_h1 = "test1"; document.body.innerHTML = v_h1;}; ◈ 결과화면 ◈ 설명 innerHTML를 사용하면 보다 쉽게 문서 객체를 생성하여 붙일 수 있습니다

1. 객체 생성() - 역할 요소를 활용하여 객체 생성 2. 객체 생성() - 메서드메서드설명createElement()요소 노드를 생성createTextNode() 텍스트 노드를 생성appendChild()객체에 노드를 연결 3. 객체 생성() - 예제 ◈ 코드 123456789101112window.onload = function(){ var v_h1 = document.createElement('h1'); var v_h1_text = document.createTextNode('test1'); v_h1.appendChild(v_h1_text); document.body.appendChild(v_h1);}; ◈ 결과화면 ◈ 설명 v_h1 변수로 요소 노드를 생성후 v_h1_text에 텍스트 노드를 생..

1. location - 역할 주소 표시와 관련된 객체 2. location - 속성속성설명hrefURL 주소host호스트 이름과 포트 번호(localhost:8080) hostname호스트이름(localhost)port포트번호(8080)pathname디렉토리 경로search요청 매개변수(?tt=10) 3. location - 메소드메소드설명assign(link)현재 위치를 이동reload()새로고침replace(link)현재 위치를 이동 (뒤로가기버튼 동작X) 4. location - 예제 ( 페이지 이동 ) ◈ 코드 123456789101112131415$(document).ready(function () { location = 'http://devjhs.tistory.com'; location.hr..

1. screen - 역할 웹 브라우저 화면이 아닌 운영체제 화면의 속성을 가짐 2. screen - 속성속성설명height화면 높이 width 화면 넓이 availWidth사용가능한 넓이 availHeight 사용 가능한 높이colorDepth 사용 가능한 색상 수 pixelDepth 한 픽셀당 비트수 3. screen - 예제 ◈ 코드 12345678910111213141516171819$(document).ready(function () { alert(screen.width);//2560 alert(screen.height);//1080 alert(screen.colorDepth);//24 alert(screen.pixelDepth);//24 });

1. open() - 역할 새로운 window를 만들어 줌 ◈ 사용형식 open( URL , 원도 이름 , 창 설정 ) 2. open() - 창 설정 값옵션설명입력 값 height높이 값 width 넓이 값 location 주소 입력창 유무 yes , no menubar 메뉴 유무yes , noresizable 화면 크기 조절 가능 여부 yes , no status 상태 표시줄 유무 yes , no toolbar 상태 표시줄 유무 yes , no 3. open() - 예제 ◈ 코드 123456789$(document).ready(function () { window.open('http://devjhs.tistory.com','child','width=500,height=300,toolbar=no'); }..