JavaScript怎么操作元素內容

這篇文章主要介紹了JavaScript怎么操作元素內容的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript怎么操作元素內容文章都會有所收獲，下面我們一起來看看吧。

規律：從當前元素中獲取到的都是字符串

原則：給值就是設置，不給值就是獲取

分為3類：

1，操作表單元素內容

設置：  表單元素.value=值；

獲取：  表單元素.value;

  <input type="text" id="text1" value=""> 
  <script>
    //   給值就是設置，不給值就是獲取
    //   操作表單元素
      var text1=document.getElementById('text1');
    //   設置
      text1.value="123"
    //   獲取
    console.log(text1.value);

2, 操作普通閉合標簽內容  innerText/innerHTML

設置：元素.innerText=值；

元素.innerHTML=值；

獲取：元素.innerText

元素.innerHTML

<div id="box">哈哈哈哈</div>
    <h3 id="box1">aaaaa </h3>
  <script>
    //   給值就是設置，不給值就是獲取
     //操作普通閉合標簽內容   innerText/innerHTML
     var box = document.getElementById('box');
    // 設置
    box.innerText="嘿嘿嘿";
    // 獲取
    console.log(box.innerText);
 
    var box1 = document.getElementById('box1');
    box1.innerHTML='bbbbbbb';
    console.log(box1.innerHTML)
  </script>

3.操作元素天生自帶屬性

設置：元素.id=值；

獲取：元素.id;

 <div id="box2">1111 </div>
  <script>
    //   給值就是設置，不給值就是獲取
     // 操作元素天生自帶屬性
     var box2 = document.getElementById('box2');
    box2.id="box22"
    console.log(box2.id)
  </script>

關于“JavaScript怎么操作元素內容”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript怎么操作元素內容”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。