[자바스크립트] 04. DOM - (2) 동적인 효과 주기

ㅁ 함수로 동적인 효과 주기

<body>

</div>

<h2>특정요소의 컨텐츠 영역 조작하기</h2>

<div id="div2"><b>안녕하세요</b></div>

<div id="div3"><b>어서오세요</b></div>

<button onclick="fnChangeContent();">컨텐츠영역조작</button>

// 함수로 동적인 효과주기 (화면 전체 수정 아니고 일부만 수정됨)

function fnChangeContent() {

const divEl2 = document.getElementById("div2");

const divEl3 = document.querySelector("#div3");

console.dir(divEl2);

// innerText property : 요소의 content영역값 (내부 텍스트)

console.log(divEl2.innerText);

console.log(divEl2.textContent); // 똑같은 놈이라서 선생님은 innerText 쓰겠습니다.

divEl2.innerText = "수정잘되나";

divEl2.innerText = "<b>수정잘되나</b>";

// innerHTML property : 요소의 content영역값 (내부 요소)

console.log(divEl3.innerHTML);

divEl3.innerHTML = "<b>태그반영잘됨</b>";

divEl3.innerHTML += "<h4>ㅋㅋㅋ</h4>";

}

</script>

</body>

ㅁ 특정 요소의 checked속성 조작하기

- input 요소들 선택하기

<body>

<h2>특정 요소의 checked속성 조작하기</h2>

<!--

checked는 사실 checked="checked" 속성명과 속성값이 같으면 생략가능.

-->

</div>

</body>

- 기본 세팅

ㅁ 특정 요소의 checked속성 조작하기 ( Attribute )

<body>

<h2>특정 요소의 checked속성 조작하기</h2>

<!--

checked는 사실 checked="checked" 속성명과 속성값이 같으면 생략가능.

-->

</div>

// script로 어떤거는 checked 부여하고 해제해본다.

(1) Attribute 조작

document.getElementById("reading").setAttribute("checked", "checked"); // 우선 요소를 선택한다. id로.

</script>

</body>

- 선택된 채로 나타난다.

// script로 어떤거는 checked 부여하고 해제해본다.

(1) Attribute 조작

document.getElementById("reading").setAttribute("checked", "checked"); // 우선 요소를 선택한다. id로.

document.getElementById("study").removeAttribute("checked");

</script>

- 브라우저에서 "공부"에 체크해놓고, vscode를 저장하면 체크했던게 해제된다.

ㅁ 특정 요소의 checked속성 조작하기 ( Property )

(2) property 조작

document.getElementById("cook").checked = true; // 기본값 false

document.getElementById("reading").checked = false;

- 브라우저 가면 cook이 처음부터 체크되어있다. "독서"에 체크해놓고 vscode 저장하면 체크했던게 해제된다.

ㅁ 특정 요소의 CSS 조작하기

<body>

<h2>특정요소의 CSS 조작하기</h2>

</body>

<body>

<h2>특정요소의 CSS 조작하기</h2>

const btnEl1 = document.getElementById("btn1");

btnEl1.innerHTML = "왕버튼";

</script>

</body>

const btnEl1 = document.getElementById("btn1");

btnEl1.innerHTML = "왕버튼";

console.dir(btnEl1);

</script>

- 이 버튼 요소가 가지고 있는 스타일 정보를 style이라는 프로퍼티로 표현하고 있다.

그런데 이 style이라는 속성의 값으로 어떤 문자열이 있는게 아니고, 중괄호 블록에 해당하는 객체 형태로 가지고 있다.

- style이라는 속성의 값으로 모든 css 속성을 가지고 있는 객체가 있다.

- console.dir()은 웹 브라우저의 콘솔에서 객체의 구조를 탐색할 수 있게 도와주는 메서드입니다.

일반적으로 console.log()와 함께 사용되며, 객체의 상세한 속성과 메서드를 보다 구조적으로 표시할 때 유용합니다.

<body>

<h2>특정요소의 CSS 조작하기</h2>

const btnEl1 = document.getElementById("btn1");

btnEl1.innerHTML = "왕버튼";

console.dir(btnEl1);

// 스타일 수정하려면 style 속성 내의 css 속성까지 접근

btnEl1.style.backgroundColor = "red";

btnEl1.style.width = "150px";

btnEl1.style.height = "150px";

btnEl1.style.border = "3px dashed pink";

btnEl1.style.fontSize = "20px";

</script>

</body>

- 스타일 수정하려면 style 속성 내의 css 속성까지 접근.

style 속성을 변경하고 싶다면 btnEl1.style 하면 안되고 정확히 어떤 속성을 수정할건지 스타일 속성 내에 객체 중의 css 속성까지 접근해야 한다.

