-
[javascript] HTML 태그의 텍스트를 가져오는 2가지 방법언어/Javascript 2022. 8. 16. 02:15
1. innerText 또는 textContent
아래와 같은 HTML 태그가 있을 때
<ul> <li id="todo_1">할일 1</li> <li id="todo_2">할일 2</li> <li id="todo_3">할일 3</li> </ul>클릭한 목록 아이템의 텍스트(할일 1, 할일 2 .. )를 가져와야 할 때,
아래와 같이 innerText를 통해 해당 텍스트를 가져오거나, textContent를 이용해서 가져올 수 있다.
<body> <ul> <li id="todo_1">할일 1</li> <li id="todo_2">할일 2</li> <li id="todo_3">할일 3</li> </ul> <p id="click_todo"></p> <script> const $p = document.querySelector('#click_todo'); const onClick = (e) => { if (e.target.nodeName == 'LI') { $p.innerText = e.target.innerText; // $p.innerText = e.target.textContent; } }; const $ul = document.querySelector('ul'); $ul.addEventListener('click', onClick); </script> </body>2. firstChild의 textContent 또는 nodeValue
1번의 방법 만으로는 해결이 되지 않는 문제가 있었다.
예를 들어 li 안에 다른 태그 요소가 있고, 그 태그에도 텍스트가 있을 때이다.
<body> <ul> <li id="todo_1">할일 1<button>삭제</button></li> <li id="todo_2">할일 2<button>삭제</button></li> <li id="todo_3">할일 3<button>삭제</button></li> </ul> <p id="click_todo"></p> <script> const $p = document.querySelector('#click_todo'); const onClick = (e) => { if (e.target.nodeName == 'LI') { $p.innerText = e.target.textContent; } }; const $ul = document.querySelector('ul'); $ul.addEventListener('click', onClick); </script> </body>
위 코드와 같이 각 li에 삭제라는 텍스트를 가진 버튼이 있을 때에
각 항목을 click을 하면 왼쪽과 같이 p태그에는 '할일 2삭제'라는 텍스트가 출력된다...
각 컨텐츠 내용을 정상적으로 저장할 수 없다.
마지막 두글자를 잘라낸다던가 할 수 있지만, 좀 더 제대로 풀어나가고 싶었다.
저 버튼의 text가 바뀐다던가.. 하면 결국 또 문제가 발생하니..
해결 방법은 e.target.firstChild.textContent를 이용하는 것이다.
e.target.firstChild.nodeValue라는 프로퍼티로도 가져올 수 있다.
<body> <ul> <li id="todo_1">할일 1<button>삭제</button></li> <li id="todo_2">할일 2<button>삭제</button></li> <li id="todo_3">할일 3<button>삭제</button></li> </ul> <p id="click_todo"></p> <script> const $p = document.querySelector('#click_todo'); const onClick = (e) => { if (e.target.nodeName == 'LI') { $p.innerText = e.target.firstChild.textContent; // $p.innerText = e.target.firstChild.nodeValue; } }; const $ul = document.querySelector('ul'); $ul.addEventListener('click', onClick); </script> </body>위와 같은 방법은 어떻게 가능한 것일까?
바로 Node를 이용하기 때문이다.
아래와 같이 onClick에 콘솔을 찍어보자
const onClick = (e) => { if (e.target.nodeName == 'LI') { console.log(e.target.childNodes); console.log(e.target.children); $p.innerText = e.target.firstChild.textContent; } };childNodes는 Node의 자식요소를, children은 HTMLElement의 자식요소를 뽑아서 보여준다.
각 자식요소를 보면 결과값이 아래와 같이 다른 것을 알 수 있다.
위와 같은 특성때문에 Node의 프로퍼티인 firstChild를 사용하게 되면 text가 선택되게 되고,
text 노드에서 textContent 또는 nodeValue를 사용하여 텍스트를 뽑아낼 수 있게 되는 것이다.
참고
https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue
Node.nodeValue - Web APIs | MDN
The nodeValue property of the Node interface returns or sets the value of the current node.
developer.mozilla.org
DOM은 무엇인가? DOM Node와 Element의 차이
여행자보험의 보장명과 보장가격을 가져오기 위해 웹크롤링을 해보았다. 사실 이 과정은 그냥, html parsing해주는 라이브러리를 사용해서 html에서 내가 원하는 정보를 가져오는 것이 전부였다. 원
velog.io
'언어 > Javascript' 카테고리의 다른 글
[라이브러리] moment 자주 사용하는 기능 정리 (0) 2023.06.16 [javascript] 호이스팅에 대한 이해 (0) 2022.09.09 [Javascript] this 에 대해 알아보기 (0) 2022.07.07 [Javascript] 이벤트 루프 - 런타임 개념 (0) 2022.06.22 [Regex] 정규표현식 - 문자 클래스 (0) 2022.06.16