JS document文档的简单操作完整示例
本文实例讲述了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>
运行效果：
文档的操作：主要是为了让用户可以上传文档；
基本内容：
增加节点， 删除节点
方法：刷新式文本操作
使用innerHTML: div.innerHTML=div.innerHTML + "内容" 添加元素
div.innnerHTML =" " 直接进行全部清空
利用父节点.removeChild(子节点对象) 删除指定元素
方法2： 添加式文本操作
获取对象：
var obj = document.createElement(标签名);
obj.标签属性=........ 对属性进行赋值，所有的属性，赋的值可以是函数等一切合法的内容
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法.代码如下: 复制代码 代码如下: for(var i=0;i<5;i++){ var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); document.body
-
原生js操作checkbox用document.getElementById实现
jquery与checkbox的checked属性的问题,讲的是控件<input type="checkbox"></input> 1.页面加载成功后,点击选中或取消选中该checkbox,checkbox属性里的checked属性不会根据该checkbox是否选中而变化 2.checkbox里的onchange或onclick方法里用jquery的attr方法获取checked是看得到的checked属性的值与它是否给钩上没有关系 3.使用document.g
-
JavaScript入门教程(9) Document文档对象
描述当前窗口或指定窗口对象的文档.它包含了文档从<head>到</body>的内容. 用法:document (当前窗口) 或 <窗口对象>.document (指定窗口) 属性: document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) document.linkColor //未点击过的链接颜色 document.a
-
JavaScript 节点操作 以及DOMDocument属性和方法
属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读) 3dataType 返回此节点的数据类型 4Definition 以DTD或XML模式给出的节点的定义(只读) 5Doctype 指定文档类型节点(只读) 6documentElement 返回文档的根元素(可读写) 7firstChild 返回当前节点的第一个子节点(只读) 8Implementation 返回XMLDOMImplementation对象 9lastChild 返回
-
JS document form表单元素操作完整示例
本文实例讲述了JS document form表单元素操作.分享给大家供大家参考,具体如下: <html> <head> <title>form表单操作</title> <meta charset="UTF-8"/> <script type="text/javascript"> function testForm(){ // 获取form对象 方法一,通过id,比较普遍的方法 var fm=d
-
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
获取页面中元素到文档区域document的横向.纵向坐标的两种方法及其比较 在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法: 一:通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现 在阅读javascript高级程序设计第三版DOM部分时,了解到要获取某个元素在页面上的偏移量,需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加,一直循环直至根元素
-
JavaScript——DOM操作——Window.document对象详解
一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById("id");将找到的元素放在变量中: docunment.getElementsByName("name"):根据name找,找出来的是数组: docunment.getElementsByTagName("name"):根据标签名找,找
-
JavaScript中的Document文档对象
Document文档对象是JavaScript中window和frames对象的一个属性,是显示于窗口或框架内的一个文档.描述当前窗口或指定窗口对象的文档.它包含了文档从<head>到</body>的内容. 用法:document (当前窗口) 或 <窗口对象>.document (指定窗口) 属性: document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fg
-
JavaScript基础语法、dom操作树及document对象
第一部分 基本语法: 1.数据类型(字符串.小数.整数.布尔.时间日期) 复制代码 代码如下: var s="3.14" var n=parsefloat(s) s+=5; var s="abc3.14" var n=parsefloat(s) //NaN s+=5;//解析转换成小数型 var d=parseInt(s)//解析转换成整数型 isNaN(字符串),判断是不是数字模样的字符串,是-false:否-true 2.变量 3.运算符:四大类 4.表达式(为
-
JS document文档的简单操作完整示例
本文实例讲述了JS document文档的简单操作.分享给大家供大家参考,具体如下: <html> <head> <title>js-documnent文档结构操作</title> <meta charset="UTF-8"/> <script type="text/javascript"> function testFile(){ // 获取元素 var showdiv=document.ge
-
JS window对象简单操作完整示例
本文实例讲述了JS window对象简单操作.分享给大家供大家参考,具体如下: 例1: <html> <head> <title>js---window函数</title> <meta charset="UTF-8"/> <script type="text/javascript"> // 显示框:没有返回值,出现一个提示框 var sto; var stl; function testAler
-
js打开word文档预览操作示例【不是下载】
本文实例讲述了js打开word文档预览操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function openmydoc(path) { var doc = new ActiveXObject("
-
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
本文实例讲述了js使用文档就绪函数动态改变页面内容.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /*文档就绪函数*/ /*动态修改网页的内容*/ window.onload = function () { va
-
详解阿里Node.js技术文档之process模块学习指南
模块概览 process是node的全局模块,作用比较直观.可以通过它来获得node进程相关的信息,比如运行node程序时的命令行参数.或者设置进程相关信息,比如设置环境变量. 环境变量:process.env 使用频率很高,node服务运行时,时常会判断当前服务运行的环境,如下所示 if(process.env.NODE_ENV === 'production'){ console.log('生产环境'); }else{ console.log('非生产环境'); } 运行命令 NODE_EN
-
python处理document文档保留原样式
document文档格式.线段.图片.页眉页脚等都不变,供大家参考,具体内容如下 # -*- coding: utf-8 -*- # @Time : 2019/5/6 11:46 # @Author : """ # 利用python-docx替换文章中的内容 pip install python-docx # 格式.线段.图片.页眉页脚等都不变 # python-docx 在处理超链接的问题时,可以参考一下链接对源码进行修改 https://github.com/python
-
对tensorflow中cifar-10文档的Read操作详解
前言 在tensorflow的官方文档中得卷积神经网络一章,有一个使用cifar-10图片数据集的实验,搭建卷积神经网络倒不难,但是那个cifar10_input文件着实让我费了一番心思.配合着官方文档也算看的七七八八,但是中间还是有一些不太明白,不明白的mark一下,这次记下一些已经明白的. 研究 cifar10_input.py文件的read操作,主要的就是下面的代码: if not eval_data: filenames = [os.path.join(data_dir, 'data_b
-
Node.js实现批量下载图片简单操作示例
本文实例讲述了Node.js实现批量下载图片简单操作.分享给大家供大家参考,具体如下: 使用Node.js批量下载图片 首先要获取到图片链接: const img = [ "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400506629423.jpg", "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/