2023. 10. 26. 22:58ㆍ카테고리 없음
document.getElementById("아이디명").innerHTML = " 안녕"
// HTML에 해당 아이디명에 해당하는 부분을 지목해서 이너에이치엠엘로 해당부분에 "안녕"
//이라는 텍스트를 집어넣는다.
document.querySelector(" ").children[ ]
// 따옴표안에는 태그명이면 그냥 적고 클래스명이면 온점찍고 적고 아이디명이면
//#찍고 적으면 됨ㅋ
//칠드런은 선택한 태그의 자식태그로 이동시킨다. []안에는 자식노드의 순서(?) 쓰면됨
getElementsByTagName(" 태그명 ")
//해당태그가 여러개면 여러개가 선택됨
문서객체생성과선택
document.createElement(tagName) : //
// 테그네임에 div span a 같은것을 따옴표 넣고 넣으면 해당 요소를 생성함 근데 생성한걸
//let 같은걸로 선언 할당해서 그걸 붙이는 것까지 해야함
document.getElementById(id) : id 속성을 기준으로 요소를 선택합니다.
// 안에 태그아이디명 적으면 그 태그를 지목해놓음 샵 필요없음
document.getElementsByTagName(name) : 태그 이름을 기준으로 요소를 선택합니다.
//태그이름 선택하면 됨 근데 동일 태그가 여러개면 여러개 지정됨
document.getElementsByClassName(name) : 클래스 이름을 기준으로 요소를 선택합니다.
//태그에 클래스명 온점없이 적으면 되는듯? 근데 이것도 여러개선택되나봄
document.querySelector(selector) : CSS 선택자를 이용하여 요소를 선택합니다.
//특정태그를 선택할때 가장 많이 쓴다고 함 ".클래스명" "#아이디명" "태그명" 하던지 하면됨
//해당태그가 여러개면 오류날라나?
document.querySelectorAll(selector) : CSS 선택자를 이용하여 모든 요소를 선택합니다.
//이건 위에것의 복수버전 여러개 정해진다고함. 그중에 하나 선택할라면 저뒤에 []넣고 해당 요소
//순번 적으면 됨
문서 객체 조작
element.innerHTML : 해당 요소 내부의 HTML 코드를 변경합니다.
// 위에 문서선택할거에 식별자(변수)선언할당한고 요기 엘레멘트 부분에 해당 식별자 적고
// element.innerHTML = 어쩌고 저쩌고
//하면 어쩌고 저쩌고가 적용됨
element.textContent : 해당 요소 내부의 텍스트를 변경합니다.
//이건 텍스트만 변함 기존 텍스트 날아간당. 텍스트컨텐트대신 이너텍스트하도 같은기능인듯?
element.setAttribute(attr, value) : 해당 요소의 속성 값을 변경합니다.
//요거 attr부분에 스타일이라고 하고 value 부분에 뭐 칼라 레드로 하면 해당 엘레멘트의 특성이 바뀜
element.getAttribute(attr) : 해당 요소의 속성 값을 가져옵니다.
//속성가져오나봄 ㅋ
element.style.property : 해당 요소의 스타일 값을 변경합니다.
//요것도 스타일 바꾸는건데 프로퍼티 부분에 백그라운드칼라로 바꾸고 = red 하면 배경색이 red됨
element.appendChild(child) : 해당 요소의 하위 요소로 child를 추가합니다.
//선택한부분에 하위태그? 하위노드? 가 한개 생김 근데 하위태그들 맨뒤에 생기는건가?
//이거 쓸일이 있음? 그냥 HTML 가서 직접 만들면 되지않나?
element.removeChild(child) : 해당 요소의 하위 요소 중 child를 삭제합니다.
//차일드 태그중 하나 삭제한다고함 근데 이거 쓸일이 있나? 그냥 가서 지우면 되지않나?
element.classList.add(class) : 해당 요소의 클래스에 새로운 클래스를 추가합니다.
//이 클래스 리스트라는게 뭔가 심오한건데 아직 정확히 먼지 모르겠당
element.classList.remove(class) : 해당 요소의 클래스 중에서 특정 클래스를 제거합니다.
element.classList.toggle(class) : 해당 요소의 클래스 중에서 특정 클래스를 추가 또는 제거합니다.
이벤트 처리
//이거 다크모드설정할때 썼는데 어떤 원리인겨
element.addEventListener(type, listener) : 해당 요소에서 이벤트가 발생했을 때 호출할 함수를 등록합니다.
//이건 써봤는데 타임에 "click"넣고 리스너에 함수 넣으면 엘레멘트에 해당 이벤트(클릭)이
//발생하면 함수가 작동함
element.removeEventListener(type, listener) : 해당 요소에서 등록된 함수를 제거합니다.
// 이건 왜쓸까? 이유가 있겠지
event.preventDefault() : 이벤트가 발생했을 때 기본 동작을 취소합니다.
//아 이게 새로고침을 막을수 있는 그건가 보다. 나는 다른방법으로 했었는데
//안 알랴줌
event.stopPropagation() : 이벤트의 버블링을 방지하기 위해 이벤트 전파를 중지합니다.
기타
// 류제천 튜터님이 하위요소에서 상위요소로 전파되나가는걸 버블링이라고 했던거 같은데
//그걸 중지하는건가봄 그영상 다시봐야겠다.
window.location.href : 현재 페이지의 URL을 가져옵니다.
window.alert(message) : 경고 메시지를 출력합니다.
window.confirm(message) : 확인 메시지를 출력하고 사용자의 답변에 따라 Boolean 값을 반환합니다.
//요거 세개는 내일 써봐야징 // 까먹으면 말고