오늘의 키포인트
DOM
나의 이해
DOM : Ddcument Object Moder // js에서 html의 내용을 조작하기 위한것
문법 및 중요
<script src=’myScriptFile.js’></script> // js파일 적용
js파일은 등장과 함께 실행
<script> 태그를 넣는 두가지 방법
1. <head>안쪽에 삽입
이건 <script>뒤에 나오는건 무시됨
2. <body>태그가 끝나기 전에 삽입
이게 나음 // js를 읽는 동안 html의 해석이 정지되므로 다 html이 끝나고 js 읽는게 좋음
(<script>태그를 body끝나기 직전에 넣으면 parsing(html)파일을 다 읽고 해서 버벅이는게 없는데 head에 넣으면 html읽다가 script에 들어가서 렌더링이 멈춰서
버벅임 (멈출 때 fetching과 execution을 하면서 멈춤 body끝에 넣는게 좋음))
console.dir : DOM 구조를 조회할땐 이게 나음 DOM을 객체의 모습으로 출력
document.body.children : 자식 속성 찾기
let a = document.body.children[1] // 이런식으로 변수에 할당 가능
CRUD : create, read, update, delete
Create
const tweetDiv = document.createElement('div')
Append
document.body.append(tweetDiv) : 만든 div를 body에 넣기
//append는 여러가지 자식 엘리먼트를 동시에 가능
//appendChild는 한번에 하나
Read
const container = document.querySelector('#container')
container.append(tweetDiv)
container의 마지막 자식 엘리먼트로 tweetDiv추가
DOM으로 HTML 엘리먼트의 정보를 조회하기 위해선querySelector의 첫번째 인자로 셀렉터(selector)를 전달하여 확인가능
셀렉터로는 HTML 태그(‘div’), id(#tweetList), class(.tweet)가 가장 많이 사용됨
querySelector
const oneTweet = document.querySelector.(‘.tweet’) : 클래스 이름이 tweet인 html엘리먼트 중 첫번째 엘리먼트 조회
const oneTweet = document.querySelectorAll.(‘.tweet’) : 여러 개의 엘리먼트 한번에 가져옴 배열처럼 for문 사용가능하지만 유사 배열, 배열형 객체임 (Array-like Object)
get으로 시작하는 DOM 조회 메소드도 있지만 옛날 버전
update
tweetDiv.textContent = ‘할말’; // 만든 빈 div에 글 넣기
tweetDiv.classList.add(‘tweet’) // tweet로 calss 정해주기
innerHTML : string을 parsing해 엘리먼트로 변환하여 집어넣는 속성
textContent : 엘리먼트 내 content 부분에 text만 넣어주는 메소드
ineerHTML은 해킹에 취약 속성보다는 메소드를 쓰는게 안전
delete위치를 알 때 삭제
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.
모든 자식 엘리 먼트 삭제
document.querySelector('#container').innerHTML = ''; // 또는 textContent = '' // 그런데 이렇게 자체값을 바꾸는건 보안상 문제가 있어서 메소드인 removeChild 쓰는게 나음 반복문으로 사용해서 하나하나 지우기
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
또는 직접 클래스 이름이 tweet인것들 찾아서 제거
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
} id가 world인 것 안에 aElement 삭제시
aElement.remove() // 또는
document.querySelector("#world").removeChild(aElement)
( document.querySelector("#world").remove(),
document.querySelector("#world").remove(aElement) 두 메소드는 world 엘리먼트 전부를 지우게 됩니다. )
종합
const tweetDiv = document.createElement('div') // 생성
const container = document.querySelector('#container') // 조회
container.append(tweetDiv) // container에 넣기
tweetDiv.textContent = '할말'; // 만든 빈 div에 글 넣기
tweetDiv.classList.add('tweet') // tweet로 calss 정해주기
document.createElement(‘div’) : div 생성
document.querySelector() : 조회
document.cloneNode : 복제
document.importNode : template을 활용하여 내용을 붙여넣을때
document.querySelector('div') 는 최상단 div 하나만 조회합니다.
document.getElementById('div') 는 id가 div 인 element 하나를 조회합니다.
document.querySelectorAll(‘div’) 는 div를 모두 조회
document.getElementsByTagName(‘div’) : div모두 조회
document.getElementsByClassName('div') 는 class가 div 인 element 여러 개를 조회합니다.
abc.setAttibute('속성', '속성값')
아이디가 'hi'이고 내용이 'hello'인 div 태그 만들기
let aElement = document.createElement('div')
aElement.setAttibute('id', 'hi')
aElement.textContent = 'hello' // 이 방법이 좋고
//or
let aElement = document.createElement('div')
aElement.id = 'hi'
aElement.innerHTML = 'hello' // innerHTML을 쓰는건 안좋음 HTML tag를 직접 삽입하여 실행하는 형태의 메소드는 해킹에 취약
id =’apply’인 버틀을 클릭시 글자 출력하려면
function displayAlert() {
alert('코드스테이츠에 오신 것을 환영합니다')
}
document.querySelector('#apply').onclick = displayAlert // 또는
document.querySelector('#apply').addEventListener('click', function(){
alert("코드스테이츠에 오신 것을 환영합니다")
})
html의 메시지를 안보이게 하려면 css로 조작해야하지만 js에서 가능
abc.style.display = 'none' // 이렇게하면 그 메시지가 안보이게 됨 // 다시 보이게 하려면 'none' 대신 'block'
그런데 더 좋은 방법이 있음 css를 쓰는거
css에
.hide{
display : none; // visibility: hidden 이건 영역크기는 남아있고 내용만 사라짐
]
이렇게 해준다음
html에 해당 메시지 class에 hide도 넣어줌 (띄어쓰기해서 넣으면 class이름 여러개 // class = 'a b c' 이렇게 따옴표 안에 넣어야함
그러면 현재는 메시지가 가려져있는데 js에
abc.classList.remove('hide') 이러면 보이게됨 // classList.add 하면 반대로
eventhandler : 이벤트가 발생했을때 실행되는 함수를 의미
.onkeyup = function(){ } // 키보드 누를때 발생
btn.onclick = handler; // 이벤트 속성에 이벤트 핸들러를 등록 할때는 함수 자체를 등록, 호출이아님 즉, handler에 ()생략
새로 안것
css에서 아이디 '이곳에 쓰세요' 할때 아이디 부분은 <label>로 하면 좋음 이곳에 쓰세요는 <input type='text' id='username'>
parseInt를 사용시 'd1' 은 NaN '1d'는 1이 나오지만 Number을 사용시엔 둘다 NaN이 나옴
이벤트 핸들러 할당방법 2가지
divElement.onclick=()=>{} // 일반적으로 하는거 내가한거 (예전방식)
divElement.addEvenListener(‘click’,()=>{}) // 위의 방식은 이벤트 2개하면 덮어 씌워지지만 이 방식은 중복가능
css내에
.box : disabled // 비 활성화시 적용되게끔
'코딩 공부 > 코드스테이츠 TIL' 카테고리의 다른 글
| Code States 17일차 (0) | 2021.10.29 |
|---|---|
| Code States 16일차 (0) | 2021.10.28 |
| Code States 13일차 (0) | 2021.10.26 |
| Code States 12일차 (0) | 2021.10.22 |
| Code States 11일차 (0) | 2021.10.21 |