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 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
javascript实现倒计时提示框
Mar 02 Javascript
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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
prototype 学习笔记整理
2009/07/17 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
如何理解Python中的变量
2020/06/01 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
Python爬虫开发与项目实战
2020/12/16 Python
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
12月红领巾广播稿
2014/02/13 职场文书
监察建议书格式
2014/05/19 职场文书
2014最新离职证明范本
2014/09/12 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
门市房租房协议书
2014/12/04 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
通知的写法
2015/04/23 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
格列夫游记读书笔记
2015/07/01 职场文书