<span style="font-size:18px;"> 1. 添加单个元素: 3步:
1. 创建空元素:
<span style="color:#ff0000;">var elem=document.createElement("标签名");</span>
比如: var a=document.createElement("a");
<a></a>
2. 设置必要属性:
<span style="color:#ff0000;">elem.属性名=值;</span>
elem.οnclick=function(){...}
比如: a.innerHTML="go to tmooc"
a.href="http://tmooc.cn"
<a href="http://tmooc.cn">go to tmooc</a>
3. 将新元素,加载到指定DOM树上的父元素下
<span style="color:#ff0000;"> parent.appendChild(elem)</span>;
//将elem追加到parent的最后一个子元素后
parent.insertBefore(elem,已有元素);
//将elem插入在“已有元素”前
parent.replaceChild(elem,已有元素);
//用elem替换“已有元素"的位置
强调: 每修改一次DOM树,都会导致重新layout
频繁修改DOM树,会降低效率。
解决: 在内存中,将DOM子树拼好后,再整体加载到DOM树
2. 批量添加多个平级子元素:
1. 创建文档片段: Document Fragment
文档片段: 内存中临时存储多个DOM元素的临时父元素
何时使用: 只要添加多个拼接子元素时,都要先将子元素,放入文档片段中缓存。
var frag=document.createDocumentFragment();
2. 将子元素追加到文档片段中,临时保存
<span style="color:#ff0000;">frag.appendChild(子元素);</span>
其实frag的用法和普通父元素完全一样
3. 将文档片段整体追加到页面
parent.appendChild(frag);
强调: fragment不会出现在DOM树上
eg:
select 事件:onchange:当选中项发生改变时触发
属性:.selectedIndex: 获取选中项的下标
删除元素:parent.removeChild(子元素);
子元素.parentNode.removeChild(子元素);
2. ***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
</span>
<span style="font-size:18px;">1. ***HTML DOM常用对象:
eg:
1. 在事件处理函数中,尽量不要使用外部的局部变量
一旦使用则形成闭包!
后果,被闭包保护的DOM元素,永远无法释放,内存泄露
table对象: rows 获得所有行 cells 获得所有格
insertRow(i) deleteRow(i)
其中,i是相对于整个table的位置
tHead: createTHead deleteTHead
rows insertRow(i) deleteRow(i)
tr rowIndex: 获取当前tr在整个table中的下标
cells insertCell(i) deleteCell(i)
td
tBodies createTBody
tbody insertRow(i) deleteRow(i)
其实,i是相对于当前行分组的下标i
rows
tr
cells insertCell(i) deleteCell(i)
td
tFoot createTFoot deleteTFoot
rows insertRow(i) deleteRow(i)
tr
cells insertCell(i) deleteCell(i)
td
eg:
确认框: confirm("确认提示信息")
有两个按钮可选: 确定 取消
返回值: 按确定:true, 按取消:false
form对象: 代表一个form元素
查找form元素: document.forms[i/"id"/"name"]
事件: onsubmit: 当正式提交表单前自动触发
专门用来在表单提交前,实现验证
方法: submit(); 手动提交表单
查找表单内的元素: form.elements[i/"id"/"name"]
可简写为: from.id/name
只能找到带name属性的数据采集元素或按钮
elem.focus();//让指定元素获得焦点
</span>