Table of Contents generated with DocToc

节点操作

因为 DOM 的存在，这使我们可以通过 JavaScript 来获取、创建、修改、或删除节点。

NOTE：下面提供的例子中的 element 均为元素节点。

获取节点

父子关系

  • element.parentNode
  • element.firstChild/element.lastChild
  • element.childNodes/element.children

兄弟关系

  • element.previousSibling/element.nextSibling
  • element.previousElementSibling/element.nextElementSibling

通过节点直接的关系获取节点会导致代码维护性大大降低（节点之间的关系变化会直接影响到获取节点），而通过接口则可以有效的解决此问题。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>ELEMENT_NODE & TEXT_NODE</title>
  6. </head>
  7. <body>
  8.   <ul id="ul">
  9.     <li>First</li>
  10.     <li>Second</li>
  11.     <li>Third</li>
  12.     <li>Fourth</li>
  13.   </ul>
  14.   <p>Hello</p>
  15.   <script type="text/javascript">
  16.     var ulNode = document.getElementsByTagName("ul")[0];
  17.     console.log(ulNode.parentNode);             //<body></body>
  18.     console.log(ulNode.previousElementSibling); //null
  19.     console.log(ulNode.nextElementSibling);     //<p>Hello</p>
  20.     console.log(ulNode.firstElementChild);      //<li>First</li>
  21.     console.log(ulNode.lastElementChild);       //<li>Fourth</li>
  22.   </script>
  23. </body>
  24. </html>

NTOE：细心地人会发现，在节点遍历的例子中，body、ul、li、p节点之间是没有空格的，因为如果有空格，那么空格就会被当做一个TEXT节点，从而用ulNode.previousSibling获取到得就是一个空的文本节点，而不是 <li>First</li> 节点了。即节点遍历的几个属性会得到所有的节点类型，而元素遍历只会得到相对应的元素节点。一般情况下，用得比较多得还是元素节点的遍历属性。

实现浏览器兼容版的element.children

有一些低版本的浏览器并不支持 element.children 方法，但我们可以用下面的方式来实现兼容。

  1. <html lang>
  2. <head>
  3.   <meta charest="utf-8">
  4.   <title>Compatible Children Method</title>
  5. </head>
  6. <body id="body">
  7.   <div id="item">
  8.     <div>123</div>
  9.     <p>ppp</p>
  10.     <h1>h1</h1>
  11.   </div>
  12.   <script type="text/javascript">
  13.     function getElementChildren(e){
  14.       if(e.children){
  15.         return e.children;
  16.       }else{
  17.         /* compatible other browse */
  18.         var i, len, children = [];
  19.         var child = element.firstChild;
  20.         if(child != element.lastChild){
  21.           while(child != null){
  22.             if(child.nodeType == 1){
  23.               children.push(child);
  24.             }
  25.             child = child.nextSibling;
  26.           }
  27.         }else{
  28.           children.push(child);
  29.         }
  30.         return children;
  31.       }
  32.     }
  33.     /* Test method getElementChildren(e) */
  34.     var item = document.getElementById("item");
  35.     var children = getElementChildren(item);
  36.     for(var i =0; i < children.length; i++){
  37.       alert(children[i]);
  38.     }
  39.   </script>
  40. </body>
  41. </html>

NOTE：此兼容方法为初稿，还未进行兼容性测试。

接口获取元素节点

  • getElementById
  • getElementsByTagName
  • getElementsByClassName
  • querySelector
  • querySelectorAll
API 只作用于 document 唯一返回值 live
getElementById √ √
getElementsByTagName √
getElementsByClassName √
querySelectorAll
querySelector √
getElementById

获取文档中指定 id 的节点对象。

  1. var element = document.getElementById('id');
getElementsByTagName

