[javaScript/공부] 어떻게 연결해줄까?

html, css, javascript 연결하기

 

 

---

       HTML → CSS 

html에서 써준 코드를 css에서 꾸며주기 위해 필요한 선택자

*	모든 태그를 선택
tag
#id
.class

li a	li 안에 있는 a
li + a	li 바로 뒤에 오는 a (같은 계층)
li > a	한 계층 아래 a
input [type=""]	속성 선택
li.class	같은 요소의 클라스들

:hover
:active
:checked	input[type="radio"]:checked
:nth-of-type(n)	n번째 요소에 적용(반복)

:last-child
:nth-child
:nth-last-child

::first-letter
::first-line
::selection	드래그 했을 때

 

 

---

       HTML → JavaScript 

다음은 자바로 연결하는 방법인데,

우선 다음 메소드로 먼저 요소를 가져오거나 새로운 요소를 만들어준다.

document.getElementById("id")
document.getElementsByTagName("tag")
document.getElementsByclassName("class")
document.querySelector("")	tag / #id / .class
document.querySelectorAll("")
document.createElement("tag")	새로운 요소 만들기

 

계층 이동 메소드

.parentElement	상위 계층
.children	하위 계층 배열
.children[index]	index번째 하위 계층
.nextSibling
.previousSibling
.nextElementSibling	다음 요소
.previousElementSibling	전 요소

 

가져온 요소를 활용할 수 있는 기본 메소드

.innerHTML	element.innerHTML="<tag>contents</tag>"
.style.property	element.style.color="red"
.classList.add("class")
.classList.remove("class")
.addEventListener("event",callback)	.addEventListener("click",f(x))

 

 

---

공부를 하면 할수록 너무 써먹고싶었는데 드디어 연결할 수 있는 것들을 배워서 기분이 좋다.

응용해봐야지~!