创建和删除节点:——核心DOM
1. 创建单个元素节点:3步:
1. 创建空元素节点对象:
var elem=document.createElement("标签名");
比如: var a=document.createElement("a");
html: <a></a>
2. 设置新元素的关键属性:
比如: a.href="http://tmooc.cn";
a.innerHTML="go to tmooc";
html: <a href="http://tmooc.cn">go to tmooc</a>
3. 将新节点挂到DOM Tree的指定父节点下:3种:
追加:parent.appendChild(elem);
插入:parent.insertBefore(elem,oldElem);
替换:parent.replaceChild(elem.oldElem);
2. 创建多个平级元素节点:3步:
1. 先创建一个文档片段对象:
var frag=document.createDocumentFragment();
文档片段:内存中临时保存一个DOM子树的对象
何时使用:只要添加多个平级节点时,都要先放入文档片段,再将文档片段整体挂到DOM Tree上
2. 将子节点先放入文档片段
3. 将文档片段整体挂到DOM Tree上
文档片段本身不会出现在DOM Tree上,只会将元素加入DOM树
3. 删除:parent.removeChild(子节点);
子节点.parentNode.removeChild(子节点);
2. HTML DOM常用对象:
1. Select对象:
事件:onchange 选中项发生改变时
属性:sel.selectedIndex 获得当前选中项的位置
sel.options 获得sel下所有option元素对象
方法:sel.add(opt) 将opt追加到sel下
sel.remove(i) 删除sel下i位置的option元素
Option对象:
创建一个新option:var opt=new Option(text,value);
相当于核心DOM三句话:
var opt=document.createElement("option");
opt.value=value;
opt.innerHTML=text;
属性:opt.index 获得当前opt所在的位置下标
opt.text opt.value: 分别获得innerHTML和value
opt.selected: 判断当前opt是否被选中!
强调:opt的selected不是bool值!
但是却可直接作为条件判断
创建option同时,追加到select中:
sel.add(new Option(text,value));
创建和删除节点:——核心DOM的更多相关文章
- DOM创建和删除节点、HTML DOM常用对象[转]
创建和删除节点:——核心DOM 1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标 ...
- DOM创建和删除节点
一.创建节点 3步 1.创建空元素对象: var newElem=document.createElement("标签名"); 例如:var a=document.createEl ...
- jQuery – 7.动态创建Dom、删除节点
动态创建Dom节点 1.使用$(html字符串)来创建Dom节点 2.append方法用来在元素的末尾追加元素 案例:动态生成网站列表 3.prepend,在元素的开始 ...
- jQuery里面的DOM操作(查找,创建,添加,删除节点)
一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上 append(): 在元素下添加元素 用法:$("id").append("定义的节点& ...
- JS DOM操作(创建、遍历、获取、操作、删除节点)
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
- 节点操作-创建并添加&删除节点&替换&克隆节点
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
- jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...
- 使用DOM解析XML文件,、读取xml文件、保存xml、增加节点、修改节点属性、删除节点
使用的xml文件 <?xml version="1.0" encoding="GB2312" ?> <PhoneInfo> <Br ...
随机推荐
- 如何线程安全地遍历List:Vector、CopyOnWriteArrayList
遍历List的多种方式 在讲如何线程安全地遍历List之前,先看看通常我们遍历一个List会采用哪些方式. 方式一: for(int i = 0; i < list.size(); i++) { ...
- (转)Shell函数
Shell函数类似于Shell脚本,里面存放了一系列的指令,不过Shell的函数存在于内存,而不是硬盘文件,所以速度很快,另外,Shell还能对函数进行预处理,所以函数的启动比脚本更快. 1. 函数 ...
- Android OpenGL 编写简单滤镜
Android 上使用Opengl进行滤镜渲染效率较高,比起单纯的使用CPU给用户带来的体验会好很多.滤镜的对象是图片,图片是以Bitmap的形式表示,Opengl不能直接处理Bitmap,在Andr ...
- AngularJS中使用service,并同步数据
service是单例对象,在应用中不同代码块之间共享数据. 对一些公用的方法封装到service中,然后通过依赖注入在Controller中调用,示例代码: 1.创建一个模块: var module ...
- Struts2 源码分析——过滤器(Filter)
章节简言 上一章笔者试着建一个Hello world的例子.是一个空白的struts2例子.明白了运行struts2至少需要用到哪一些Jar包.而这一章笔者将根据前面章节(Struts2 源码分析—— ...
- ROS 常用命令字典
版权声明:本文为博主原创文章,转载请标明出处: http://www.cnblogs.com/liu-fa/p/5761448.html 该博文适合已经具备一定的ROS编程基础的人,快速查看ROS相关 ...
- js实现数组的排序和分组
问题: data=[1,1,1,1,2,2,2,2,5,5,5,8,8,8,2,2,2,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4] 怎么把值为1,2,3,4,5,8的数据分成 ...
- 会员管理系统的设计和开发(2)-- RDLC报表的设计及动态加载
在上篇<会员管理系统的设计和开发(1)>介绍了关于会员系统的一些总体设计思路和要点,经过一段时间开发,软件终于完成并发布.在这期间,碰到了不少技术难点,并积累了不少开发心得和经验,本篇继续 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出
数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,我曾经在之前的一篇文章<Winform开发框架之通用数据导入导出操作>介绍了在Winform ...
- .Net实现拉勾网爬虫
前几天看到一个.NET Core写成的爬虫,有些莫名的小兴奋,之前一直用集搜客去爬拉勾网的招聘信息,这个傻瓜化工具相当于用HTML模板页去标记DOM节点,然后在浏览器窗口上模拟人的浏览行为同时跟踪节点 ...