获取HTML DOM节点元素的方法的总结

在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、内容等。如何获取要更新的元素,是首先要解决的问题。
令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过):
1. 通过顶层document节点获取:
(1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。
如今,已经出现了如prototype、Mootools等多个JavaScript库,它们提供了更简便的方法:$(id),参数仍然是节点的id。这个方法可以看作是document.getElementById()的另外一种写法,不过$()的功能更为强大,具体用法可以参考它们各自的API文档。
(2)document.getElementsByName(elementName):该方法是通过节点的 name获取节点,从名字可以看出,这个方法返回的不是一个节点元素,而是具有同样名称的节点数组。然后,我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。
例如:在HTML中checkbox和radio都是通过相同的name属性值,来标识一个组内的元素。如果我们现在要获取被选中的元素,首先获取改组元素,然后循环判断是节点的checked属性值是否为true即可。

(3)document.getElementsByTagName(tagName):该方法是通过节点的Tag获取节点,同样该方法也是返回一个数组,例如:document.getElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前,一般都是知道节点的类型的,所以使用该方法比较简单。但是缺点也是显而易见,那就是返回的数组可能十分庞大,这样就会浪费很多时间。那么,这个方法是不是就没有用处了呢?当然不是,这个方法和上面的两个不同,它不是document节点的专有方法,还可以应用其他的节点,下面将会提到。
2、通过父节点获取:
(1)parentObj.firstChild:如果节点为已知节点(parentObj)的第一个子节点就可以使用这个方法。这个属性是可以递归使用的,也就是支持 parentObj.firstChild.firstChild.firstChild...的形式,如此就可以获得更深层次的节点。
(2)parentObj.lastChild:很显然,这个属性是获取已知节点(parentObj)的最后一个子节点。与firstChild一样,它也可以递归使用。
在使用中,如果我们把二者结合起来,那么将会达到更加令人兴奋的效果,即:parentObj.firstChild.lastChild.lastChild...
(3)parentObj.childNodes:获取已知节点的子节点数组,然后可以通过循环或者索引找到需要的节点。
注意:经测试发现,在IE7上获取的是直接子节点的数组,而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。
(4)parentObj.children:获取已知节点的直接子节点数组。注意:经测试,在IE7上,和childNodes效果一样,而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。
(5)parentObj.getElementsByTagName(tagName):使用方法不再赘述,它返回已知节点的所有子节点中类型为指定值的子节点数组。例如:parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。
3、通过临近节点获取:
(1)neighbourNode.previousSibling:获取已知节点(neighbourNode)的前一个节点,这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
(2)neighbourNode.nextSibling:获取已知节点(neighbourNode)的下一个节点,同样支持递归。
4、通过子节点获取:
(1)childNode.parentNode:获取已知节点的父节点。
上面提到的方法,只是一些基本的方法,如果使用了Prototype等JavaScript库,可能还获得其他不同的方法,例如通过节点的class获取等等。不过,如果能够灵活运用上面的各种方法,相信应该可以应付大部分的程序  
 
 
 
 

Dom对象的常用方法:  (1)getElementById() 查询给定ID属性值的元素,返回该元素的元素节点   1、  查询给定ID属性值的元素,返回该元素的元素节点。也称为元素对象。 
        2、  因为在一个html页面中id的值是唯一的,所以返回值也是唯一的。所以方法的名称为getElementById()而不是getElementsById() 
        3、  该方法只能用于document对象,类似与java的static关键字。   (2)getElementsByName()查找给定name属性的所有元素,这个方法将返回一个节点集合,也可以称为对象集合   1、查找给定name属性的所有元素,这个方法将返回一个节点集合,也可以称为对象集合。 
        2、这个集合可以作为数组来对待,length属性的值表示集合的个数。       3、因为在html页面中,name不能唯一确定一个元素,所以方法的名称为getElementsByName而不是getElementByName   (3)getElementsByTagName()查询给定标签名的所有元素   1、查询给定标签名的所有元素 
2、因为在html页面中,标签名不是唯一的,所以返回值为节点的集合。 
        3、这个集合可以当做数组来处理,length属性为集合里所有元素的个数         4、可以有两种形式来执行这个方法:                     1、var elements =document.getElementsByTagName(tagName);                      2、var elements = element.getElementsByTagName(tagName); 
        5、从这两种方法可以看出持有这个方法的对象并不一定是整个文档对象(document).也可以是某一个元素节点。   (4)hasChildNodes()该方法用来判断一个元素是否有子节点,返回值为true或者false   1、该方法用来判断一个元素是否有子节点         2、返回值为true或者false        3、文本节点和属性节点不可能再包含子节点,所以对于这两类节点使用 ChildNodes()方法 返回值永远为false.         4、如果hasChildNodes()返回值为false,则childNodes,firstChild,lastChild将为空数组或者空字符串。   (5)nodeName   1.如果节点是元素节点,nodeName返回元素的名称   2.如果给定节点为属性节 点,nodeName返回属性的名称   3.如果给定节点为文本节点,nodeName返回为#text的字符串  (6)nodeType   1、元素节点类型  值为1         2、属性节点类型  值为2 




        3、文本节点类型  值为3  (7)nodeValue   1.如果给定节点是属性节点,返回值是这个属性的值 
        2.如果给定节点是文本节点,返回值是这个文本节点的内容           3.如果给定节点是元素节点,返回值是null  (8)replaceChild()   1.把一个给定父元素里的一个子节点替换为另外一个子节点   2.var reference = element.replaceChild(newChild,oldChild)         3.返回值指向已经被替换掉的那个子节点的引用  (9)getAttribute()   1、返回一个给定元素的给定属性的节点的值         2、var attributeValue = element.getAttribute(attributeName)         3、给定属性的名字必须以字符串的形式传递给该方法         4、给定属性的值将以字符串的形式返回         5、通过属性获取属性节点  (10)setAttribute()   1、将给定元素添加一个新的属性或改变它现有属性的值      2、element.setAttribute(attributeName,attributeValue);         3、属性的名字和值必须以字符串的形式传递 
        4、如果这个属性已经存在,那么值将被attributeValue取代         5、如果这个属性不存在,那么先创建它,再给他赋值  (11)createElement()   1、按照给定的标签名创建一个新的元素节点,方法的参数为被创建的元素的名称         2、var reference = document.createElement(elementName);   3、方法的返回值指向新建节点的引用,返回值是一个元素节点,所以nodeType 为1       4、新建的节点不会自动添加到文档里,只是存在于document里一个游离的对象  (12)createTextNode()   1、创建一个包含给定文本的新文本节点 
        2、这个方法的返回值指向这个新建的文本节点的引用         3、该方法有一个参数:新建文本节点的文本内容         4、它是一个文本节点,所以nodeType值为3 
        5、新建的文本对象不会自动添加到文档里,属于游离态的对象。  (13)appendChild()    1、为给定元素增加一个子节点 
                    var newreference = element.appendChild(newChild);          2、给定子节点newChild将成为element的最后一个节点          3、方法的返回值指向新增节点的引用 
         4、该方法通常与createElement()与createTextNode()一起使用          5、新节点可以追加给文档中的任何一个元素(不是属性和文本)  (14)insertBefore()    1、把一个给定节点插入到一个给定元素子节点的前面 
         2、var reference = element.insertBefore(newNode,targetNode) 


         3、newNode节点将作为element的子节点出现,并在targetNode节点的前面 
         4、节点targetNode必须是element的一个子节点 
         5、该方法通常与createElement和createTextNode结合使用  (15)removeChild()    1、从给定的元素里删除一个子节点 
       2、var reference = element.removeChild(node)             3、返回值指向已经被删除的子节点的引用              4、当某个子节点被删除时,这个子节点所包含的子节点也被删除掉 
             5、如果想删除一个子节点,但不知道父节点,可以使用parentNode属性  (16)childNodes()    1、返回一个数组,这个数组是由给定节点的子节点组成的。          2、var nodeList = node.childNodes()          3、文本节点和属性节点不可能再包含子节点,所以他们的childNodes()方法返回一个空的数组 
         4、如果想知道这个节点有没有子节点可以利用hasChildNodes方法。          5、一个节点的子节点有多少个可以调用数组的length来得到。          6、如果这个节点还有子节点,那么这个节点肯定是元素节点  (17)firstChild           1、该属性返回给定节点的第一个子节点              2、var reference = node.firstChild 
             3、文本节点和属性节点不包括任何子节点,所以返回值为null              4、node.firstChild=node.childNodes[0]  (18)lastChild    1、该属性返回给定节点的最后一个子节点       2、var reference = node.lastChild  (19)nextSibling    1. 返回给定节点的下一个兄弟节点  (20)parentNode    1、返回给定元素节点的父节点         2、document没有父节点  (21)previousSibling    1.返回给定节点的上一个兄弟节点  (22)innerHTML    1. 用来读写某个元素中的HTML内容  (23)window.onload    1、在页面上所有的数据加载完以后触发该方法 
         2、这样做的好处是,有时候一些JS函数要用到页面上的一些数据,但是此时有些数据还没有加载进来z。这个时候触发函数,就会报一些异常。所以用window.onload方法可以确保数据安全落地。

原文地址:https://www.cnblogs.com/hl-520/p/4255954.html