DOM요소에 DOM요소를 연결하기

요번 글에선 DOM요소를 DOM요소에 이어 붙이는 것을 설명하려 합니다.

일단 제가 옷을 살 때 자주 사용하는 웹페이지에 들어가봅시다.

 

무신사스토어 : https://store.musinsa.com/app/?gclid=Cj0KCQiA4NTxBRDxARIsAHyp6gDF6UTxQmna2A77XMA9JeSNZtczLL7Xaev-bSWiaxPChywmTTXoclAaApHOEALw_wcB

무신사 스토어

 

 

 

 

여기서 스크롤을 밑으로 내려가보면 이렇게 스페셜 쇼케이스에 관한 문단이 나올 것입니다.

 

 

 

 

제가 요번 글에서 하고자 하는 건 DOM요소를 사용해서 이 스페셜 기간이 끝났다는걸 사진 속에 있는 "단독 상품" 글 밑에다 표시해주고 싶습니다.

★오늘의 목표★

 

일단 이벤트 기간이 끝났다라는 <p>태그인 요소를 새롭게 만들어야 합니다.

var newP = document.createElement("p")

이 코드의 뜻은 "p"태그의 요소를 새롭게 만들고 그것을 변수 newP에 저장하라는 뜻입니다.

요번엔 "이벤트 기간이 만료되었습니다" 라는 텍스트 요소도 추가해야합니다.

 

 

 

 

var newText = document.createTextNode("이벤트 기간이 만료되었습니다.")

이렇게 되면 텍스트 요소를 추가하게 된 것입니다. 

이젠 이 텍스트 요소와 방금 만든 <p>태그 요소를 연결시켜야 합니다.

 

 

 

 

newP.appendChild(newText)

코드를 잘보면 자녀라는 뜻인 Child가 들어가 있습니다.

그렇습니다 이렇게 되면 newText 요소는 newP의 자녀요소가 되는 것입니다

즉 <p>이벤트 기간이 만료되었습니다.</p> 이 코드와 동일한 것입니다.

 

이제 아까 들어간 무신사 스토어 사이트에 들어가서 F12를 누르고 콘솔창에 들어가 방금 설명한 코드들을 전부 입력해봅시다

이렇게 입력하게 되면 아직까지는 웹페이지에는 변화가 없을 겁니다.

왜냐하면 자기가 만든 요소가 웹페이지에 연결되어지지 않았기 때문입니다.

웹페이지에 연결하기 위해서 자기가 원하는 위치를 선정해야 합니다 

ctrl+shift+c 를 눌러보고 자기가 원하는 위치에 커서를 가져다 봅시다

 

그럼 이렇게 자기가 원하는 위치에 정보가 뜨게 되고 옆에 창을 보시면

자기가 원하는 위치랑 관련이 되어있는 html코드로 바로 이동하게 됩니다.

코드를 보시면 이 문단은 div로 구역이 나눠졌고 class main_category_box를 이용하고 있습니다

이 클래스 지정자를 사용해 이 요소에 접근해봅시다

 

 

queryselector를 쓰다보니 이상한 위치로 이동하게 되었습니다.

class지정자이다보니 이 웹페이지에서 저 클래스를 사용하는 DOM요소들이 여러 개 인것입니다.

여기서 자기가 원하는 클래스 지정자가 있는 요소를 접근하려면

 

이렇게 배열을 만든 뒤 querySelectorAll(".main_category_box")를 사용해 모든 클래스지정자를 다 찾게 하는 것입니다.

이렇게 되면 배열 첫번째 요소에는 클래스 지정자를 갖고 있는 DOM요소 첫번째 요소가 들어가고

배열 두번째 요소에는 DOM 두번째 요소 이런식으로 저장이 됩니다.

이 웹페이지에선 저 클래스 지정자를 10번 사용했으므로 배열 9번째(0번부터 시작하므로)까지 저장이 된 것입니다.

우리가 원하는 위치는 배열의 인덱스 값이 2인걸 확인할 수 있습니다.

 

 

 

 

 

ary[2].appendChild(newP)

위치를 확인했으니 아까처럼 저 위치에 자녀요소를 연결시켜봅시다

그럼 이렇게 나올 것입니다. 그런데 뭔가 허전하고 눈에 잘 띄지 않습니다.

위에 있는 스페셜 글자처럼 큼직하고 굵게 하고 싶다면 ctrl+shift+c를 눌러 저 스페셜 문자에 갖다대봅시다

 

보시면 txt_tit_main 클래스를 이용하고 있습니다. 저 클래스를 제가 만든 p요소에 대입해봅시다

 

 

 

 

newP.setAttribute("class","txt_tit_main")

객체의 속성을 설정하는 함수입니다. 만약 class가 아닌 id를 적용하고 싶다면 함수 매개변수에 "id","id이름"을 누르면 됩니다.

 

 

그리고 앞에 나온 코드를 입력하면 스페셜 문구와 똑같이 자기가 만든 요소도 똑같이 변하게 된다

 

 

 

 

마지막으로 글자색만 변경하면 누가봐도 한눈에 띄게 됩니다.

 

전체코드 정리

var newP = document.createElement("p")						//<p>태그의 요소를 새롭게 만든다
var newText = document.createTextNode("이벤트 기간이 만료되었습니다.")	//텍스트 요소를 새롭게 만든다
newP.appendChild(newText)						//텍스트 요소를 <p>태그의 연결한다
var ary = document.querySelectorAll(".main_category_box")		//원하는 위치를 클래스 지정자를 이용해 찾는다														
ary[2].appendChild(newP)				//찾게 되면 그 위치와 자기가 만든 요소를 연결한다
newP.setAttribute("class","txt_tit_main")			//자기가 만든 요소에 class, id를 추가한다
newP.style.color = "red"