DOM修改元素的方法总结

今天我们要谈谈DOM元素的修改（包括修改内容，属性，样式）。
修改内容的方法----3种：
elem.innerHTML:获取或设置元素开始标签到结束标签之间的原始HTML代码片段；
elem.textContent:获取或设置元素开始标签到结束标签之间的纯文本内容---要考虑兼容性问题IE9+;
获取表单元素的内容：value；

修改属性的方法----2种

1. 核心DOM：操作一切结构化文档的API（HTML,XML)
      elem.getAttribute();elem.setAttribute(attr,..);
      判断是否包含属性：elem.hasAttribute();
      移除属性：elem.removeAttribute（）;

2. TML DOM：对部分常用DOM的简化版本；---这种常用

     获取属性值：elem.属性名；
     修改属性值：elem.属性名= '值'；
     判断是否包含属性：elem.属性名===''不包含；
     移除属性：elem.属性名='';

我们常在表单元素中遇到三大状态属性：selected checked disabled；

不过我们无法使用DOM核心来操作这些状态属性，因此我们需要使用HTML DOM方法：

使用HTML DOM可以操作三大状态。（elem.disabled;elem.selected;elem.checked)值是布尔值；

3. 代码的维护性：
      后续再更改网站样式的时候，如果样式比较多，首选使用类，然后把类添加到内容里面；这样便于代码的维护性。

4. 添加和删除
创建空元素：var aa =document.createElement('a');
aa.href ='www.baidu.com';
aa.innerHTML ='G';
1.末尾追加document.body.appendChild(aa);需要添加到body中；
2.中间插入：parent.insertBefore(newTarget,oldtarget)
3.替换：parent.replaceChild(child,oldChild);
优化：

尽量少的修改DOM树
原因：页面加载过程中，尽量少的修改DOM，每次修改，都会导致DOM树的重排和重绘，这样会对性能造成影响；
html ---------DOM Tree
           丨
render Tree（圣诞树）----每次修改DOM树，都会导致DOM树的重新计算高度和宽度；

丨
css-----------css样式。