DOM笔记

2009-04-07 20:12:07

技术资料 DOM

一、节点信息
1、nodeName
  此属性可返回节点的名称,根据其类型。
  语法:currentNode.nodeName
  元素节点的nodeName是标签名称,属性节点的nodeName是属性名称,文本节点的nodeName永远是#text。
2、nodeType
  此属性可返回节点的节点类型。
  语法:currentNode.nodeType
  元素节点的nodeType为1,属性节点的nodeType为2,文本节点的nodeType为3。
3、nodeValue
  此属性可设置或返回某节点的值,根据其类型。
  语法:currentNode.nodeValue
  对于文本节点,nodeValue属性包含文本,对于属性节点,nodeValue属性包含属性值,nodeValue属性对于元素节点是不可用的。

二、节点获取:
1、通过顶层document节点
(1)getElementById()
  此方法可返回对拥有指定 ID 的第一个对象的引用。
  语法:document.getElementById(id)
(2)getElementsByName()
  此方法可返回带有指定名称的对象的集合。
  语法:document.getElementsByName(name)
  因为一个文档中的name属性可能不唯一,getElementsByName()方法返回的是元素的数组,而不是一个元素。
(3)dgetElementsByTagName()
  此方法可返回带有指定标签名的对象的集合。
  语法:document.getElementsByTagName(tagname)
  如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。
2、通过引用父子节点:
(1)parentNode
  此属性可返回指定节点的父节点。
  语法:currentNode.parentNode
(2)childNodes
  此属性可返回指定节点的子节点的节点列表。
  语法:currentNode.childNodes
  可使用 length 属性来计算一个节点列表中节点的数目。
(3)firstChild
  此属性可返回指定节点的首个子节点。
  语法:currentNode.firstChild
(4)lastChild
  此属性可返回指定节点的最后一个子节点。
  语法:currentNode.lastChild
3、通过引用相邻节点:
(1)previousSibling
  此属性可返回某节点之前紧跟的节点(处于同一树层级)。
  语法:currentNode.previousSibling
(2)childNodes
  此属性可返回某个元素之后紧跟的元素(处于同一树层级中)。
  语法:currentNode.nextSibling

三、节点操作:
1、createElement()
  此方法可创建元素节点。
  语法:document.createElement(name)
  返回值:新创建的Element节点,具有指定的标签名。
2、createTextNode()
  此方法可创建文本节点。
  语法:document.createTextNode(data)
  返回值:新创建的Text节点,表示指定的data字符串。
3、appendChild()
  此方法可向节点的子节点列表的末尾添加新的子节点。
  语法:parentNode.appendChild(newNode)
  返回值:新加入的节点。
4、insertBefore()
  此方法可在已有的子节点前插入一个新的子节点。
  语法:parentNode.insertBefore(newNode,referenceNode)
  返回值:新加入的节点。
5、replaceChild()
  此方法可将某个子节点替换为另一个。
  语法:parentNode.replaceChild(newNode,oldNode)
  返回值:新加入的节点。
6、cloneNode()
  此方法可创建指定的节点的精确拷贝。
  语法:currentNode.cloneNode(include_all)
  include_all:布尔型,必需的。假如逻辑参数被设置为真,它还将递归复制当前节点的所有子孙节点。否则,它只复制当前节点。
  返回值:当前节点的副本。返回的节点不属于文档树,它的parentNode属性为null。
7、removeChild()
  此方法可从子节点列表中删除某个节点。
  语法:parentNode.removeChild(childNode)
  返回值:如删除成功,此方法可返回被删除的节点,如失败,则返回NULL。

四、属性操作
1、getAttribute()
  此方法通过名称获取属性的值。
  语法:currentNode.getAttribute(name)
2、setAttribute()
  此方法创建或改变某个新属性。
  语法:currentNode.setAttribute(name,value)
  该方法把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。
3、removeAttribute()
  此方法删除指定的属性。
  语法:currentNode.removeAttribute(name)
  删除不存在的属性或没有设置但具有默认值属性的操作将被忽略。