白雪公主960
白雪公主960

增加和删除节点，HTML DOM常用对象-03

16-0909-pm day 03

  1. 添加和删除:
  2. ***HTML DOM常用对象:
    Image Select Table Form Option

1. 添加和删除:

1.1添加: 3步:

  1. 创建空元素对象:
    var a=document.createElement("a");

相当于:

  1. 设置元素的关键属性:
a.href="http://tmooc.cn"
a.innerHTML="go to tmooc";
  1. 将元素挂到指定父元素下:
末尾追加: parent.appendChild(a); //此方法用的最多
插入: parent.insertBefore(a,old);
替换: parent.replaceChild(a,old);

***优化: 尽量少的操作DOM树:
html->DOM Tree
↓
Render Tree->layout->paint
↑
css->cssRules
如何:

  1. 如果同时添加父元素和子元素，要在内存中先将所以子元素添加到父元素下，将父元素一次性加入DOM树
  2. 如果同时添加多个平级子元素，要先将平级子元素加入文档片段，再将文档片段整体加到页面。

练习: select元素: onchange事件: 选中项发生改变时触发
selectedIndex属性: 当前选中项的下标

文档片段: 内存中临时存储多个平级子元素的虚拟父元素
何时: 添加多个平级元素时，都要先将子元素追加到文档片段中缓存，再将文档片段一次性添加到页面的父元素下
如何: 3步:

  1. 创建文档片段： var frag=document.createDocumentFragment();
  2. 将平级子元素，先追加到frag下: 用法同普通父元素
  3. 将文档片段，整体添加到页面

1.2 删除节点:

parent.removeChild(child);
child.parentNode.removeChild(child);

2. HTML DOM常用对象:

2.1 Image:

创建: var img=new Image();

2.2 Select: