• 技术文章 >web前端 >js教程

    快速讲解JavaScript如何操作元素内容

    藏色散人藏色散人2022-08-06 10:12:24转载157

    本篇文章给大家快速讲解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>

    相关推荐:【JavaScript视频教程

    以上就是快速讲解JavaScript如何操作元素内容的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:javascript
    上一篇:详解JavaScript如何操作元素属性,样式和类名 下一篇:详解JavaScript实现全选和反选的功能(附代码示例)
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• javaScript归纳总结之Dom获取集合元素对象• JavaScript怎么通过querySelectorAll()方法查找html元素• JavaScript HTML DOM导航(总结分享)• 详解JavaScript如何操作元素属性,样式和类名
    1/1

    PHP中文网