JavaScript를 사용하여 div의 텍스트 변경

1. innerHTML 속성을 사용하여 div 텍스트 변경
2. textContent 노드 속성을 사용하여 Div의 내용 변경
3. 내부 HTML 대 textcontent 보안 측면
4. :after 의사 요소를 사용하여 div 텍스트 변경

div 요소는 본질적으로 비대화형입니다. Javascript는 대화형으로 만들어 생명을 불어넣습니다. div로 표시되는 텍스트의 단어를 바꿔야 할 수도 있습니다. 예를 들어, 편집 기능을 구현하는 동안 추가 기능을 개발하기 위해 설계된 화면을 재사용할 수 있습니다. 문구만 변경하면 됩니다. 추가 기능에 관해서는 버튼의 Add 키워드를 업데이트 등으로 바꿔야 할 수도 있습니다. div의 텍스트를 동적으로 변경할 수 있는 몇 가지 방법을 살펴보겠습니다.

innerHTML 속성을 사용하여 div 텍스트 변경

다른 프로그래밍 언어와 달리 getter 및 setter 메서드를 사용하여 텍스트를 HTML 요소로 설정하지 않습니다. div의 HTML 요소 개체에는 innerHTML이라는 속성이 있습니다. HTML 개체의 내용을 가져오고 설정하는 데 사용할 수 있습니다. 여기에서 HTML 개체가 활성화됩니다. 즉, 새로 고침 시 브라우저의 요소 속성에 대한 변경 사항을 반영합니다.

다음은 innerHTML을 사용하는 구문입니다.

var text = htmlElement.innerHTML;
htmlElement.innerHTML = 'New Text';

위의 코드 조각에서 htmlElement.innerHTML을 사용하여 HTML div 요소의 내용을 가져옵니다. 여기에서 htmlElement는 실제 HTML 객체입니다. 마찬가지로 요소의 innerHTML이라는 동일한 속성을 사용하여 컨텐츠를 div로 설정할 수 있습니다. innerHTML에 텍스트 내용을 할당하기만 하면 됩니다.

• 용법:

<div id="div-element">Hey there!!</div>

window.onload = function() {
  document.getElementById('div-element').innerHTML = 'Hello World!!';
  console.log(document.getElementById('div-element').innerHTML);
  var el = document.getElementById('div-element');
  el.textContent = 'Hello bunny!!';
  console.log(document.getElementById('div-element').innerHTML);
}

출력:

Hello World!!
Hello bunny!!

.innerHTML을 적용하기 전에 HTML 요소를 선택해야 합니다. 다양한 방법으로 할 수 있습니다. Javascript에는 DOM에서 요소를 쿼리하는 데 사용할 수 있는 많은 기능이 있습니다. 다음은 가장 일반적으로 사용되는 몇 가지 방법입니다.

• getElementById(): document 인터페이스의 이 기능은 HTML에 지정된 id를 사용하여 DOM에서 요소를 선택하는 데 사용됩니다. 이 함수는 선택한 요소에 해당하는 HTML 개체를 반환합니다.
• getElementsByClassName: getElementsByClassName 기능을 사용하여 css 클래스 이름을 기반으로 요소를 쿼리할 수 있습니다. 이 javascript 메소드는 둘 이상의 요소를 HTML 객체의 배열로 반환합니다.
• getElementsByName: name 속성이 있는 요소를 선택하는 다른 방법이 있습니다. HTML에서 노드의 이름 속성을 지정합니다. 이 메서드는 HTML 객체의 배열을 반환합니다. 특히 특정 스타일, CSS 클래스를 가진 여러 요소를 선택하고 한 번에 모든 요소에 작용하는 데 관심이 있는 경우 사용할 수 있습니다.
• getElementsByTagName: getElementsByTagName() 함수를 사용하여 HTML 태그를 기반으로 요소를 선택할 수도 있습니다. 예를 들어, DOM 등의 섹션에 있는 모든 div 요소에 대해 일부 작업을 수행할 수 있습니다. 이름에서 알 수 있듯이 이 함수는 HTML 객체의 배열을 반환합니다.
• querySelector: Javascript querySelector 기능은 좀 더 일반적이며 css 쿼리로 HTML 요소를 선택하는 데 사용할 수 있습니다. 이 함수는 매개변수에 전달된 조건을 충족하는 첫 번째 요소를 반환합니다.
• querySelectorAll: 이것은 querySelector와 유사하지만 매개변수로 전달된 css 쿼리 형식을 충족하는 둘 이상의 요소를 반환한다는 유일한 차이점이 있습니다.

