萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 常用DOM整理

常用DOM整理

  js在操作DOM中存在著許多跨浏覽器方面的坑,本文花了我將近一周的時間整理,我將根據實例整理那些大大小小的“坑”。

  前言:

  html為document搭建了一棵DOM樹,這棵樹就是有一系列Node節點所構成的。他為我們定義了文檔的結構。

  Node類型:

  Node.ELEMENT_NODE(1); //元素節點較常用

  Node.ATTRIBUTE_NODE(2); //屬性節點較常用

  Node.TEXT_NODE(3); //文本節點較常用

  Node.CDATA_SECTION_NODE(4);

  Node.ENTITY_REFERENCE_NODE(5);

  Node.ENTITY_NODE(6);

  Node.PROCESSING_INSTRUCTION_NODE(7);

  Node.COMMENT_NODE(8);

  Node.DOCUMENT_NODE(9); //文檔節點較常用

  Node.DOCUMENT_TYPE_NODE(10);

  Node.DOCUMENT_FRAGMENT_NODE(11);

  Node.NOTATION_NODE(12);

  相關函數:

  1、取得節點:

  document.getElementById('element');

  document.getElementsByTagName('element'); 返回類數組對象

  document.getElementsByName('element'); 返回類數組對象

  document.getElementsByClassName('className') 返回類數組對象,IE7及以下並不支持;

  document.querySelectorAll('class' | 'element') 返回類數組對象

  2、遍歷節點

  查找子節點:element.childNodes 返回類數組對象

  查找第一個子節點:element.firstChild

  查找最後一個子節點:element.lastChild

  查找父元素:element.parentNode

  查找前一個兄弟元素: element.previousSibling

  查找後一個兄弟元素: element.nextSibling

  3、獲取節點信息

  獲取元素或者屬性節點的標簽名稱:elementNode.nodeName

  獲取文本節點的內容: textNode.nodeValue;

  獲取並設置元素節點的內容(可能會包含HTML標簽): elementNode.innerHTML

  獲取並設置元素節點的純文本內容:element.innerText(IE) | element.textContent(FF)

  獲取屬性節點的值: attrNode.getAttribute(AttrName);

  設置屬性節點的值: attrNode.setAttribute(AttrName,AttrValue);

  獲取節點的類型: node.nodeType;

  元素節點: 1;

  屬性節點: 2;

  文本節點: 3;

  文檔節點: 9;

  注釋節點: 8;

  4、操作節點

  創建元素節點: document.createElement('element');

  創建文本節點: document.createTextNode('text');

  創建屬性節點: document.createAttribute('attribute');

  刪除節點: node.remove();

  刪除子節點: parentNode.removeChild(childNode);

  插入節點: parentNode.appendChild(childNode); //插入到父節點的尾部

  parentNode.insertBefore(newNode,existingNode) //插入到已存在節點的前面;

  克隆節點: node.cloneNode([true]) //傳入true為深度復制

  替換節點: parentNode.replaceChild(newNode,oldNode);

  相關拓展:

  1、由於IE低版本浏覽器和其他浏覽器在處理DOM中存在不兼容,因此要做一些簡單的封裝處理。

  ?

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

  16

  17

  18

  19

  20

  21

  22

  23

  24

  25

  26

  27

  28

  29

  30

  31

  32

  33

  34

  35

  36

  37

  38

  39

  40//=================

  function getElementChildren(element) {

  var children = [],

  oldChildNodes = element.childNodes;

  for(var i=0, len=oldChildNodes.length; i

  if(oldChildNodes[i].nodeType == 1) {

  children.push(oldChildNodes[i]);

  }

  }

  return children;

  }

  //==================

  function getElementNext(element) {

  var next = element.nextSibling || null;

  if(next) {

  if(next.nodeType == 1) {

  return next;

  } else {

  return arguments.callee(next);

  }

  } else {

  throw new Error("下一個兄弟元素不存在!");

  }

  }

  //======================

  function getElementPrev(element) {

  var prev = element.previousSibling || null;

  if(prev) {

  if(prev.nodeType == 1) {

  return prev;

  } else {

  return arguments.callee(prev);

  }

  } else {

  throw new Error("上一個兄弟元素不存在!");

  }

  }

  2、操作DOM元素的樣式

  ?

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

  16

  17

  18

  19//=========================

  function getElementStyle(element,styleName) {

  if(typeof getComputedStyle != 'undefined') {

  return getComputedStyle(element,null)[styleName];

  } else {

  return element.currentStyle[styleName];

  }

  }

  //==========================

  function addClass(element,className) {

  element.className += className;

  }

  //==========================

  function removeClass(element,removeClassName) {

  var classStr = element.className;

  element.className = classStr.replace(removeClassName,'').split(/s+/).join(' ').replace(/^s+/,'').replace(/s+$/,'');

  }

  以上所述就是本文的全部內容了,希望大家能夠喜歡。

copyright © 萬盛學電腦網 all rights reserved