创建和删除节点:——核心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 ...
随机推荐
- tomcat实现ServletContext的addListener方法的源码解说(原创)
tomcat 8.0.36 知识点: 动态监听器有七类: ServletContextAttributeListener ServletRequestListener ServletRequestAt ...
- Android基于mAppWidget实现手绘地图(八)–获取用户地理位置
你有两种方式确定用户的当前位置: 1.使用安卓标准方式 2. 使用MapWidget的监听器 标准方式: 在你的acivity中加入: LocationManager locManager = (Lo ...
- jQuery选择器(二)
jQuery中有"过滤选择器",通过特定的规则来筛选出所需的DOM元素,都是以(:)开头的. $("div:first")//选取出所有<div>元 ...
- OpenStack虚拟云桌面在携程呼叫中心的应用
编者:本文为刘科在第六期[携程技术微分享]中的分享内容.在携程技术中心(微信号ctriptech)微信后台回复[云桌面],可加入微信交流群,和关注云桌面的小伙伴一起玩耍~ 刘科,携程系统研发云平台桌面 ...
- SQL--局部变量
取值的话:print @变量名, 变量不设置值的话,默认打印出来是:NULL, 输出变量的值:
- JAVA - HashMap,TreeMap迭代
1.使用for_each循环迭代 public class TestUnit { public static void main(String[] args) { HashMap hashMap=ne ...
- 使用 TOP 限制更新的数据
可以使用 TOP 子句来限制 UPDATE 语句中修改的行数.当 TOP (n) 子句与 UPDATE 一起使用时,将针对随机选择的 n 行执行删除操作.例如,假设您要为一位高级销售人员减轻销售负担, ...
- webservice MaxReceivedMessageSize :已超过传入消息(65536)的最大消息大小配额
在客户端的webconfig文件的webservice节点进行如下配置:(注:此处客户端为应用程序的config文件) <system.serviceModel> <bindings ...
- LeetCode122:Best Time to Buy and Sell Stock II
题目: Say you have an array for which the ith element is the price of a given stock on day i. Design a ...
- 获取PC或移动设备的所有IP地址
不论是PC还是移动设备,都有可能同时存在几个IP地址(如具有多块网卡),本文介绍怎样获得PC或移动设备的所有IP地址. // 获得所有IP地址 public static void get_ip(){ ...