快速講解JavaScript如何操作元素內(nèi)容

本篇文章給大家快速講解JavaScript是如何操作元素的內(nèi)容，很簡單，希望對(duì)需要的朋友有所幫助！

規(guī)律：從當(dāng)前元素中獲取到的都是字符串

原則：給值就是設(shè)置，不給值就是獲取

分為3類：

1，操作表單元素內(nèi)容

設(shè)置： 表單元素.value=值；

獲取： 表單元素.value;

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

2, 操作普通閉合標(biāo)簽內(nèi)容 innerText/innerHTML

設(shè)置：元素.innerText=值；

元素.innerHTML=值；

獲取：元素.innerText

元素.innerHTML

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

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

設(shè)置：元素.id=值；

獲取：元素.id;

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