前段时间曾在《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
返回一个给定节点的父节点
回复