SL아카데미(자바플랫폼 웹개발자과정A)

DOCTYPE html> Document const $input = document.querySelector('input'); //요소노드에 유사배열객체 안에 유사배열이 있다. console.log($input.attributes); console.log($input.attributes.type); console.log($input.attributes.type.value); // eamil 찾기 $input.attributes.type.value = 'password'; // $input.attributes.type.value = 'checkbox'; $input.attributes.id.value='acc'; // 아이디 바꾸기 console.log($input.attributes.value.value);

DOCTYPE html> Document .red { color: red; background: orange; } .blue { color: blue; background: aqua; } .tomato { color: tomato; background: yellow; } 사과 딸기 토마토 자두 // 유사배열 : 객체와 배열의 성질을 모두 가진 객체 // 단, 배열이 아니기 때문에 배열 함수를 쓸 수 없음. const arr = { // 유사배열의 형태 0: '멍멍이', 1: '야옹이', 2: '짹짹이', length: 3, tiger: '어흥이' }; console.log(arr[1]); // 배열처럼 쓸수 있음 console.log(arr.length); console.log(arr.tiger); //..

DOCTYPE html> Document 사과 const $fruits = document.getElementById('fruits'); //사과 li 요소노드를 취득 const $apple = $fruits.firstElementChild; // $apple의 사본 (얕은 복사: 자기 자신 요소노드만 복제) const $shallow = $apple.cloneNode(false); console.log($shallow); //$apple의 사본(깊은 복사:자기 자신포함 모든 후손노드를 복제) const $deep = $apple.cloneNode(true) console.log($deep); DOCTYPE html> Document 사과 딸기 자몽 라임 레몬 바나나 const $fruits = docu..

DOCTYPE html> Document 사과 const $fruits = document.getElementById('fruits'); //사과 li 요소노드를 취득 const $apple = $fruits.firstElementChild; // $apple의 사본 (얕은 복사: 자기 자신 요소노드만 복제) const $shallow = $apple.cloneNode(false); console.log($shallow); //$apple의 사본(깊은 복사:자기 자신포함 모든 후손노드를 복제) const $deep = $apple.cloneNode(true) console.log($deep);

DOCTYPE html> Document 사과 바나나 포도 const $fruits = document.getElementById('fruits'); const $newLi = document.createElement('li'); $newLi.textContent = '망고'; // $fruits.insertBefore($newLi, $fruits.children[1]); // $fruits.insertBefore($newLi, $fruits.lastElementChild); // $fruits.insertBefore($newLi, document.querySelector('#fruits > li:nth-child(2)')); // $fruits.insertBefore($newLi, $fruits.fir..

돔 제어 선택자 부모 요소 선택자 현재 id가 "obj1"인 요소를 기준으로, 부모 요소는 ‘div’요소입니다. 자식 요소 선택자 리스트1 리스트2 리스트3 형 요소 선택자 리스트4 리스트5 리스트6 동생 요소 선택자 리스트7 리스트8 리스트9 DOCTYPE html> Document 돔 제어 선택자 부모 요소 선택자 현재 id가 "obj1"인 요소를 기준으로, 부모 요소는 ‘div’요소입니다. 자식 요소 선택자 리스트1 리스트2 리스트3 형 요소 선택자 리스트4 리스트5 리스트6 동생 요소 선택자 리스트7 리스트8 리스트9 //1. 전체 요소의 font-size를 20px로 지정하세요. // document.body.style.fontSize = '20px'; const $wrap = document...

DOCTYPE html> Document #greet span { color : red; } Hello JavaScript! const $greet = document.getElementById('greet'); const text = $greet.textContent.trim(); // 엔터, 띄어쓰기 반영하여 추출 console.log(text); // trim() : 문자열의 앞 뒤 공백 제거. // textContent 사용시 공백을 없애고 싶다면 trim()을 사용. //텍스트 수정 // $greet.textContent = 'Hello JS!'; // span 태그 사라짐 $greet.firstElementChild.textContent = 'JS!' // span 선택후 문자 수정 // $g..

DOCTYPE html> Document A B // 노드 탐색의 기준요소 취득 const $fruits = document.querySelector('#fruits'); // 부모 탐색 const $wrap = $fruits.parentElement; console.log($wrap); const $banana = $fruits.children[1]; console.log($banana.parentElement); console.log($banana.parentElement.lastElementChild); console.log($banana.parentElement.parentElement); console.log($banana.parentElement.parentElement.parentElemen..

DOCTYPE html> Document 사과 바나나 포도 const $fruits = document.getElementById('fruits'); console.log($fruits.children); // 기존 노드의 모든 자식노드를 탐색, 텍스트노드 제외 const $childList = $fruits.children; const $fristchild = $childList[0]; // const $fristchild2 = $fruits.firstchild; const $fristchild2 = $fruits.firstElementChild; console.log($fristchild); console.log($fristchild2); const $lastchild = $childList[$chi..

리스트1 리스트2 리스트3 리스트4 리스트5 리스트6 리스트7 DOCTYPE html> Document 리스트1 리스트2 리스트3 리스트4 리스트5 리스트6 리스트7 //1. id="list1"인 요소에 요소중 홀수번째 요소만 선택후 배경색상 yellow 적용 const $elems = document.querySelectorAll("#list1>li"); console.log($elems); for(let i = 0; i