JS document文档的简单操作完整示例


Posted in Javascript onJanuary 13, 2020

本文实例讲述了JS document文档的简单操作。分享给大家供大家参考,具体如下:

<html>
    <head>
        <title>js-documnent文档结构操作</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript">
            function testFile(){
//                获取元素
                var showdiv=document.getElementById("showdiv");
//                添加属性,元素追加
                showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' value='' /><input type='button' value='删除' onclick='delDiv(this)'/></div>";
//                利用innerHTML或innerText进行数据的显示,用HTML可以进行执行的显示
            }
            function delDiv(btn){
//                获取元素
                var showdiv=document.getElementById("showdiv");
//                获取要删除元素的父类,因为其在一个div中,我们要删除整个div中的内容
                var cid=btn.parentNode;
//                利用父类对象移除子类对象
                showdiv.removeChild(cid);
            }
//            上面是在盒子模型的基础上的添加,然后再重新赋值,所以当用户进行了file的基本操作后由于是重新赋值而导致操作无法保存
            function testFile2(){
//                获取元素
                var showdiv=document.getElementById("showdiv2");
//                在父类对象中创建input对象
                var inp=document.createElement("input");
                inp.type="file";
//                在父类对象中创建button对象
                var btn=document.createElement("input"); //利用document对象进行在JS中创建HTML的对象
                btn.type="button";      //设置对象中的几个属性值
                btn.value="删除";
                btn.onclick=function del2(){
                    showdiv.removeChild(inp);  //利用父类对其子类对象进行移除操作
                    showdiv.removeChild(btn);
                    showdiv.removeChild(br);
                }
//                在父类对象中创建br(换行符)对象
                var br=document.createElement("br");
//                把个属性对象添加到父类div中
                showdiv.appendChild(inp);      //利用父类对象利用函数进行添加操作,调用时操作的是一个对象
                showdiv.appendChild(btn);
                showdiv.appendChild(br);
            }
            //这个上面的方法是在对象的基础上进行添加,而不是像上面的进行重新加载
        </script>
    </head>
    <body>
        <h3>js-documnent文档结构操作</h3>
        <hr />
        <input type="button" name="" id="" value="盒子形式操作文档" onclick="testFile()"/>
        <hr />
        <div id="showdiv">
        </div>
        <hr />
        <input type="button" name="" id="" value="js创建子div方法操作文档" onclick="testFile2()"/>
        <hr />
        <div id="showdiv2">
        </div>
    </body>
</html>

运行效果:

JS document文档的简单操作完整示例

文档的操作:主要是为了让用户可以上传文档;

基本内容:

增加节点, 删除节点 

方法:刷新式文本操作

使用innerHTML: div.innerHTML=div.innerHTML + "内容"     添加元素

div.innnerHTML =" "      直接进行全部清空

利用父节点.removeChild(子节点对象)       删除指定元素

方法2: 添加式文本操作

获取对象:

var obj = document.createElement(标签名);

obj.标签属性=........    对属性进行赋值,所有的属性,赋的值可以是函数等一切合法的内容

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
javascript 动态生成私有变量访问器
Dec 06 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
node thread.sleep实现示例
Jun 20 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
Vue详细的入门笔记
May 10 Vue.js
JavaScript数组排序小程序实现解析
Jan 13 #Javascript
JS document form表单元素操作完整示例
Jan 13 #Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 #Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 #Javascript
JS表格的动态操作完整示例
Jan 13 #Javascript
JavaScript实现模态对话框实例
Jan 13 #Javascript
JS动态图片的实现方法完整示例
Jan 13 #Javascript
You might like
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
JS日历 推荐
2006/12/03 Javascript
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
详解python中的模块及包导入
2019/08/30 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
文明寝室申报材料
2014/05/12 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
毕业证明模板
2015/06/19 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
安全生产会议制度
2015/08/06 职场文书
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技