跳转到主要内容
东方龙马 提交于 1 August 2011

前段时间曾在《JavaScript 与JQuery 常用方法比较》一文中对JQuery和JavaScipt常用的方法做了简要的分析和介绍,但是还不够全面,今天将较为全面地介绍一下JavaScript对DOM操作,本文也只是简要分析,更详细的内容可以自行查阅相关DOM手册,希望对您学习JavaSCript有所帮助。

查找节点

获取Id

document.getElementById('IdName') 返回对拥有指定 id 的第一个对象的引用。

获取标签

document.getElementsByTagName('TagName') 返回带有指定标签名的对象集合。

获取Name对象

document.getElementsByName('Name') 返回带有指定名称的对象集合。

获取元素的属性值

element.getAttribute('arrtributeName') 返回一个给定元素的一个给定属性节点的值。

检查元素是否含有子节点

hasChildNodes 返回值:有则返回True,无则返回False。

创建节点

创建元素节点

document.CreateElement(element) 将按照给定的标签创建一个新的元素节点,这个方法的返回值是一个指向新建元素的引用指针。

创建文本节点

document.cteateTextNode(text)

这个方法只有一个参数:新建文本节点所包含文本字符串。

举例:

reference = document.createTextNode("Drupal花园"); //添加一个名为“Drupal花园”的文本节点 alert(reference.nodeValue); //打印出新创建的文本节点的值

复制节点

cloneNode()

这个方法只有一个布尔类型的参数,它的可取值只能是true或者false。

reference = document.cloneNode(true); //新节点包含与被复制节点完全一样的节点;

reference = document.cloneNode(false); //新节点不包含任何子节点。如果被复制的节点是元素节点,这就意味着被复制节点里的所有文本节点将不会被复制(那些文本是一些子节点),但是属性节点将被复制。

插入节点

appendChild()

这个方法是将元素节点追加一个子几点

insertBefore()

将某个节点插入到另一个给定节点的前面

删除节点

removeChild()

这个方法将从一个给定元素里删除一个子节点

备注:

  • 当某个节点被removeChild()方法删除时,这个节点所包含的所有自己点将同时被删除。

替换节点

replaceChild()

这个方法将把一个给定元素里的一个子节点替换为另外一个子节点:

reference = element.replaceChild(newChild,oldChild)

设置属性节点

setAttribute()

这个方法将为给定节点新增一个属性值或者改变它现有属性的值。

DOM属性--节点的属性

nodeName

返回一个字符串,其内容是给定节点的名字

nodeType

节点类型(可取值是1-12的整数,其中前3种是最重要的,分别是ELEMNET_NODE,ATTRIBUTE_NODE,TEXT_NODE)

nodeValue

返回给定节点的当前值。

遍历节点树

childNodes

返回由给定元素节点的子节点组成的数组。

备注:

  • 返回的数组是一个节点的集合,集合中的每个节点都是一个节点对象,这些节点对象都含有nodeType、nodeName、nodeValue等常见的节点属性;
  • 属性节点和文本节点都不可能再包含任何子节点,因此他们的childNodes属性永远都是返回一个空数组;
  • 如果只想知道某个节点有没有子节点,可以使用hasChildNodes方法;
  • 获取子节点的个数,请使用childNodes.length;
  • 如果某个网页中上的document元素只有一个html子节点,那么document.childNodes[0].nodeName的值将是“HTML”。

firstChild

返回一个给定节点的第一个子节点

lastChild

返回一个给定节点的最后一个子节点

previousSibling

返回一个给定节点的前一个子节点

nextSibling

返回一个给定节点的下一个子节点

parentNode

返回一个给定节点的父节点

 

板块