DOM精简教程

DOM精简教程

• 先来看一张简单的文档树
  
  很明显树的顶层节点是NodeA节点,接下来可以通过指定的合适节点移动到树中的任何点,结合以下的代码你可以更好的了解这棵树节点间的相互关系:
  NodeA.firstChild = NodeA1
  NodeA.lastChild = NodeA3
  NodeA.childNodes.length = 3
  NodeA.childNodes［0］ = NodeA1
  NodeA.childNodes［1］ = NodeA2
  NodeA.childNodes［2］ = NodeA3
  NodeA1.parentNode = NodeA
  NodeA1.nextSibling = NodeA2
  NodeA3.previousSibling = NodeA2
  NodeA3.nextSibling = null
  NodeA.lastChild.firstChild = NodeA3a
  NodeA3b.parentNode.parentNode = NodeA
  DOM定义对操作一个文档对象的节点结构提供了实用的方法,它提供了像执行对象插入,更新,删除,克隆等这些常用的方法。
  insertBefore()--在参考子节点之前插入一个新的子节点.如果参考的子节点为null,则新的子节点将作为调用节点的最后一个子节点插入。
  replaceChild()--在childNodes集合种使用指定的newChild来代替oldChild;如果代替成功,则返回oldChild;如果newChild是null,则只需删除oldChild即可。
  removeChild()--从节点的ChildNodes集合中删除removeChild指定的节点,如果删除成功,则返回删除的子节点。
  appendChild()--添加一个新节点到childNodes集合的末尾,如果成功,则返回新节点。
  cloneNode()--创建一个新的、复制的节点,并且如果传入的参数是true时,还将复制子节点,如果节点是一个元素,那么还将复制相应属性,返回新的节点。
  为了在一棵文档树中访问或者建立一个新的节点,可以用下面这些方法:
  getElementById()
  getElementsByTagName()
  createElement()
  createAttribute()
  createTextNode()
  

  ---

   DOM属性操作

 

属性/方法	描述
Document.createElement(tagName)	文档对象上的createElement方法可以创建由tagName指定的元素。如果以字符串串div作为方法参数，就会生成一个div元素
Document.createTextNode(text)	文档对象的createTextNode方法会创建一个包含静态文本的节点。
<element>.appendChild(childNode)	appendChild方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。例如：可以增加一个option元素，作为select元素的子节点。
<element>.getAttribute(name) <element>.setAttribute(name)	这些方法分别获得和设置元素中name属性的值。
<element>.insertBefore(newNode,targetNode)	这个方法将节点newNode作为当前元素的子节点插到targetNode元素前面。
<element>.removeAttribute(name)	这个方法从元素中删除属性name。
<element>.replaceChild(newNode,oldNode)	这个方法将节点oldNode替换位节点newNode。
<element>.hasChildnodes()	这个方法返回一个布尔值，指示元素是否有子元素。
<element>.cloneNode(true)	克隆当前元素，并返回新元素