원치않는 #text 노드 해결

 

 당신이 만약,

element.firstChild

를 사용하다 #text 노드를 없애고 싶어 검색 후 이 블로그에 들어왔다면,

잘 들어온 것이다ㅏㅏㅏ

 

 거두절미하고, 해결법부터 말하자면,

firstChild 대신에,

firstElementChild 를 사용해주면 된다!

 

** but

Internet Explorer 9 이전 버전이슈가 있다고 하니 생각하고 사용하자ㅏㅏㅏ **

 

firstChild 함수가

우리가 원하는 요소의 첫번째 자식요소를 반환하는 대신에,

#text = null; 을 계속 반환했던 이유는

우리가 선택자로 잡아준 태그들 사이사이에 공백이 있었기때문이다ㅏㅏㅏ

 

때문에 다른 해결 방법으로는,

태그들 사이의 공백을 모두 없애고,

( 물리적으로 하나하나 지우기  or  js로 일괄 없애기 ) -> 해당방법은 아래의 출처에서 확인할 수 있다ㅏㅏ

<div class="부모"><p class="자식"></p></div>

그 상태에서 firstChild 함수를 사용해주면 된다

( 하지만 무지 귀찮고, 번거로운 작업이니 다른 해결방법을 쓰쟈.. )

 

https://developer.mozilla.org/ko/docs/Web/API/Node/firstChild#notes

element.firstChild - Web API | MDN

 

https://mohwaproject.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EA%B3%B5%EB%B0%B1-%EB%B2%84%EA%B7%B8-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

자바스크립트로 공백 버그 해결하기

 

https://runebook.dev/ko/docs/dom/node/firstchild

DOM - Node.firstChild - Node.firstChild 는 읽기 전용 속성 트리에서 반환 노드의 첫 번째 자식을, 또는 null