index.html
<body>
<form class="hidden" id="login-form">
<input type="text" maxlength="4" placeholder="What is your name?" required/>
<button>Log in</button>
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="app.js"></script>
</body>App.js
const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form Button");
const HIDDEN_CLASSNAME = "hidden"
const USERNAME_KEY = "username"
function onLoginSubmit(event){
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username)
paintGreeting(username);
}style.css
.hidden {
display: none;
} 간단한 로그인 기능을 구현하던 도중 의문이 들었다. 초보 of 초보자인 내 생각으로는 저 form이 사라지게 된되면 value값을 읽어올 수 있을까 하는 생각이 들었고 그래서 display: none이 DOM에서 작동되어지는 방식을 찾아보게 되었다.
하지만 본격적으로 작동방식을 찾아보기 전에 DOM에 대해 알고 있어야 했다.
DOM / CSSOM
- 웹브라우저가 HTML문서를 읽어들이면 Document 객체로 시작하는 DOM (Document Object Model)트리가 만들어지며, 이 트리를 구성하고 있는 객체 하나를 노드(Node)라고 부른다.
- 위에 DOM처럼 CSS의 내용을 파싱하여 자료를 구조화한것을 CSSOM(CSS Object Model)트리라고 한다.
Render Tree
- DOM 트리와 CSSOM 트리 두가지를 결합하여 브라우저에 표시될 요소들만 Render 트리에 선별해서 표시한다.
이렇게 Render Tree가 생성 될 때,
-
display: none은 화면상 어떠한 공간도 차지하지 않기 때문에 Render Tree에 포함되지 않아서 브라우저상(사용자 눈)에는 보이지 않는다. -
하지만 DOM Tree에서는 사라지지 않기 때문에!
display: none으로 사라진 loginform은 DOM Tree에 그대로 남아있게 되므로 form안에 value값도 DOM에 여전히 존재하고 있는 것이다.
const loginForm = document.querySelector("#login-form")추가로 !
visibility: hidden과의 차이도 알게 되었다.
visibility: hidden
마찬가지로 사용자의 눈에 보이지 않는 것은 동일하다.
하지만, display: none와는 달리 visibility: hidden은 공간을 차지하고 있기 때문에 Render Tree에 포함된다는 것이 차이점이다.
참고한 사이트:
https://medium.com/the-crazy-coder/display-none-and-dom-e049b69164cb
프론트엔드 _ 👊