元素节点

特征

• nodeType 的值为1
• nodeName 值为元素的名称，也可以是 tagName 属性
• nodeValue 值为 null
• parentNode 是 Document 或 Element
• 子节点可以是 Element 、 Text 、 Comment 、 ProcessingInstruction 、 CDATASection

所有的 HTML 元素都是 HTMLElement 类型或者其子类的实例， HTMLElement 又是 Element 或者 EntityReference ，在继承 Element 类型时又添加一些新属性。

• id 元素在文档中的唯一标识符
• title 有关元素的附加说明，一般通过工具提示条显示出来
• lang 元素内容的语言编码，很少使用
• dir 语言的方向，值为"ltr （从左到右）"、"rtl"（从右到左），很少使用
• className 与元素的 class 特性对应，即为元素指定的 css 类样式

访问元素

getElementById() 方法

document.getElementById(ID);

参数 id 为文档中的元素对应的 id 属性值。如果文档中不存在指定元素，则返回 null 。该方法只适用于 Document 。

// <div id="box">盒子</div>
var box = document.getElementById('box');
var info = 'nodeName: ' + box.nodeName;
info += '\rnodeType: ' + box.nodeType;
info += '\rparentNode: ' + box.parentElement.nodeName;
info += '\rchildNode: ' + box.childNodes[0].nodeName;
alert(info);

getElementsByTagName() 方法

document.getElementsByTagName(tagName);

遍历元素

获取指定元素的第一个元素

使用 parentNode 、 nextSibling 、 previousSibling 、 firstChild 、 lastChild 属性可以遍历文档树中每一个元素

function first(e) {
  var e = e.firstChid;
  while (e && e.nodeType != 1) {
    e = nextSibling;
  }
  return e;
}

获取指定元素的最后一个元素

function last(e) {
  var e = e.lastChild;
  while (e && e.nodeType != 1) {
    e = e.previousSibling;
  }
  return e;
}

获取多级父元素

function parent(e, n) {
  var n = n || 1;
  for (var i = 0; i < n; i++) {
    if (e.nodeType == 9) break;
    if (e != null) e = e.parentNode;
  }
  return e;
}

获取指定元素的上一个元素

function pre(e) {
  var e = e.previousSibling;
  while (e && e.nodeType != 1) {
    e = e.previousSibling;
  }
  return e;
}

获取下一个元素

function next(e) {
  var e = e.nextSibling;
  while (e && ｅ.nodeType != 1) {
    e = e.nextSibling;
  }
  return e;
}

对于元素间的空格， IE 9 及以前的版本不会返回文本节点，而其它的浏览器都会返回文本节点。则有了下面几个属性：

• childElementCount 返回子元素的个数，不包括文本节点和注释
• firstElementChild 指向第一个子元素
• lastElementChild 指向最后一个之元素
• previousElementSibling 指向前一个兄弟元素
• nextElementSibling 指向后一个相邻兄弟元素

创建元素

createElement() 能够根据参数添加指定的标签名创建一个新的元素，并返回这个元素的引用。

var element = document.createElement('tagName');

复制节点

cloneNode() 可以复制指定节点。 cloneNode() 会复制原元素的一切，包括 id ，然而，一个文档只能有一个 id ，所以就需要改一个。

当创建大量相同的节点时，使用节点克隆更有效率。

function tableClonedDOM() {
  var i,
    table,
    thead,
    tbody,
    tr,
    th,
    td,
    a,
    ul,
    li,
    oth = document.createElement('th'),
    otd = document.createElement('td'),
    otr = document.createElement('li'),
    oul = document.createElement('ul');
  tbody = document.createElement('tbody');
  for (var i = 0; i <= 1000; i++) {
    tr = ort.cloneNode(false);
    td = otd.cloneNode(false);
    td.appendChild(document.createTextNode(i % 2 ? 'yes' : 'no'));
    tr.appendChild(td);
    td = otd.cloneNode(false);
    td.appendChild(document.createTextNode(i));
    tr.appendChild(td);
    td = otd.cloneNode(false);
    td.appendChild(document.createTextNode('my name is # ' + i));
    tr.appendChild(td);
    // ...
  }
  // ....
}

插入元素

appendChild() 方法

将元素添加到文档树之后，浏览器会直接呈现该元素，之后对该元素做的任何修改都会直接在浏览器中显示。

insertBefore() 方法

insertBefore(newChild, refChild);

删除元素

nodeObject.removeChild(node);

封装移除节点函数

function remove(e) {
  if (e) {
    var _e = e.parentNode.removeChild(e);
    return _e;
  }
  return undefined;
}

移除某节点下所有节点

function empty(e) {
  while (e.firstChild) {
    e.removeChild(e.firstChild);
  }
}

替换元素

nodeObject.replaceChild(new_note, old_node);

参数 new_node 为指定新的节点， old_node 是被替换的旧节点。如果替换成功，则返回被替换的节点，若不成功则返回 null 。

// <div id="box1">盒子1
//   <div id="box2">盒子2</div>
//       <div id="box3">盒子3</div>
//   </div>
//   <div id="box4">盒子4
//       <div id="box5">盒子5</div>
//   </div>
// </div>

var box1,
  box2,
  box3,
  box4,
  array = [];
for (var i = 0; i < 5; i++) {
  array[i] = document.getElementById('box' + (i + 1));
}
var a = array[0].removeChild(array[1]);
alert(a.innerText);
var b = array[3].replaceChild(a, array[4]);
alert(b.innerText);

获取焦点元素

在文档中查询哪个元素获得了焦点，以及确认文档是否获得了焦点，对提升 Web 应用的无障碍性非常重要。

HTML 5 新增了 document.activeElement 属性可以引用 DOM 中当前获得焦点的元素。元素获取焦点的方式包括：页面载入、用户输入、在脚本调入 focus() 方法。

在默认情况下，文档刚加载完成时， document.activeElement 引用的是 document.body 元素，文档加载期间， document.activeElement 的值为 null 。

检查包含节点

contains() 是 IE 私有的方法，用来检测某个节点是不是另一个节点的子代。该方法接受一个参数，指定检测的后代节点。

DOM Level 3 定义了 compareDocumentPosition() 方法，该方法也能够确定节点间的关系。用法与 contains() 相同，但是返回值不同。

compareDocumentPosition() 方法返回一个整数，用来描述两个节点在文档中的位置。

• 1 没关系，两个节点不在同一文档
• 2 第一个节点位于第二个节点后
• 4 第一个节点定位在第二个节点前
• 8 第一个节点在第二个节点内
• 16 第二个节点在第一个节点内
• 32 没有关系，或者说两个节点是同一个节点的两个属性

function contains(refNode, otherNode) {
  if (
    typeof refNode.contains === 'function' &&
    (!client.engine.webkit || client.engine.webkit >= 522)
  ) {
    return refNode.contains(otherNode);
  } else if (typeof refNode.compareDocumentPosition === 'function') {
    return !!(refNOde.compareDocumentPosition(otherNode) & 16);
  } else {
    var node = otherNode.parentNode;
    do {
      if (node == refNode) {
        return true;
      } else {
        node = node.parentNode;
      }
    } while (node !== null);
    return false;
  }
}