utterances-bot commented 3 years ago

DOM API | 재미있는 기억만 남기자

https://eyabc.github.io/Doc/dev/core-javascript/Browser_DOM_API.html

khw970421 commented 3 years ago

잘읽었습니다. 그중에서 첫번째로 innerHTML += 은 추가가 아니라 내용을 덮어씀 이부분에 대해서 저는

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

</head>
<body>
  <p id="main">스터디 소개 페이지 <span>환영합니다.</span></p>
</body>
<script>
let test = document.getElementById('main');
test.innerHTML+='hello';
</script>
</html>

이런것을 실행해보면서 결과가 스터디 소개 페이지 환영합니다.hello 이렇게뜨는데 innerHTML+=는 기본 내용을 토대로 추가로 나타나는것이 아닌가요???

khw970421 commented 3 years ago

두번째로 createAttribute에 대해서 처음알게 되었는데 이를 MDN의 예시를 보면서 하는데

<!DOCTYPE html>
<html>
<head>
<style>
.democlass {
  color: red;
}
</style>
</head>
<body>

<h1>Hello World</h1>

<p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var h1 = document.getElementsByTagName("H1")[0];
  var att = document.createAttribute("class");
  att.value = "democlass";
  h1.setAttributeNode(att);
}
</script>

</body>
</html>

클릭시 빨갛게 바뀌는 이 createAttribute를

<!DOCTYPE html>
<html>
<head>
<style>
.democlass {
  color: red;
}
</style>
</head>
<body>

<h1>Hello World</h1>

<p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var h1 = document.getElementsByTagName("H1")[0];

  h1.setAttribute('class','democlass');
}
</script>

</body>
</html>

setAttribute를 이용하면 한문장으로 같은 결과를 내는 것으로 판단되는데 createAttribute의 필요성 혹은 쓰임새에 대해 많이 사용하는 편일까에 대한 궁금증을 남깁니다.

pul8219 commented 3 years ago

잘 읽었습니다. 다음과 같은 내용들을 알아갑니다.

속성과 프로퍼티의 맥락 차이
DOM 객체 탐색시 반환되는 데이터 타입(element, nodeList)
let elements = document.querySelectorAll('ul > li:last-child'); 의 last-child
elem.querySelector(css) -> elem.querySelectorAll(css)[0] 과 동일 하지만 모든 요소를 검색하지 않는 다는 점에서 빠르다.
querySelector 가 더 편리하고 문법도 짧기 때문에, getElementsBy* 는 현재 잘 쓰이지 않음
getElementBy* 사용시 문서에 변경이 있을 때마다 컬렉션이 자동 갱신되어 최신 상태의 컬렉션이 반환됨(정적인 컬렉션을 반환하는 querySelectorAll과의 차이)

질문

document.getElementById(id) 부분에서 브라우저는 스크립트의 네임스페이스와 DOM의 네임스페이스를 공유한다.라고 되어있는데

<div id="elem"></div>

<script>
  let elem = 5; // elem은 더이상 <div id="elem">를 참조하지 않고 5가 됩니다.

  alert(elem);

그럼 위의 예제에서 div태그에 'elem'이라는 id로는 아예 접근이 불가한건가요?

eyabc commented 3 years ago

이런것을 실행해보면서 결과가 스터디 소개 페이지 환영합니다.hello 이렇게뜨는데
innerHTML+=는 기본 내용을 토대로 추가로 나타나는것이 아닌가요???
...
 innerHTML += 은 추가가 아니라 내용을 덮어씀

기존에 innerHTML + 새로운 내용 을 다시 innerHTML 에 넣어 dom 을 다시 렌더링 합니다.

스터디 소개 페이지 환영합니다.

let test = document.getElementById('main');

여기까지 test 의 innerHTML 은 스터디 소개 페이지 환영합니다. 입니다. test.innerHTML+='hello'; 이것을 하면 innerHTML 에 끝 부분에 hello 를 추가하는 것이 아니라 innerHTML 의 내용을 통째로 "스터디 소개 페이지 환영합니다.hello" 으로 대체 해버린다. 즉 덮어쓴다는 표현을 하는 것입니다.

eyabc commented 3 years ago

저는 createAttribute 와 setAttribute 를 이번에 처음 봐서 한번도 사용해 본적은 없었습니다! 그래서 언젠가 필요할 때가 오면 그 때 이 메서드를 떠올리고 사용을 하기 위해 더 찾아보면 될 것 같습니다.

형욱님의 질문에 대해서는

  var h1 = document.getElementsByTagName("H1")[0];
  var att = document.createAttribute("class");
  att.value = "democlass";
  h1.setAttributeNode(att);

새로만든 속성 att 을 h1 뿐만 아니라 다른 DOM 에서도 속성을 재활용할 때 유용할 것 같습니다!

vanilia script 로 코딩하면서 만약 쓰게 된다면 꼭 알려드리겠습니다!

별로 주의깊게 본 부분이 아닌데 형욱님 덕분에 생각을 더 깊게 해보게 되었습니다!

eyabc commented 3 years ago

그럼 위의 예제에서 div태그에 'elem'이라는 id로는 아예 접근이 불가한건가요?

`document.querySelector('#elem') 을 사용하면 됩니다!

eyabc / blog-comment

https://eyabc.github.io/Doc/dev/core-javascript/Browser_DOM_API.html #20

DOM API | 재미있는 기억만 남기자

질문