[JavaScript] children, parent, siblings, before after, remove, classList, forbidden, char num, date

dom children

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

<li>Vanila js</li>

<li>React</li>

</ul>

</body>

</html>

// TODO: 자식 요소(태그) 접근

// 선택함수 : querySelector(css선택자)

let ulTag = document.querySelector("ul"); // ul 태그

// TODO: 사용법 : 태그.children[1] : 2nd li

// 태그.children[2] ; 3rd li

let two = ulTag.children[1].innerHTML; // 2nd li의 텍스트

let three = ulTag.children[2].innerHTML; // 3rd li의 텍스트

// 출력

console.log("two", two);

console.log("three", three);

// TODO: 1st 자식요소(태그) / 마지막 자식요소(태그) 접근

// TODO: 사용법 : 태그.firstElementChild; // 1st 자식 요소(태그)

let one = ulTag.firstElementChild.innerHTML; // 1st li의 텍스트

// TODO: 사용법 : 태그.lastElementChild; // last 자식 요소(태그

let last = ulTag.lastElementChild.innerHTML; // last li의 텍스트

// 출력

console.log("one", one);

console.log("last", last);

결과

dom parent

html

<!DOCTYPE html>

<head>

<title>부모 요소(element, 태그) 접근</title>

</head>

<body>

<ul>

<li>Vanila js</li>

<li>React</li>

</ul>

</body>

</html>

// TODO: 부모 요소(태그) 접근

// 선택함수 : li 태그 중 class=two 인 것

let liTag = document.querySelector(".two")

// TODO: 사용법: 태그.parentElement; // 태그의 부모태그

let parent = liTag.parentElement;

// 출력

console.log("parent",parent)

결과

dom siblings

html

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

<li>Vanila js</li>

<li>React</li>

</ul>

</body>

</html>

// TODO: 형제 요소(태그)

// 선택함수 : li 태그 중 class=two 인것

// 사용법 : document.querySelector(css선택자)

let liTag = document.querySelector(".two");

// TODO: 사용법 : 태그.previousElementSibling;

// TODO: 태그의 앞에 있는 형제 요소(태그) 접근

let siblingPre = liTag.previousElementSibling.innerHTML;

// 출력

console.log("siblingPre", siblingPre);

// TODO: 사용법 : 태그.nextElementSibling;

// TODO: 태그의 뒤에 있는 형제 요소(태그) 접근

let siblingNext = liTag.nextElementSibling.innerHTML;

// 출력

console.log("siblingNext", siblingNext)

결과

dom before after

html

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

<li>Vanila js</li>

<li class="movingTag" style="color: red;">React</li>

</ul>

</body>

</html>

// TODO: 선택 태그 앞/뒤 추가

// 선택함수 : li 태그 중 class=two 인것

// 사용법 : document.querySelector(css선택자)

// 1) 선택한 태그

let liTag = document.querySelector(".two"); // 녹색

// 2) 이동할 태그

let movingTag = document.querySelector(".movingTag"); // 빨간색

// TODO: 선택한 요소(태그)의 앞에 추가 : 문자열/태그 모두 이동 가능

// TODO: 사용법 : 태그.before(이동할태그)

liTag.before(movingTag);

// TODO: 선택한 요소(태그)의 뒤에 추가 : 문자열/태그 모두 이동 가능

// TODO: 사용법 : 태그.after(이동할태그)

liTag.after(movingTag);

// TODO: 자바스크립트 특징 : 스크립트 언어 , line by line 으로 실행됨(컴파일 없음)

// line by line 으로 실행 : 1라인을 읽으면 1)문법 해석 -> 2)바로 실행

// 컴파일 언어 vs 스크립트 언어 속도 차이 : 컴파일 언어 빠름

// , 미리 문법해석함 -> 바로 실행

결과

dom remove

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

<li>Vanila js</li>

<li class="removeTarget">React</li>

</ul>

</body>

</html>

// TODO: 1) 선택한 자기자신 삭제

// 선택함수 : class="one" 인것

// 사용법: document.querySelector(css선택자);

let liOne = document.querySelector(".one");

// TODO: 요소 삭제

// 사용법: 태그.remove();

liOne.remove();

// TODO: 2) 부모의 자식중 1개를 삭제

// 부모 선택 : ul태그

let ulTag = document.querySelector("ul");

// 삭제할 자식 태그 선택 : class="removeTarget"

let removeTarget = document.querySelector(".removeTarget");

// TODO: 자식 태그 삭제하기

// 사용법: 부모태그.removeChild(삭제할자식태그)

ulTag.removeChild(removeTarget);

결과

dom classList

html

<!DOCTYPE html>

<head>

<style>

.red {

color: red;

}

.skyblue {

color: skyblue;

}

</style>

</head>

<body>

<div id="content" class="first second third">JS classList</div>

</body>

</html>

// TODO: 클래스 리스트 조작

// 선택함수 : #content 선택

let content = document.querySelector("#content"); // div 태그

// TODO: 빨간색 클래스 추가

// .red css 클래스를 div 태그에 추가

// 사용법 : 태그.classList.add("클래스명");

content.classList.add("red");

