JS复习整理5_DOM

1.DOM节点的常用属性（所有节点都支持）

1.nodeType：元素1，属性2，文本3
2.nodeName：元素标签名的大写形式
3.nodeValue：元素节点为null，文本节点为文本内容，属性节点为属性值
4.关系属性：parentNode，childNodes，nextSibling，previousSibling，firstChild，lastChild
5.ownerDocument：文档节点（document对象）

2.操作DOM节点（增/删/改）

1.appendChild(node);给当前节点的childNodes列表末尾添加一个节点。若node已存在，则把node移动到当前节点下
2.insertBefore(node, targetNode);在targetNode前插入node
3.replaceChild(node, targetNode);用node替换targetNode，注意：替换之后targetNode并没有被销毁，只是变成了游离在DOM树外的文档碎片
4.removeChild(node);移除node，注意：移除之后node也没有被销毁，该方法返回node的引用
5.cloneNode(true/false);复制一个与当前节点完全相同的节点，若true则深复制，否则浅复制，IE会复制相关事件处理器，其它浏览器不会
6.normalize();用来删掉空文本节点，合并相邻文本节点

3.document对象相关

1.document.documentElement;
指向html标签元素
2.document.body;
指向body标签元素
3.document.title;
指向title标签元素，直接赋值可以修改文档标题
4.document.URL;
获取完整URL
5.document.domain;
获取域名，可以直接赋值设置域名，当页面中多个frame需要通信时必须修改该属性，以解除跨域安全限制
6.document.referrer;
获取上一个页面的url，可能是空串

查找元素:
7.document.getElementById(str);
8.document.getElementsByTagName(str);返回集合，用方括号语法访问，方括号内可以是字符串表示按name属性值取元素（str可以是*表示取所有DOM元素）
9.document.getElementsByName(str);多用于单选按钮组

P.S.前两个适用于所有XML文档的DOM操作，最后一个只适用于HTML文档。至于HTML5支持的document.querySelector(str)以及document.getElementsByClassName(str)不在此讨论，上面列出的3种方式都是全浏览器兼容的

1.document.write(str);文档写入，文档加载过程中直接调用则在指定位置输出内容，若放在load事件处理器中则重写整个页面
2.document.createTextNode(text);创建文本节点。document.createElement(tagName);创建元素

4.元素节点相关

1.元素节点的属性：id、title（类似于ToolTip）、className，都是可读/写的（写原生js代码时这3个属性很常用，尤其是className，很方便）
2.elem.getAttribute(attr);获取attr属性的值，也可以取得自定义属性，但HTML5中自定义属性应该加上”data-“前缀（当然，不加也没关系，只是规范要求），用elem.dataset.attr获取
elem.setAttribute(attr, value);
设置属性值，只用来设置自定义属性，因为自定义属性无法直接设置
elem.removeAttribute(attr);
删除属性和值（[IE6-]不支持）

P.S.一般直接访问属性，例如elem.id, elem.style等等，get/setAttribute方式并不常用（只用来读/写自定义属性），因为用函数方式访问style和onclick或其它事件属性返回字符串，而直接访问可以返回可操作对象（比如函数引用），所以一般都直接访问元素属性

3.attributes属性：elem.attributes[‘id’].nodeValue = value;也可以通过这种方式来访问属性，但更多的时候用attributes属性来遍历元素属性

4.遍历元素的节点时应该添加nodeType检测，因为有些浏览器会把标签间的空白字符也当作节点（Unicode签名BOM）

5.文本节点

node.nodeValue或者node.data都可以访问文本内容

6.DOM性能优化

①尽量减少访问NodeList的次数

NodeList、NamedNodeMap、HTMLCollection都是实时更新的，document.getElementByxxx的返回值就是该类型的。
应该尽量减少访问NodeList的次数，因为访问时需要检查DOM树，存在不小的性能损耗。可以把NodeList对象的引用保存起来，例如不要出现下面的代码：

for(var i = 0;i < 100;i++){
  document.getElementsByTagName('li')[i].className = 'disabled';
}

这样做简直太伤了，更好的做法是：

var lis = document.getElementsByTagName('li');
for(var i = 0;i < 100;i++){
  lis[i].className = 'disabled';
}

常见的HTMLCollection对象有：document.forms、document.images、document.links、document.anchors

②使用DocumentFragment避免多次“现场更新”

DocumentFragment是一种比较冷门但非常有用的节点，在性能优化中尤其重要，需要插入大量DOM节点时，我们有两个选择：要么一个一个往DOM树上插，要么先插到文档碎片上，再把文档碎片插入DOM树。
第一种方式需要更新n次DOM树，而第二种方式只需要更新1次，例如：

//创建文档碎片
var frag = document.createDocumentFragment();
//插入节点
var node = null, text = null;
for(var i = 0;i < 10;i++){
  node = document.createElement('p');
  text = document.createTextNode('段落' + i);
  node.appendChild(text);
  frag.appendChild(node);
}
//把携带着节点的文档碎片插入DOM树
document.body.appendChild(frag);

文档碎片在DOM树中是不存在的，把碎片插入DOM树实际上是插入了它携带的节点，文档碎片是一个看不见的容器。当然也可以创建一个div作为容器，和创建文档碎片道理一样，只要能避免n次现场更新就好，因为DOM树上任何一个节点更新时浏览器都会重新渲染页面，这意味着大量的样式数值计算

③getElementByxxx的性能差异

Id查询是最快的，TagName次之，ClassName最慢。
当然，一般情况下这些差异是可以忽略的，但移动端页面应该充分考虑，毕竟移动端没有PC这么好的条件。此外，把频繁使用的元素的引用保存一份可以减少不必要的DOM查找，从而提升性能。