快速讲解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>