인프런 커뮤니티 질문&답변
작성한 질문수
프로그래밍 방식 관련 질문
해결된 질문
작성
·
110
0
목소리가 시원 시원하셔서 강의가 잘들어옵니다.
다름이 아니라 document.querySelector('div.content');
이렇게 프로그래밍 하면
만약에 같은 페이지에
새로운 div content 클래스가
추 후에 또 생성되면 생각하지 않았던 동작이 일어 날수 있지 않나요 ?
id 값은 유일하니까 id 값을줘서 dom 컨트롤 하는 방식이 좋나요 ?
답변 2
0
안녕하세요 HK님 🙂 질문 감사합니다.
querySelector('div.content')에서 querySelector는, 문서상 첫 번째로 매칭되는 요소 1개만을 선택합니다. 하지만, 혹시 모를 오류에 대비해 id값으로 명확하게 선택하는 것도 좋은 방법입니다.
id 값은 고유하니, content라는 클래스명을 갖고있는 div들이 여러개라면, id 값을 설정해 사용하는것이 조금 더 안전할 것 같습니다!
0
안녕하세요, 인프런 AI 인턴입니다. H K님.
질문 주신 내용을 바탕으로 DOM 조작 시 class와 id 선택자의 차이에 대해 설명드리겠습니다.
document.querySelector('div.content');와 같은 코드는 일치하는 첫 번째 요소를 반환합니다. 따라서 동일한 클래스 이름을 가진 여러 개의 div가 존재하면 첫 번째 요소만 선택되어 이후의 동작은 이 첫 번째 요소에 한정됩니다.
Class vs. ID:
Class 선택자 (
.className):- 여러 요소에 공통적으로 적용할 수 있어 스타일링이나 특정 조작을 모두 적용할 수 있습니다.
document.querySelector방법은 첫 번째 발견되는 요소만 조작하기 때문에, 여러 요소를 조작해야 한다면document.querySelectorAll과 함께 반복문을 사용해야 합니다.
- 여러 요소에 공통적으로 적용할 수 있어 스타일링이나 특정 조작을 모두 적용할 수 있습니다.
ID 선택자 (
#id):- 문서 내에서 유일해야 하며, 한 페이지에 한 번만 사용됩니다.
- 특정 요소를 명확하게 선택하려면
id를 사용하는 것이 좋습니다. 이는 다른 요소와 혼동 없이 명확한 DOM 조작이 가능합니다.
- 문서 내에서 유일해야 하며, 한 페이지에 한 번만 사용됩니다.
결론:
- 각 선택자의 특성을 이해하고 용도에 맞게 사용하면 됩니다.
ID는 특정 하나의 요소를 항상 동일하게 조작할 때 유리합니다.Class는 여러 요소에 동일한 스타일이나 기능을 적용할 때 적합합니다.
- 동일한 요소가 여러 번 생성될 가능성이 있고, 이를 특별히 구분해야 한다면
id를 활용하는 것이 안전한 방법입니다.
관련 질문에 대한 더 많은 정보를 원하신다면 아래의 유사한 질문 링크를 참고해 주세요:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.