![[자바스크립트] DOM 나타내기 (4)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-08-31T07%3A16%3A00.665Z-02f39e68-5295-46c2-aba9-6834b8b49f39&w=3840&q=75)
Contents
DOM 나타내기 프로젝트를 앞둔 나, 작업 효율성을 높이기 위해 순수 바닐라 자바스크립트 (Vanilla JavaScript) 로 할지, 제이쿼리(jQuery) 로 할지 둘 다 사용해보면서 비교해보자.
이전에 배운 내용과 이어서 실제 사이트에서의 DOM 사용 예시를 생각하면서 공부해보자. 내가 프로젝트를 하면서 실제로 적용을 해봐야하니까^^
style 로 날린건지, DOM 을 날린건지 꼭 확인해보아야 한다. (댓글 삭제의 경우, DOM 을 날린 것이다.)
댓글을 적고 등록을 누르면 댓글 박스 안에 추가 되는데,
DOM 을 넣어야 한다.
삭제 누르면 → 서버에 삭제 요청하고 DB 에 날라가고 → 잘 지워졌어~ 하고 날라오면 F5 를 누르지 않아도 바로 삭제되는게 CSR(클라이언트사이드 렌더링) 방식.
DOM 나타내기
DOM 숨기기를 해봤으니, 나타내기 기능도 해보자. 아래는 전체 코드
바닐라 자바스크립트 (Vanilla JavaScript) 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
border: 1px solid black;
padding: 10px;
}
#innerBox1 {
display: none;
}
#innerBox2 {
visibility: hidden;
}
</style>
</head>
<body>
<h1>나타내기</h1>
<button onclick="showByDisplay()">display로 나타내기</button>
<button onclick="showByVisible()">visible로 나타내기</button>
<div class="box" id="outerBox">
5. DOM 추가하기
<div class="box" id="innerBox1">
내부박스1
</div>
<div class="box" id="innerBox2">
내부박스2
</div>
</div>
<script>
function showByDisplay() {
let el = document.querySelector("#innerBox1");
el.style.display = "block"; /*끝까지 다 차지해봐*/
}
function showByVisible() {
let el = document.querySelector("#innerBox2");
el.style.visibility = "visible";
}
</script>
</body>
</html>style.display =”block” 은 CSS 의 디스플레이 속성 중 block 기능(한 줄을 다 차지)을 의미한다.
function showByDisplay() {
let el = document.querySelector("#innerBox1");
el.style.display = "block"; /*끝까지 다 차지해봐*/
}
숨기기 할 때, style.visibility = “hidden” 으로 영역만 남겨두고 사라지게 했다면,
style.visibility = "visible" 은 보이게 하는 것.
function showByVisible() {
let el = document.querySelector("#innerBox2");
el.style.visibility = "visible";
}
제이쿼리(jQuery) 사용
같은 기능을 제이쿼리로 써보자.
제이쿼리 쓸 때는, 참고 링크에서 제이쿼리 라이브러리 필수로 가져오기.
W3Schools.com → JQUERY 메뉴
W3Schools 에서 공부 할 때에는 딱 아래의 범위 만치만 봐도 된다. ^^ 그 외에는 필요할 때 가서 보고 쓰면 됨
jQuery css() 기능 중 아래는 getter 로 가져오는 예시이고,
지금은 나타내기의 기능이 필요하니 아래의 Set 기능을 써먹자.
제이쿼리 라이브러리를 사용하면 만들어진 CSS 기능이 있기 때문에, 더 간단한 코드로 표현이 가능하다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script>
function showByDisplay() {
// /*바닐라 자바스크립트 순수*/
// let el = document.querySelector("#innerBox1");
// el.style.display = "block"; /*끝까지 다 차지해봐*/
$("#innerBox1").css("display", "block");
}
function showByVisible() {
// let el = document.querySelector("#innerBox2");
// el.style.visibility = "visible";
$("#innerBox2").css("visibility", "visible");
}
</script>Fade 라는 서서히 사라지게 하는 기능도 있음 ^^
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
border: 1px solid black;
padding: 10px;
}
#innerBox1 {
display: none;
}
#innerBox2 {
visibility: hidden;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>나타내기</h1>
<button onclick="showByDisplay()">display로 나타내기</button>
<button onclick="showByVisible()">visible로 나타내기</button>
<div class="box" id="outerBox">
5. DOM 추가하기
<div class="box" id="innerBox1">
내부박스1
</div>
<div class="box" id="innerBox2">
내부박스2
</div>
</div>
<script>
function showByDisplay() {
// /*바닐라 자바스크립트 순수*/
// let el = document.querySelector("#innerBox1");
// el.style.display = "block"; /*끝까지 다 차지해봐*/
$("#innerBox1").css("display", "block");
// $("#innerBox1").fadeIn;
}
function showByVisible() {
// let el = document.querySelector("#innerBox2");
// el.style.visibility = "visible";
// console.log(el.style);
// el.style.border = "1px solid red"; /*뿌리가 궁금하면 콘솔로 확인*/
$("#innerBox2").css("visibility", "visible");
}
</script>
</body>
</html>Share article