🀢

元素节点

特征

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;
  }
}