// TODO: 빨간색 -> 하늘색 교체

// 사용법 : 태그.classList.replace("원클래스", "바꿀클래스")

content.classList.replace("red", "skyblue");

// TODO: 하늘색 클래스 삭제

// 사용법 : 태그.classList.remove("삭제할클래스")

content.classList.remove("skyblue");

// TODO: 클래스 있는지 확인(있으면 true, 없으면 false) : contain()

// 사용법 : 태그.classList.contains("있는지확인할클래스")

let bResult = content.classList.contains("skyblue");

// 출력

console.log("bResult", bResult); // false

// TODO: 클래스가 있으면 삭제, 없으면 추가 : toggle()

// 사용법 : 태그.classList.toggle("토글할클래스");

content.classList.toggle("skyblue"); // 추가가 됨

결과

exam classList

html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

margin: 0 auto;

}

#container {

width: 1200px;

background-color: beige;

margin: 0 auto;

text-align: center;

padding: 20px;

}

button {

width: 100%;

height: 50px;

margin-top: 10px;

font-size: 2em;

}

.dark {

color: white;

background-color: black;

}

.light {

color: black;

background-color: beige;

}

</style>

</head>

<body>

<h1 id="content">JS classList</h1>

<!-- TODO: 연습문제 : .dark 클래스 있으면 .light 적용하고

없으면 dark 클래스를 적용하세요

-->

</div>

</body>

</html>

function setToggle() {

content.classList.toggle("dark");

}

결과

초기 결과와 밑에 상태일 때 토글 버튼 클릭 시

토글 버튼 클릭 시

dom forbidden

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<main>

<form>

</div>

</form>

</main>

</body>

</html>

// 금칙어 예제

// 채팅 : 입력못하는 문자(욕, 육두문자 등)

// 선택함수 : 체크대상(.name-input 클래스를 가진 input 태그)

// 금칙어 == "test"

let nameInput = document.querySelector(".name-input"); // input 태그

// 금칙어를 화면에 출력할 태그 선택

let warningMessage = document.querySelector(".warning-message"); // p태그

// 이벤트 : 클릭, 마우스 3개 , 키보드 키입력(input)

// 사용법 : 태그.addEventListener("input", function(){실행문};

nameInput.addEventListener("input", function(){

// 금칙어 감시 코딩 : nameInput 의 값(value)

let inputStr = nameInput.value; // 현재 입력된 값

// 입력된 값 -> 소문자로 변경 : .toLowerCase()

let smallChar = inputStr.toLowerCase();

// 조건문 : test 문자가 들어 왔는지 비교

// 문자열.includes("체크문자") :

// 체크문자가 있으면(포함되어 있으면) true, 없으면 false

if(smallChar.includes("test") == true) {

// 금칙어가 들어왔음 : test

warningMessage.innerHTML = "경고: test 들어옴";

} else {

warningMessage.innerHTML = "";

}

})

결과

test가 가 포함된 문자 입력시 (ex text

char num

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<main>

<p>현재 <span class="string_num">0</span>글자를 입력하세요</p>

</main>

</body>

</html>

// 예제: textarea 태그에 입력된 글자수를 출력하는 예제

// textarea : 게시판 등에 많이 사용

// 선택함수 : class="textarea" 선택

let textarea = document.querySelector(".textarea");

// 입력된 문자수를 출력할 위치 : p태그 안에 span 태그에(.string_num) 출력

let string_num = document.querySelector(".string_num");

// 키입력(키를 떼었을떄) : keyup (vs keydown , input 등)

textarea.addEventListener("keyup", function(){

// 글자수 체크 코딩

// input 태그의 값(value) == textarea 태그의 값(value)

let inputText = textarea.value; // 현재 입력된 값(문자열)

// 문자열 길이 == 문자열.length

string_num.innerHTML = inputText.length; // 글자수가 span 태그 출력됨

})

결과

date

html

<!DOCTYPE html>

<head>

</head>

<body>

<form>

<hr/>

</form>

</body>

</html>

function getDate() {

// 선택함수 : 달력

let dateVal = document.querySelector("#date");

alert(dateVal.value);

}

function getTime() {

// 선택함수 : 시간

let timeVal = document.querySelector("#time");

alert(timeVal.value);

}

결과

날짜 버튼 클릭 시

시간 버튼 클릭 시

저작자표시

'HTML > JavaScript' 카테고리의 다른 글

[JavaScript] 팝업 창 열기, 닫기, 이동하기, 모니터 해상도, 웹 브라우저 크기, 스크롤 이동 (0)	2023.08.26
[JavaScript] DOM querySelector, onclick, mouseover, setInterval, addEventListener (0)	2023.08.22
[JavaScript] 함수, 객체 (0)	2023.08.21
[JavaScript] 배열, 배열함수, 내장함수, 반복문 (if switch, for, for while, array,document) (0)	2023.08.18
[JavaScript] for문, 반복문 예제 (0)	2023.08.17

dom children

dom parent

dom siblings

dom before after

dom remove

dom classList

exam classList

dom forbidden

char num

date

'HTML > JavaScript' 카테고리의 다른 글

티스토리툴바