[js] HTMLElement 요소 속성

HTMLElement 요소 속성

1. innerText
- innerText는 요소의 텍스트 콘텐츠를 가져오거나 설정
- HTML 태그를 무시하고 순수한 텍스트

<div id="textExample">이것은 <strong>강조된</strong> 텍스트입니다.</div>
  <button onclick="changeText()">텍스트 변경</button>

  <script>
    function changeText(){
      const element = document.getElementById('textExample');
      alert("기존 텍스트: " + element.innerText);
      element.innerText = "새로운 텍스트~"
    }
  </script>

2. innerHTML
- 요소의 HTML 콘텐츠를 가져오거나 설정
- HTML 태그를 포함한 문자열을 다룰 수 있다

<div id="htmlExample">이것은 <strong>강조된</strong> 텍스트 입니다.</div>
  <button onclick="changeHtml();">html 변경</button>

  <script>
    function changeHtml(){
      const element = document.getElementById('htmlExample');
      alert('기존 텍스트: ' + element.innerHTML)
      element.innerHTML = '<p>새로운 <em>HTML</em> 콘텐츠!</p>'
    }
  </script>

 

3. className
- className은 요소의 클래스 속성을 문자열로 가져오거나 설정(class 값을 가져오거나 변경)

 

(단일 클래스, 복수 클래스 일 때 2가지 예제)

<div id="classExample" class="normal">이것은 기본 클래스 입니다.</div>
<button onclick="toggleClass();">클래스 토글</button>

<script>
    // 단일 클래스 일 때
    function toggleClass(){
      const element = document.getElementById('classExample');
      console.log(element.className);
      if(element.className === 'normal'){
        element.className = 'highlight';
      }else{
        element.className = 'normal';
      }
    }
    
    // 복수 클래스 일 때
    function toggleClass(){
      const element = document.getElementById('classExample');
      const elements = element.classList.contains('normal');
      // 존재하면 true, 존재하지 않으면 false
      if(elements){
        element.className = 'highlight';
      }else{
        element.className = 'normal';
      }
    }
</script>

4. style
- 요소의 인라인 스타일을 설정하거나 가져온다

<div id="styleExample">스타일 예제</div>
<button onclick="changeStyle()">스타일 변경</button>

<script>
    function changeStyle(){
      const element = document.getElementById('styleExample');
      element.style.backgroundColor = 'lightgreen';
      element.style.width = '200px';
      element.style.height = '200px';
    }
</script>