DOM 节点的克隆与删除

无奈的开头关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情况更多,这里不详细讲解,只说明大概过程. 问题那么多,主要出现在浏览器自身实现上,其中尤属legacy IE上—IE6,7,8. 在添加节点的API实现上,IE做了一个贡献,那就是insertAdjacentHTML函数被纳入HTML5规范上,这个函数在之前的文章中详细讲解并实现过,不提.此后,IE…

.clone事件当你克隆的时候，DOM节点是克隆出来了，但是克隆出来的节点不能运行时事件 ...

解决办法如下在clone()里面加个参数true,即可完成事件的植入.即:.clone(true).clone( [ withDataAndEvents ], [ deepWithDataAndEvents ] )withDataAndEvents一个Boolean值(true 或者 false)指示事件处理函数是否会被复制.对已jQuery 1.4,元素数据也会被复制. 默认值是 false.*对于1.5.0的默认值是true .这将在1.5.1以上改回false.deepWithDataAn…

JavaScript操作DOM节点

DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM.Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能.…

节点操作-创建并添加&删除节点&替换&克隆节点

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DOM增删改查</title> <style type="text/css"> div{ border:#306 1px solid; width:200px; height:30px; margin:10px; } #div…

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode 父节点 childNodes 子节点 firstChild 父节点里的第一个子节点 lastChild 父节点里的最后一个子节点 nextSibling 与子节点并列的下一个兄弟节点 previousSibling 与子节点并列的上一个兄弟节点火狐与谷歌支持而ie8不支持的节点关系有: previous…

使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test</div><script language="javascript">alert(document.getElementById("myid").innerHTML);</script></body></html&…

jQuery-1.9.1源码分析系列（十一） DOM操作续——克隆节点

什么情况下使用到克隆节点? 我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况.比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位置上的节点被移除了.有的时候需要保留原来位置上的节点,仅仅是需要一个副本添加到对应位置,这个时候克隆就有了使用场景. jQuery.fn.clone克隆当前匹配元素集合的一个副本,并以jQuery对象的形式返回. 你还可以指定是否复制这些匹配元素(甚至它们的子元素)的附加数据( data()函数 )…

(转载)html dom节点操作(获取/修改/添加或删除)

DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.在 HTML DOM 中,所有事物都是节点.DOM 是被视为节点树的 HTML. 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注…

jQuery克隆DOM节点

jQuery克隆DOM节点 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + "…

jQuery删除DOM节点

jQuery删除DOM节点 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + "…

jQuery修炼心得-DOM节点的删除

要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题. 1.empty empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了指定元素中的所有子节点. 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本.因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点.如果我们通过empty方法移除里面div的所有元素,它只是清空内部的html代码,但是标记仍然留在DOM中,通过empty移除了当前div元素下的所有p元素但是本身id=…

为DOM节点添加或者删除class

项目中如果应用了常用的javascript类库,多数情况下,这些已经封装好的类库,都会封装一个类似于addClass和removeClass的方法,以便于我们对DOM节点的class进行操作. 以jQuery为例: $(dom).addClass("a").removeClass("b"); 由于是封装好的方法,我们甚至都不需要检查需要操作的class在DOM中是否存在,用起来的感觉真的是不要太爽. 那么如果项目中没有使用任何类库呢,完全原生JavaScript,如…

js删除dom节点时候索引出错问题

我们知道删除一个dom节点的时候索引就会发生了改变,甚至是错误,就算jq的ecah也无能为力,所以我们只能自己写个功能了直接上代码把,不多说 <!DOCTYPE html> <html> <head> <title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title> <meta http-equiv="Content-Type"…

angular.js ng-repeat动态插入删除dom节点

既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并且文本框里数据要和控制层一个属性绑定,按钮要实现 ng-click 事件,如何做? 传统实现方法,在父节点里直接新增一段 dom ,html标签的事件也会被自动注册. angular.js实现方法: 将节点添加到父节点后,我们需要重新编译, 将数组对象 (包含 ng-click 等 angular.…

javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点

DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏览器就会创建页面的文档对象模型. 节点: 根据W3C的HTML DOM 标准,HTML 文档中的所有内容都是节点. 1. 整个文档是一个文档节点 2. 每个HTML元素是元素节点 3. HTML元素内的文本是文本节点 4.每个HTML属性都是属性节点 5.每个注释都是注释节点所以HTML DOM…

angular.js 动态插入删除dom节点

angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个玩笑! 没错,确实是这样的.关于 angular.js 的详细说明及事例请在博客搜索 angular.js 既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和…

DOM节点的创建、插入、删除、查找、替换

在前端开发中,js与html联系最紧密的莫过于对DOM的操作了,本文为大家分享一些DOM节点的基本操作. 一.创建DOM节点使用的命令是 var oDiv = document.createElement('div'); 这样就创建了一个div标签. 二.插入DOM节点移动DOM节点也就是把这个节点插入到html文档中的某个地方,这里js给了我们两个方法: 1.appendChild():把节点插入到父节点的末尾. document.body.appendChild(oDiv); //把di…

DOM节点克隆

var newDiv = red.cloneNode();document.body.appendChild(newDiv);注意:1.默认只克隆元素本身:设置参数为true,进行深度克隆,可以克隆元素的子元素等所有元素2.元素绑定的事件并不会随着元素的克隆而被携带 ===========================相关示例代码如下================================ <!DOCTYPE html> <html lang="en">…

在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接

查看本章节查看作业目录需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的行数据删除在文本输入框中输入姓名.年龄.班级和手机号,并选择性别点击"插入数据"按钮,将输入框中的数据插入到表格中,表格中的数据将增加一条点击表格中每条数据后的"删除"超链接,将删除该条数据,表格中的数据将减少一条实现思路: 在页面中绘制表格,并添加 4 条虚拟…

深入理解DOM节点操作

× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点前面的话一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节点操作方法前提 DOM提供节点操作的方法是因为DOM节点关系指针都是只读的下列代码中想通过修改myUl的父级节点来修改其节点关系,但由于parentNode属性是只读的,所以修改无效,在IE8-浏览器下甚至会报错 <div id="myDiv"></div> &…

jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("backgroundColor","gray"); //修改多个属性:括号之中是一个对象css(obj) // 例: $("#one").css({ // "background":"gray"…

JS 操作Dom节点之CURD

许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document.getElementById() //兼容问提:IE低版本不仅检查Id属性,还会检查Name属性,当Name属性匹配参数时也会返回该元素 //解决方法:不要让一个元素name属性和另一个元素的id属性相同 document.getElementsByTagName() document.getEle…

原生JS中DOM节点相关API合集

节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只读 Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写 Node.baseURI //返回当前网页的绝对路径 Node.ownerDocument //返回当前节点所在的顶层文档对象,即document Node.nextSibling //返回紧跟在当前节点…

JavaScript函数使用和DOM节点

一.函数的声明与调用 1.函数声明的格式: function 函数名(参数1, 参数2,....){ 函数体代码 return 返回值:} 2.函数的调用:①直接调用:函数名(参数1的值,参数2的值,....);②事件调用方式:再HTMl标签中,使用事件名="函数名()"<button ondblclick="saySth('按钮','yellow')">点击按钮,打印内容</button> 3.函数的注意事项:①函数名必须符合小驼峰法则!!…

jacascript DOM节点——节点关系与操作

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也与其他节点存在某种关系.节点之间的关系构成了层次,而所有页面标签则表现为一个以特定节点为根节点的树形结构,也就是DOM树.下图为各节点之间的关系: 父级属性 parentNode 和 parentElement 每个节点都有一个 parentNode 属性,该属性指向文档树中的父节点.对于一个节点来…

JS中的DOM— —节点以及操作

DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现.那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧!! 一.DOM树的节点 1. DOM节点分为三大类: 元素节点(标签节点).属性节点和文本节点. 属性节点和文本节点都属于元素节点的子节点. 因此操作时,需先选中元素节点,再修改属性和文本. [查看元素节点] 1. 使用getElement系列方法: 具体的HTML代码如下图…

第四章 DOM节点操作

1.什么是DOM:DOM(document object model)文档对象模型,把每一个元素看做是一个节点,然后对节点进行增删改查的操作 2.DOM的分类:(1)Core Dom:可以对html,XHTML,xml进行操作(2)html DOM:可以对html,XHTML进行操作(3)XML DOM:可以对xml进行操作 3.DOM节点的分类:(1)标签称之为元素节点(2)属性称之为属性节点(3)文本内容称之为文本节点 4.获取和设置属性的方法:获取属性值:object.getArrtrib…

04-老马jQuery教程-DOM节点操作及位置和大小

1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动态创建标签 var domDiv = document.createElment('div'); // 动态创建属性 domDiv.setAttribute('id', 'box'); // 动态设置内部html标签 domDiv.innerHTML = '<span>动态span</spa…

Jquery6 DOM 节点操作

学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,通过这些节点关系,可以创建.插入.替换.克隆.删除等等一些列的元素操作. 一．创建节点为了使页面更加智能化,有时想动态的在 html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点. var box = $('<div id="box">节点</div&…

js中DOM 节点的一些操作方法

什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点.然后操作的时候修改的是该元素的属性. DOM树(一切都是节点) DOM的数据结构如下: 上图可知,在HTML当中,一切都是节点:(非常重要) 元素节点:HMTL标签. 文本…

【DOM 节点的克隆与删除】的更多相关文章