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样式。

原文地址:https://www.cnblogs.com/xuzhudong/p/6624601.html