[Javascript] DOM control 관련 자주 사용하는 문법들

요소 좌표값 구하기, 특정 위치로 스크롤 이동시키기

window.scrollTo를 이용하여 특정 위치로 이동시키기

window.scrollTo를 이용하여 특정 위치로 이동시키기

---

textContent

textContent의 값은 식별자 노드의 내부 콘텐츠를 text/plain 으로 파싱(Parsing)한 결과. 즉, 해당 요소 내부의 원시 텍스트(raw text)이다. 파싱 속도가 빠르고 보안에 강하다.

innerText

줄바꿈, 숨김 등 적용 가능. IE(IE8 이하) 환경에서 사용 가능. 그러나 내부에 특별히 스타일 적용이 없는 문자열을 할당할 때는 textContent에 비해 성능이 떨어짐.

innerHTML

HTML Parsing이 필요한 문자열 이외에는 가급적 사용 지양. 성능 나쁨, 보안 취약.

당신이 innerHTML을 쓰면 안되는 이유

당신이 innerHTML을 쓰면 안되는 이유

---

.attr()

element가 가지는 속성값이나 정보를 조회(style, src, rowspan 등)하거나 세팅

$('#' + thick.id).attr("disabled", false);

<!-- selectbox가 실제로 활성화 되지 않음 -->
<select id="wall-indirect-thick-1" class="custom-select" onchange="onchangeCombobox(this.id)" disabled="false"></select>

.prop()

element가 가지는 실제적인 상태(활성화, 체크, 선택여부 등)를 제어

$('#' + thick.id).prop("disabled", false);

 <!-- disabled 속성이 빠지면서 selectbox가 활성화 됨 -->
 <select id="wall-indirect-thick-1" class="custom-select" onchange="onchangeCombobox(this.id)" disabled></select>

.prop(), .attr()의 차이

.prop(), .attr()의 차이

---

JS에서 replace를 java replaceAll() 처럼 사용하기

const str = "dasd sad asdsa ddasdd dd  d";
// 첫번째 공백만 제거해줌
let removeBlnakStr = str.replace(' ', '');
// 정규식 문법을 사용해 문자열 내 모든 공백을 제거해줌
let removeBlnakStr = str.replace(/ /g, '');

 

[Javascript] 모든 문자열 치환하기 (replace, replaceAll)

[Javascript] 모든 문자열 치환하기 (replace, replaceAll)