动态的获取具有指定标签元素节点的集合（其返回值会被 DOM 的变化所影响，其值会发生变化）。此接口可直接通过元素而获取，不必直接作用于 document 之上。

  1. // 示例
  2. var collection = element.getElementsByTagName('tagName');
  4. // 获取指定元素的所有节点
  5. var allNodes = document.getElementsByTagName('*');
  7. // 获取所有 p 元素的节点
  8. var elements = document.getElementsByTagName('p');
  9. // 取出第一个 p 元素
  10. var p = elements[0];
getElementsByClassName

获取指定元素中具有指定 class 的所有节点。多个 class 可的选择可使用空格分隔，与顺序无关。

  1. var elements = element.getElementsByClassName('className');

NOTE：IE9 及一下版本不支持 getElementsByClassName

兼容方法

  1. function getElementsByClassName(root, className) {
  2.   // 特性侦测
  3.   if (root.getElementsByClassName) {
  4.     // 优先使用 W3C 规范接口
  5.     return root.getElementsByClassName(className);
  6.   } else {
  7.     // 获取所有后代节点
  8.     var elements = root.getElementsByTagName('*');
  9.     var result = [];
  10.     var element = null;
  11.     var classNameStr = null;
  12.     var flag = null;
  14.     className = className.split(' ');
  16.     // 选择包含 class 的元素
  17.     for (var i = 0, element; element = elements[i]; i++) {
  18.       classNameStr = ' ' + element.getAttribute('class') + ' ';
  19.       flag = true;
  20.       for (var j = 0, name; name = className[j]; j++) {
  21.         if (classNameStr.indexOf(' ' + name + ' ') === -1) {
  22.           flag = false;
  23.           break;
  24.         }
  25.       }
  26.       if (flag) {
  27.         result.push(element);
  28.       }
  29.     }
  30.     return result;
  31.   }
  32. }
querySelector / querySelectorAll

获取一个 list （其返回结果不会被之后 DOM 的修改所影响，获取后不会再变化）符合传入的 CSS 选择器的第一个元素或全部元素。

  1. var listElementNode = element.querySelector('selector');
  2. var listElementsNodes = element.querySelectorAll('selector');
  4. var sampleSingleNode = element.querySelector('#className');
  5. var sampleAllNodes = element.querySelectorAll('#className');

NOTE: IE9 一下不支持 querySelector 与 querySelectorAll

创建节点

创建节点 -> 设置属性 -> 插入节点

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

修改节点

textContent

获取或设置节点以及其后代节点的文本内容（对于节点中的所有文本内容）。

  1. element.textContent; // 获取
  2. element.textContent = 'New Content';

NOTE：不支持 IE 9 及其一下版本。

innerText （不符合 W3C 规范）

获取或设置节点以及节点后代的文本内容。其作用于 textContent 几乎一致。

  1. element.innerText;

NOTE：不符合 W3C 规范，不支持 FireFox 浏览器。

FireFox 兼容方案

  1. if (!('innerText' in document.body)) {
  2.   HTMLElement.prototype.__defineGetter__('innerText', function(){
  3.     return this.textContent;
  4.   });
  5.   HTMLElement.prototype.__defineSetter__('innerText', function(s) {
  6.     return this.textContent = s;
  7.   });
  8. }

插入节点

appendChild

在指定的元素内追加一个元素节点。

  1. var aChild = element.appendChild(aChild);

insertBefore

在指定元素的指定节点前插入指定的元素。

  1. var aChild = element.insertBefore(aChild, referenceChild);

删除节点

删除指定的节点的子元素节点。

  1. var child = element.removeChild(child);

innerHTML

获取或设置指定节点之中所有的 HTML 内容。替换之前内部所有的内容并创建全新的一批节点（去除之前添加的事件和样式）。innerHTML 不检查内容，直接运行并替换原先的内容。

NOTE：只建议在创建全新的节点时使用。不可在用户可控的情况下使用。

  1. var elementsHTML = element.innerHTML;

存在的问题

  • 低版本 IE 存在内存泄露
  • 安全问题（用户可以在名称中运行脚本代码）