js操作document文档元素 节点交换交换

<input type="text" value="1" id=‘text1‘>
<input type="text" value="2" id=‘text2‘>
<script>
function a1(){
var a=document.getElementById(‘text1‘);
var b=document.getElementById(‘text2‘);
var c=a;
a.parentNode.removeChild(a);
b.parentNode.insertBefore(a,b);
b.parentNode.appendChild(c);
}
 window.setTimeout(a1,1000);

</script>

  c=a 实际上是指向同一个节点元素 所以移除后使用

insertBefore插入到b之前 后边又追加在b父节点的最后面  但并没有出现3个输入框 而是将text1移动到了后面 所以上面的代码可以进一步简化
<input type="file"  id=‘text1‘>
<input type="file"  id=‘text2‘>
<button onclick="a1()">交换</button>
<script>
function a1(){
var a=document.getElementById(‘text1‘);
var b=document.getElementById(‘text2‘);
b.parentNode.appendChild(a);
}

</script>

  

时间: 2024-10-13 02:29:02

js操作document文档元素 节点交换交换的相关文章

js事件,操作页面文档,计算后样式,数据类型

js:运行在浏览器的脚本语言 js引入 1.行间式:存在于行间事件中 <div id="div" onclick="this.style.color="red"">文本内容</div> <style> div{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <d

利用js_API 执行对html文档元素的属性的CRUD操作

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>对html元素属性的增删改查操作</title> <style> #attr{text-align:center;font-size:24px;color:white;background:#008000;width:400px;height:30px; } .myclass{back

如何解决用jquery.uploadify.js进行多文档上传会修改document的title

在dwz框架中使用了jquery.uploadify.js进行多文档上传当打开窗口后会发现document的title被无意之中修改.进行代码调试也没有发现.对swfobject进行研究也没有发现修改title的情况. 只能采用一种方式禁止修改title var oldTitle = document.title; try { document.attachEvent('onpropertychange', function(){ if (document.title != oldTitle )

javascript DOM操作HTML文档

文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的HTML和XML对象集,并有一个标准接口来访问并操作他们,即任何一个 html 元素可以使用 JavaScript DOM 动态访问和控制. 1. DOM概述 文档对象模型定义了JavaScript可以进行操作的浏览器,描述了文档对象的逻辑结构及各个功能组件的标准接口.主要包括以下内容: 核心Jav

文档对象模型操作xml文档

简介 :文档对象模型(DOM)是一种用于处理xml文档的API函数集. 2.1文档对象模型概述 按照W3C的定义,DOM是“一种允许程序或脚本动态地访问更新文档内容,结构和样式的.独立于平台和语言的规范化接口.DOM是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口,它以树状结构表示HTML和XML文档,定义了遍历这个树和检查.修改树的节点的方法和属性. DOM的核心API还允许你创建和填充文件.加载文档并保存. 2.2DOM实现 微软的net框架在Systemx.x

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

× 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源 特征 创建文档片段,要使用document.createDocumentFragment()方法.文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作 文档片段节点的三个node属性——nodeType.nod

java操作xml文档

目前最常用的XML解析技术是DOM和SAX. DOM是基于XML的树结构来完成解析的,适用于多次访问的XML文档,但是DOM解析比较消耗资源:而SAX是基于事件解析,适用于大数据量的XML文档,占用资源少,内存消耗小. DOM是文档对象模型(Document Object Model) 首先DOM会将XML文档映射成一颗倒挂的树,在这棵树中,每个节点都是以节点对象的形式存在的. 我们通过操作这些对象就可以完成XML文件的读写任务了. 我们可以直接根据节点的名称或属性查找该节点对象,也可以根据一个

选取文档元素的方法总结

在讲解如何选取文档元素之前,先普及一下什么是文档节点: HTML文档的每个节点都表示一个Node对象,节点树形结构的根部是Document节点,代表整个文档,代表HTML元素的节点是Element节点,代表文本的节点是Text节点:Document.Element.Text类都是Node类的子类:(Comment节点类型代表注释节点,Attr节点类型代表属性) 查询一个或多个文档元素的方法: (文档Document对象和元素Element对象均定义了以下方法,即也可以在一个元素Element上选

C#操作XML文档(XmlDocument、XmlNode、XmlAttribute、SelectSingleNode、SelectNodes、XmlNodeList)

XML文档是一种通用的文档,这种文档既可以用.config作为后缀也可以用.xml作为后缀.XML文档主要由元素节点和节点的属性共同构成的.它有且仅有一个根节点,其他的节点全部都是根节点的子节点或者子子节点:每一个节点有开始就一定会有结束,不可能出现有开始无结束的节点,节点主要有两种类型:有InnerText的<city>……</city>和没有InnerText的<city……/>.在节点中含有属性,一个节点可以含有多个属性,每个属性是由名字和值共同构成的. 在XML