12 DOM操作应用
1.创建子元素oLi=document.creatElement('li')
2.将元素附给父级元素oUl.appendChild(oLi)
3.将元素插入到父级元素里的第一位子元素之前oUl.insertBefore(oLi,aLi[0])
当if(aLi.length>0)用这个,反之else用oUl.appendChild(oLi),否则会出错
4.oUl.removeChild(this.parentNode) //删除的子节点为当前事件的父节点
5.文档碎片应用,相当于购物袋
var oFrag=document.creatDocumentFragment();
oFrag.appendChild(oLi);
oUl.appendChild(oFrag);
12 DOM操作应用的更多相关文章
- 12 DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- 摆脱DOM操作,从TodoMVC看angularJS
取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
- js获取节点的DOM操作
一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Nod ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- 第三章 jQuery中的DOM操作
DOM(Document Object Model)文档对象模型,每张网页都能用DOM表示出来,每一份DOM都能看成一颗DOM树. jQuery继承了JavaScript对DOM对象操作的特性,使开发 ...
- javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率
刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
随机推荐
- for循环console输出结果的问题
我想定时打印出一串数字,写好了如下代码 for (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i); ...
- EF Code-First 学习之旅 数据库初始化 (二)
Context类的基类构造函数有如下的参数 1.无参数 如果没有给基类构造函数添加参数,它会在local SQLEXPRESS server创建数据库,名为{Namespace}.{Context c ...
- Error setting property values; nested exception is org.springframework.beans.NotWritablePropertyExce
Error setting property values ; nested exception is org.springframework.beans.NotWritablePropertyExc ...
- caioj1272&&codeforces 148D: 概率期望值3:抓老鼠
这道真的是好题,不卡精度,不卡细节,但是思考的方式很巧妙! 一开始大家跟我想的应该差不多,用f[i][j]表示有i只白老鼠,j只黑老鼠的胜率,然后跑DP,然后我就发现,这样怎么做?还有一种不胜不负的平 ...
- 一步一步学Silverlight 2系列(4):鼠标事件处理
一步一步学Silverlight 2系列(4):鼠标事件处理 概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言V ...
- android 设置textview中划线效果
textView.getPaint().setFlags(Paint. UNDERLINE_TEXT_FLAG ); //下划线 textView.getPaint().setAntiAlias( ...
- I.MX6 U-boot编译找不到用户目录
/**************************************************************************** * I.MX6 U-boot编译找不到用户目 ...
- Python基础第七天
一.内容 二.练习 练习1 题目:编写函数,函数执行的时间是随机的 图示: 代码: import time import random def func(): s = 1 l = [] for i i ...
- asp.net mvc5 使用百度ueditor 本编辑器完整示例(下)配置上传播放视频
通过 asp.net mvc5 使用百度ueditor 本编辑器完整示例(上)介绍,可以上传图片到服务器了,也可以上传小的视频文件,并且由百度编辑器自动加入html5<video>标签播放 ...
- asp.net mvc4 不支持EF6
参考文章:http://www.cnblogs.com/zeusro/p/3403771.html http://q.cnblogs.com/q/40926/ 解决方法是 1.把EF6删除改用EF5. ...