TOC
- Node.textContent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="wrap">
<div class="c-1">
Hello
<div class="c-1-1">Welcome</div>
<div class="c-1-2">to my</div>
</div>
<div class="c-2">
Home.
<div class="c-2-1">
I
<div class="c-2-1-1">am</div>
</div>
</div>
<div class="c-3">
Happy
<div class="c-3-1">Today.</div>
</div>
<div class="c-4">
Thanks
<div class="c-4-1">Guys!</div>
</div>
</div>
<script src="./eventDelegation.js"></script>
</body>
</html>위 html에서 js를 이용해 Home. I am Happy Today를 출력해보자.
단 js 함수는 아래 형식을 지킨다.
printStr('.c-2','.c-3'); // Home, I am Happy Todayjs를 이용해 node에 접근해 각 text를 가져오는 것이 문제인 것 같다.
그렇다면 주어진 인자가 CSS 선택자이므로 querySelector을 사용하여 node에 접근하고,
textContent를 사용하면 선택한 node와 node 하위 noded 내부의 innerText를 return 해준다.
const printStr = (from, to) => {
const fromDOM = document.querySelector(from).textContent;
const toDOM = document.querySelector(to).textContent;
console.log('from', fromDOM);
console.log('to', toDOM);
};
printStr('.c-2', '.c-3');
이제 이를 후처리하면 되는게 아닐까 생각해본다
이 블로그의 글은 제 생각을 정리한 글과 인터넷 어딘가에서 배운 것을 정리한 글입니다. 출처는 되도록 남기도록 하겠습니다. 수정 및 건의 오류 등이 있으면 언제든지 댓글 부탁드립니다.