테스트 실습 Javascript[Elice]

DOM 요소 선택

DOM 내에서란? 그 쉽게 말해 HTML 안에서 즉 브라우저 안에서 사용한다~~ 뭐 그렇게 이해를 하자 쉽게.. 웹 사이트 내부에서 쓴다~~

지시사항

• document.getElementsByTagName();를 사용하여 태그가 div인 요소를 선택합니다.
• document.getElementById();를 사용하여 아이디가 banana인 요소를 선택합니다.
• document.getElementsByClassName();를 사용하여 클래스가 vegetable인 모든 요소를 선택합니다.
• document.getElementsByName();를 사용하여 name 속성값이 red인 모든 요소를 선택합니다.
• 선택된 각 요소들을 document.write();를 이용해 화면에 출력합니다.

// alert("Hello world!");  

// HTML <div> 요소를 선택하도록 코드를 작성하세요  
var selectedTagName = document.getElement(ByTagName("div"));  

// 아이디가 “banana"인 요소를 선택하도록 코드를 작성하세요
var selectedId = document.getElement(ById("banana"));  

// 클래스가 "vegetable"인 모든 요소를 선택하도록 코드를 작성하세요  
var selectedClassNameS = document.getElement(ByClassName("vegetable"));  

// name 속성값이 "red"인 모든 요소를 선택하도록 코드를 작성하세요  
var selectedNameS = document.getElement(ByName("red"));  


// 선택된 요소들을 출력합니다.
document.write(selectedTagName);
document.write(selectedId);
document.write(selectedClassNameS);
document.write(selectedNameS);

DOM 요소 스타일 변경

지시사항

• document.getElementById();를 사용하여 아이디가 apple인 요소를 선택합니다.
• selectedItem.style.color를 사용하여 선택한 요소의 색깔을 red로 바꿔줍니다.
• document.getElementById();를 사용하여 아이디가 banana인 요소를 선택합니다.
• selectedItem.style.color를 사용하여 선택한 요소의 색깔을 yellow로 바꿔줍니다.

// 아이디가 "apple"인 요소를 선택하도록 코드를 작성하세요
var selectedId = document.getElement(ById("apple"));  

// 선택한 요소의 색깔을 red로 바꿉니다.
selectedId.style.color = "red"; 

// 아이디가 "banana"인 요소를 선택하도록 코드를 작성하세요
 let banana = document.getElement(ById("banana"));  

// 선택한 요소의 색깔을 yellow로 바꿉니다.
 banana.style.color = "yellow";

DOM 요소 내용 변경

지시사항

• document.getElementById();를 사용하여 아이디가 apple인 요소를 선택합니다.
• selectedItem.innerHTML를 사용하여 선택한 요소의 내용을 strawberry로 바꿔줍니다.
• document.getElementById();를 사용하여 아이디가 onion인 요소를 선택합니다.
• selectedItem.innerHTML를 사용하여 선택한 요소의 내용을 garlic으로 바꿔줍니다.

// 아이디가 "apple"인 요소를 선택하도록 코드를 작성하세요
var selectedId = document.getElement(ById("apple"));  

// 선택한 요소의 내용을 "strawberry"로 바꿉니다.
selectedId.innerHTML = "strawberry"; 

// 아이디가 "onion"인 요소를 선택하도록 코드를 작성하세요
const onion = document.getElement(ById("onion"));  

// 선택한 요소의 내용을 "garlic" 바꿉니다.
onion.innerHTML = "onion";

노드 값 접근

지시사항

• document.childNodes[1];를 사용하여 document 의 자식 노드들 중 두 번째 노드를 node1변수에 할당합니다.
• node1.childNodes[2];를 사용하여 node1의 자식 노드들 중 세 번째 노드를 node2변수에 할당합니다.
• 같은 방식으로 node2의 자식 노드들 중 두 번째 노드를 node3변수에 할당합니다.
• node1, node2, node3의 이름을 nodeName을 이용해 출력합니다.
• console.log(); 를 이용해 node2의 자식 노드들의 값을 모두 확인해봅시다.

// 1. document 의 자식 노드들 중 두번째 노드를 node1변수에 할당하도록 코드를 작성하세요.
var node1 = document.childNodes[1];

// 2. node1의 자식 노드들 중 세번째 노드를 node2변수에 할당하도록 코드를 작성하세요.
var node2 = node1.childNodes[2] ;

// 3. node2의 자식 노드들 중 두번째 노드를 node3변수에 할당하도록 코드를 작성하세요.
var node3 = node2.childNodes[1];

// 4. node1, node2, node3의 이름을 nodeName을 이용해 출력하도록 코드를 작성하세요.

document.write(node1.nodeName);
document.write(node2.nodeName);
document.write(node3.nodeName);

//5. `node2`의 자식 변수들을 모두 출력해봅니다.
console.log(node2.childNodes);

지시사항

• document.getElementById();를 사용하여 아이디가 apple인 요소를 선택하여 apple_node변수에 할당합니다.
• node.firstChild.nodeValue;를 사용하여 node의 첫 번째 자식 노드의 값을 apple_pie로 변경합니다.

// 1. document.getElementById()를 사용하여 아이디가 apple인 요소를 선택하도록 코드를 작성하세요.
var apple_node = document.getElement(ById("apple"));  

// 2. firstChild.nodeValue를 사용하여 node의 첫번째 자식 노드의 값을 `apple_pie`로 변경하도록 코드를 작성하세요.
apple_node.firstChild.nodeValue = "apple_pie";

지시사항

• getElementById(), childNodes[]를 사용하여 아이디가 apple인 요소의 첫 번째 자식 노드를 apple_node변수에 할당합니다.
• nodeValue을 사용하여 apple_node의 값을 apple_node_value변수에 할당합니다
• nodeType을 사용하여 apple_node의 타입을 apple_node_type변수에 할당합니다
• apple_node_value와 apple_node_type를 출력합니다.

// 1. 아이디가 apple인 요소의 첫번째 자식 노드를 선택하도록 코드를 작성하세요.
var apple_node = document.getElementById("apple").childNodes[0];

// 2. apple_node의 값을 변수에 할당하도록 코드를 작성하세요.
var apple_node_value = apple_node.nodeValue;

// 3. apple_node의 타입을 변수에 할당하도록 코드를 작성하세요.
var apple_node_type = apple_node.nodeType;

// 4. apple_node의 값과 타입을 출력하도록 코드를 작성하세요.
document.write(apple_node_value);
document.write(apple_node_type);