btnEl1.style.backgroundColor = "red";

ㅁ 연습1

ul#ul1>li{목록$}*5

</ul>

- 동적인 효과란 사용자의 상호작용이나 특정 조건에 따라 화면의 요소들이 변화하거나 애니메이션이 적용되는 것을 의미합니다.

<body>

</ul>

// li요소들의 문구를 모두 "안녕하세요"로 변경

// li요소들의 배경색을 모두 "yellow"로 변경

function fnChangeStyle() {

// const list = document.getElementsByTagName("li"); // 이래도 되고

const list = document.querySelectorAll("#ul1 > li"); // [li, li, li, li, li]

// list[0].innerHTML = "안녕하세요";

// 배열객체가 아닌 요소객체의 innerHTML 속성에 새로운 값 대입.

// 이렇게 5개 인덱스 다 일일이 수정해도 되고, 반복문도 가능.

let blueColor = 50;

for(let i=0; i<list.length; i++) {

list[i].innerHTML = "안녕하세요" + (i+1);

// list[i].style.backgroundColor = "yellow"; 이래도 되고

list[i].style.backgroundColor = "rgb(130, 220, " + blueColor + ")";

blueColor += 30;

}

</script>

</body>

ㅁ 연습2

<body>

이름 : <input type="text" id="username"> <br>

거주지 :

</select>

<br>

관심분야 :

<label for="oracle">Oralce</label>

<label for="front">Front</label>

<br>

</body>

- 기본 세팅

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

이름 : <input type="text" id="username"> <br>

거주지 :

</select>

<br>

관심분야 :

<label for="oracle">Oralce</label>

<label for="front">Front</label>

<br>

function fnGetUserInfo() {

}

</script>

</body>

</html>

- 이렇게 해도 되는데, 이 방식말고도 버튼 클릭시 실행될 함수를 지정할 수 있다. 다른 방식.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

이름 : <input type="text" id="username"> <br>

거주지 :

</select>

<br>

관심분야 :

<label for="oracle">Oralce</label>

<label for="front">Front</label>

<br>

document.getElementById("btn2").onclick = function() { // 어딘가에 대입할 땐 익명 함수

// 사용자가 입력한 이름 value값

// 사용자가 선택한 거주지 value값

// 사용자가 체크한 관심분야 value값 가져오기

const inputEl = document.getElementById("username"); // input요소객체를 가져온거지 텍스트값을 가져온건 아님.

const selectEl = document.getElementById("addr"); // select요소객체

const checkElList = document.querySelectorAll(".interest"); // [checkbox요소, checkbox, checkbox] 배열

// input요소객체의 값을 가져오고자할 때 value 속성 이용(엄청 자주 쓴다)

console.log(inputEl.value);

console.log(selectEl.value);

const resultEl = document.getElementById("result");

resultEl.innerHTML = "<b>" + inputEl.value + "님은 " + selectEl.value + "에 거주합니다.</b><br>";

// 이름 쓰고 거주지 정하고 버튼 누르면 홍기동님은 전주에 거주합니다.

resultEl.innerHTML += "관심분야는 ";

let count = 0;

for(let i=0; i<checkElList.length; i++) {

if(checkElList[i].checked) {

resultEl.innerHTML += checkElList[i].value + " ";

count++;

}

if(count == 0) { resultEl.innerHTML += "없습니다."; }

else { resultEl.innerHTML += "입니다."; }

}

</script>

</body>

</html>

- 이벤트를 연결하는 2가지 방식 중 2번째 방식. 익명함수 대입.

- input 요소 객체의 값을 가져오고자 할 때는 value 속성을 이용한다.

- value 속성을 통해 값을 가져올 수 있는 요소들은 주로 사용자 입력과 관련된 input, textarea, button, option, select 요소들이 있습니다.

ㅁ 코드가 제대로 작성되었음에도 결과가 안나왔었는데 원인은 인터넷이 끊겼었음. 그래서 새로 live server 여니까 됨.

'03. 웹 표준 기술 > JavaScript' 카테고리의 다른 글

[자바스크립트] 04. DOM - (3) 복습 (0)	2024.08.12
[자바스크립트] 실습문제2 - DOM 관련문제 (0)	2024.08.09
[자바스크립트] 04. DOM (0)	2024.08.09
[자바스크립트] 실습문제 (0)	2024.08.08
[자바스크립트] 02. 연산자, 03. 제어문 (0)	2024.08.08

공부 블로그

[자바스크립트] 04. DOM - (2) 동적인 효과 주기

'03. 웹 표준 기술 > JavaScript' 카테고리의 다른 글

티스토리툴바

[자바스크립트] 04. DOM - (2) 동적인 효과 주기

'03. 웹 표준 기술 > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바