textContent 노드 속성을 사용하여 Div의 내용 변경

innerHTML을 자주 사용하지만 사용하는 데에는 보안 위험이 있습니다. innerHTML이 HTML 요소의 내용을 대체하는 방법과 관련이 있습니다. innerHTML 속성은 한 번에 모든 하위 HTML 노드를 제거하고 할당된 대로 새 콘텐츠를 추가합니다.

보안 위험은 innerHTML 속성을 통해 유해한 코드라도 HTML 코드의 모든 부분을 삽입할 수 있기 때문에 발생합니다. 다음 섹션에서 이 부분에 대해 논의할 것입니다. MDN은 요소의 텍스트를 변경하기 위해 node.textContent를 사용할 것을 권장합니다. HTML 내부의 자식 노드를 textContent 매개변수에 할당한 text로 바꿉니다. 사용법을 이해하려면 다음 코드를 참조하십시오.

<div id="div-element">Hey there!!</div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.textContent = 'Hello bunny!!'
}

출력:

Hello bunny!!

여기에서 텍스트를 변경하기 전에 HTML 요소 div를 선택합니다. getElementById() 함수를 사용하여 DOM에서 요소를 쿼리합니다. 그런 다음 textContent를 사용하여 div의 텍스트를 변경합니다. 이 변경 사항은 화면이 로드될 때 구분되지 않습니다. 브라우저가 웹페이지를 로드하는 즉시 window.onload 함수가 실행되고 텍스트 변경이 발생합니다. 따라서 최종 사용자는 항상 최신 텍스트를 보게 됩니다. 이전 텍스트를 새 텍스트로 변경하는 것은 화면 로드 시 명확하지 않습니다. 또한 setTimeOut 메소드 내부의 textContent를 사용하여 변경 사항을 확인할 수도 있습니다.

내부 HTML 대 textcontent 보안 측면

innerHTML 속성은 textContent와 다릅니다. 두 속성 모두 text를 입력으로 사용하지만 여기서 보안 취약점은 무엇입니까? innerHTML에는 악성 코드를 추가할 수 있습니다. 다음 코드 스니펫을 참조하세요. 여기에서 변경 사항이 반영되고 innerHTML 코드가 실행됩니다. 다음 코드 스니펫과 같이 연한 녹색 HTML div 요소를 클릭하면 원하지 않는 alert가 화면에 팝업됩니다.

<div id="div-element"></div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.innerHTML =
      `<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}

div 요소에 대해 textContent에 동일한 내용을 할당하면 HTML 요소로 렌더링되지 않습니다. Javascript는 콘텐츠를 화면에 텍스트로 렌더링합니다. 따라서 말 그대로 <div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">가 웹페이지에 텍스트로 표시되는 것을 볼 수 있습니다. 이 측면은 코드를 보다 안전하고 안정적으로 만듭니다. 따라서 HTML 요소의 텍스트를 변경하려는 경우 Javascript 모범 사례(MDN에서 지원)는 innerHTML 속성 대신 textContent를 사용할 것을 권장합니다.

<div id="div-element"></div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.textContent =
      `<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}

:after 의사 요소를 사용하여 div 텍스트 변경

텍스트 변경이 사소한 경우 CSS를 사용하여 div 텍스트를 변경할 수 있습니다. :after 의사 HTML 요소를 사용하여 content 속성에 표시하려는 텍스트를 추가합니다. 브라우저가 콘텐츠를 로드된 이미지로 바꾸는 <img>와 같은 HTML 요소에는 적용되지 않습니다. 다음 코드는 사용법을 자세히 설명합니다.

<div class="pvw-title"><span>Facts</span></div>

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}