快速講解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>     <h2 id="box1">aaaaa </h2>   <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>