正课:
1. 添加和删除元素:
2. ***HTML DOM常用对象:image select table form
添加和删除元素:
- 添加单个元素: 3步:
- 创建空元素:
var elem=document.createElement(“标签名”);
比如: var a=document.createElement(“a”);
- 设置必要属性:
elem.属性名=值;
elem.οnclick=function(){…}
比如: a.innerHTML=”go to tmooc”
a.href=”http://tmooc.cn”
go to tmooc - 将新元素,加载到指定DOM树上的父元素下
parent.appendChild(elem);
//将elem追加到parent的最后一个子元素后
parent.insertBefore(elem,已有元素);
//将elem插入在“已有元素”前
parent.replaceChild(elem,已有元素);
//用elem替换“已有元素”的位置
- 创建空元素:
强调: 每修改一次DOM树,都会导致重新layout
频繁修改DOM树,会降低效率。
解决: 在内存中,将DOM子树拼好后,再整体加载到DOM树- 批量添加多个平级子元素:
- 创建文档片段: Document Fragment
文档片段: 内存中临时存储多个DOM元素的临时父元素
何时使用: 只要添加多个拼接子元素时,都要先将子元素,放入文档片段中缓存。
var frag=document.createDocumentFragment(); - 将子元素追加到文档片段中,临时保存
frag.appendChild(子元素);
其实frag的用法和普通父元素完全一样 - 将文档片段整体追加到页面
parent.appendChild(frag);
强调: fragment不会出现在DOM树上
- 创建文档片段: Document Fragment
课堂练习:
select 事件:onchange:当选中项发生改变时触发
属性:.selectedIndex: 获取选中项的下标删除元素:parent.removeChild(子元素);
子元素.parentNode.removeChild(子元素);- 添加单个元素: 3步:
***HTML DOM: image select table form
img元素: var img=new Image();
强调: 不是所有元素都能new!只有个别可以。select对象: 代表一个select元素
属性: options:获取select下所有option子元素的集合
下标访问,length属性,遍历
selectedIndex: 获取当前选中项的下标
方法: add(option): 将option添加到select下
相当于: appendChild(option);
remove(index): 删除index位置的option
相当于: removeChild(sel.options[index]);
事件: onchange: 当选中项发生改变时触发
option对象: 代表select下一个option元素
创建: var opt=new Option(text,value)
相当于: var opt=document.createElement(“option”);
opt.innerHTML=text;
opt.value=value;简写: 创建option后,立刻追加到select中
select.add(new Option(text,value));属性: index:获得当前opt在select中的下标位置
text: 代替innerHTML获取opt的内容文本
value: 获得当前opt的value;
selected: 判断当前opt是否被选中,返回bool