[TIL]21.04.26

DOM(Document Object Model)
:Html 요소를 객체(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다.

DOM으로 HTML 요소들을 CRUD(Create, Read, Update, Delete)

Create
:

let divMaker = document.createElement('div');
// <div></div>
divMaker.textContent = "Hello world";
// <div>Hello world</div>

document.body.append(dirMaker);
// body태그안에 dirMakr가 가진 요소가 들어감

Read
:

const queryOneTweet = document.querySelector('#container');
// html안에서 id값이 container인 태그의 정보를 변수에 할당

const getOneTweet = document.getElementById('container');
// html안에서 id값이 container인 태그의 정보를 변수에 할당

console.log(getOneTweet === queryOneTweet) // true

Updata
:

textContent, classList.add

const container = querySelector('#container');
let oneDiv = document.createElement('div');
oneDiv.textContent = 'dev';	// <div>dev</div>
oneDiv.classList.add('tweet');
container.append(oneDiv);

// <div class="tweet">dev</div>가 html안에 id값이 container인 태그에(querySelector) 들어감(append)

id추가하는 법..
1) oneDiv.id = '원하는 id값';
2) oneDiv.setAttribute("id 혹은 class입력", "원하는 id나 class값 입력");

Delete
:
remove, removeChild

oneDiv.remove()
// 이전 Updata에서 oneDiv에는

가 html안에 id값이 container인 태그에 들어가있는 상태였다.
remove 메소드를 사용하면서 그 태그와 클래스, 안의 text까지 모두 제거된다.

removeChild()
지정된 자식 노드를 문서 트리에서 제거한다
let list = document.getElementById("myList");
list.removeChild(list.childNodes[0]);
// 다음과 같이 removeChild()는 부모태그를 조회해와서 자식태그를 제거하는 메소드다.

변수이름.classList.remove("제거하고싶은 클래스 값")도 가능하다.

이벤트
:
태그정보가지고있는 변수이름.onkeup = function(){
onkeyup일때 구현하고싶은 기능 코드 로직
}

외에도 onclick, EventTarget.addEventListener() 등등 자신이 원하는 이벤트를 검색해서 사용할 줄 알아야한다.

또한 class 이름이 hide가 들어가고, css에..

.hide {
	display: none;
}

을 한다면 hide를 가진 클래스의 정보가 html 문서에서 안보인다. 그리고 js와 dom을 통해서 그 hide를 classList.add("hide")나 classList.remove("hide")로 제거하거나 추가한다면 자신이 원하는 동적인 기능구현을 할 수 있을 것이다...

.
.
.
.
.
.
.

유효성검사
: 원하는 조건에 맞게 사용자가 정보를 입력할 수 있도록 코드를 구성했는 가의 대한 검사

깃허브링크
https://github.com/bejeju/im-sprint-validation-check