DOM创建和删除节点、HTML DOM常用对象[转]
创建和删除节点:——核心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创建和删除节点、HTML DOM常用对象[转]的更多相关文章
- DOM创建和删除节点
一.创建节点 3步 1.创建空元素对象: var newElem=document.createElement("标签名"); 例如:var a=document.createEl ...
- 创建和删除节点:——核心DOM
1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标签名"); ...
- jQuery08源码 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选
jQuery.fn.extend({ //$('ul').find('li').css('background','red'); //$('ul').find( $('li') ).css('back ...
- jquery17 DOM操作 : 添加 删除 获取 包装 DOM筛选
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- DOM 创建元素 删除元素(结点)
创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <script> var para=document. ...
- jquery16 DOM操作 : 添加 删除 获取 包装 DOM筛选
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- PHP中利用DOM创建xml文档
DOM创建xml文档 用dom创建如下文档: <booklist> <book id="1"> <title>天龙八部</title> ...
- react系列一,react虚拟dom如何转成真实的dom
react,想必作为前端开发一定不陌生,组件化以及虚拟dom使得react成为最受欢迎额前端框架之一.我们知道react是基于虚拟dom的,但是什么是虚拟dom呢,其实就是一组js对象,那么我们今天就 ...
- jQuery – 7.动态创建Dom、删除节点
动态创建Dom节点 1.使用$(html字符串)来创建Dom节点 2.append方法用来在元素的末尾追加元素 案例:动态生成网站列表 3.prepend,在元素的开始 ...
随机推荐
- ios -- 教你如何轻松学习Swift语法(三) 完结篇
前言:swift语法基础篇(二)来了,想学习swift的朋友可以拿去参考哦,有兴趣可以相互探讨,共同学习哦. 一.自动引用计数 1.自动引用计数工作机制 1.1 swift和o ...
- C#窗体 自定义控件
1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Dr ...
- javascript面向对象详解
认识面向对象 1.面向对象中的概念 一切事物皆对象 对象具有封装和继承特性 信息隐藏 2.基本面向对象 3.函数构造器构造对象 深入了解面向对象 第一种书写格式 第二种书写格式
- ACCESS自动编号清零
ACCESS的数据库,当每次删除所有记录后,表里的一个ID字段(自动编号),无限递增,位数无限扩.当每次执行删除查询时,程序就把“自动编号”型ID字段清零,然后重新从“初始值”开始,解决方法如下: ...
- 上传预览图片自己做的.md
1.无插件预览(window.URL.createObjectURL) ```javascript //demo 图片预览 单个 $(".demo input#demo_file" ...
- Android-Universal-Image-Loader的缓存处理机制
讲到缓存,平时流水线上的码农一定觉得这是一个高大上的东西.看过网上各种讲缓存原理的文章,总感觉那些文章讲的就是玩具,能用吗?这次我将带你一起看过UIL这个国内外大牛都追捧的图片缓存类库的缓存处理机制. ...
- Python多进程编程
转自:Python多进程编程 阅读目录 1. Process 2. Lock 3. Semaphore 4. Event 5. Queue 6. Pipe 7. Pool 序. multiproces ...
- python高性能代码之多线程优化
以常见的端口扫描器为实例 端口扫描器的原理很简单,操作socket来判断连接状态确定主机端口的开放情况. import socket def scan(port): s = socket.socket ...
- 用TCGA收集的mRNA表达数据作差异表达
做差异表达的软件DEseq和edgeR所需要的数据格式必须是原始counts,经过normalization和log2后的数据都不适合,所以对于做差异表达计算的童鞋可以使用ExperimentHub下 ...
- excel如何设置输入数字后单元格自动填充颜色
在使用excel的过程中,有时需要在输入数字时,突出显示这些单元格,突出显示可以用有填充颜色的单元格来表示.为了实现这样的效果,需要借助excel的条件格式. 工具/原料 电脑 Excel 2010 ...