[웹프로그래밍 실습] Dom을 이용한 할 일 입력 요구 버튼 만들기 정답

예시 정답

HTML

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

JS

document.getElementById("insertButton").addEventListener("click", addList);

function addList(){

var para = document.createElement("li");

var text = document.getElementById("insert1").value;

var node = document.createElement("span");

var button1 = document.createElement("button");

button1.textContent = "하위 할 일 추가";

node.textContent = text;

para.appendChild(node);

para.appendChild(button1);

button1.addEventListener("click",add);

node.addEventListener("click",remove1);

const element = document.getElementById("list1");

element.appendChild(para);

function add(){

temp = prompt();

if(para.childElementCount <3){

var add_ol = document.createElement('ol');

add_ol.type='A';

para.appendChild(add_ol);

}

var para3 = document.createElement('li');

var para2 = document.createTextNode(temp);

para3.appendChild(para2);

para.lastChild.appendChild(para3);

}

function remove1(){

if(para.childElementCount>=3){

para.lastChild.remove();

}

실습 문제 DOM

설명

문제에서 요구하는 능력은 JavaScript DOM을 잘 활용할 수 있는지를 묻는 문제였다.

html에서 나타나는 하얀색 칸 DOM과

addlist() 함수가 실행될 때 생성되는 파란색 DOM

add() 함수가 실행될 때 생성되는 노란색 DOM이다.

활용할 메소드

- document.createElement()
- document.getElementById()
- appendChild()
- addEventListener()
- createTextNode()

- document.createElement()

document.createElement()의 경우 html 문서에 직접 element를 생성하는 것이다.

그렇기에 빈칸 안에는 'p', 'div', 'span'등 element 요소들이 올 수 있다.

위 문제의 경우는 리스트를 만들고 리스트의 하위 리스트를 만들 때 "li"와 "span"을 사용해야 한다.

특히 "span"을 꼭 사용해야 하는데

span의 특징으로는 inline 요소로 span을 통해 각각의 텍스트 인라인 요소 스타일을 변경할 수 있다.

만약 span을 사용하지 않는다면 문제를 해결하는데 어려울 것이라 생각한다.

- document.getElementById()

html 문서에서 id값을 가진 요소를 가져오는 것을 뜻한다.

위의 경우 <input>, <button>등의 id 값을 가져와서 활용한다.

- appendChild()

자식 노드를 추가하는 것을 말한다.

para.appendChild(add_ol);

위의 코드를 예를 들면 para 노드에 자식노드 add_ol를 만든다는 것을 뜻한다.

리스트 요소를 지닌 para의 하부에 순서 있는 리스트를 추가하기 위해 사용된 것이다.

- addEventListener()

위의 예시대로 addEventListener("click", remove)를 보면 클릭을 하였을 때 remove 함수를 실행하는 것을 뜻한다.

- document.createTextNode()

텍스트 노드를 만든다. textContent를 쓰지 않고 createTextNode()를 사용한 이유는 para3의 리스트 내용을 지우는 것이지 para3 자체를 지우는 것이 아니기 때문에 createTextNode()를 사용하였다.

추가설명

추가로 설명을 하자면

'하위 할 일 추가' 버튼을 눌러 텍스트를 입력하면 para3의 자식 노드들이 늘어나게 된다.

그렇기 때문에 remove 할 때 순서 하위리스트를 생성하는 add_ol을 삭제하면 된다.

DOM을 그려보면서 풀어보자

저작자표시

'웹프로그래밍 > 실습' 카테고리의 다른 글

[웹프로그래밍 실습] 부트스트랩을 이용한 웹페이지 만들기 (1)	2023.10.22
[웹프로그래밍 실습] html, css로 간단한 웹 페이지 만들기 (0)	2023.10.21
[웹프로그래밍 실습] Dom을 이용한 할 일 입력 요구 버튼 만들기 (0)	2023.10.12

유노의 지식저장소

[웹프로그래밍 실습] Dom을 이용한 할 일 입력 요구 버튼 만들기 정답

예시 정답

HTML

JS

실습 문제 DOM