java script dom_javaScriptDOM增删查改系列之查找篇

使用javaScript进行DOM编程，必不可少的就是对DOM元素进行操作，各种复杂的操作说到底就是简单的增、删、查、改等基本操作的相互组合。今天我们就从四种基本操作的查找操作开始。

首先根据查找的范围大致上可以分为两种，一种是直接在document上进行查找，另一种是基于某一特定的元素进行查找。

第一种：基于document进行的查找。

这一类查找又可以分为两种情况，一种是通过不同get方法传入不同的参数，从而得到相应的DOM元素或DOM元素数组。这一类的方法主要有：

1、document.getElementById(id)。该方法通过传入元素的ID从而找到这个元素，返回的是一个DOM元素。

2、document.getElementsByClassName(className)。该方法通过传入元素的类名从而找到一系列含有该类名的元素，返回的是一个DOM元素数组。

3、document.getElementsByTagName(tagName)。该方法通过传入元素的标签名从而找到所有的标签名与参数相同的元素，返回的也是一个DOM元素数组。

4、document.getElementsByName(name)。该方法与我想象中的有所不同，传入name从而得到name名相同的元素，返回的也是一个DOM元素数组。这个name有必要说一下，这个name指的是DOM元素的一个属性，与Class类似，name属性常见于单选框，用于区分同一类按钮。或许这个方法更加合适的名字应该是getElementsByNameName()。

5、document.querySelectorAll(selector)。该方法传入的参数比较特殊，但该方法也十分人性化。你只需传入css选择器，便会得到符合这个选择器的元素。例如document.querySelectorAll("#outder .inner")便会获得ID名为outder元素下的所有的类名为inner的子元素。该方法返回的也是一个DOM元素数组。

6、document.querySelector(selector)。该方法与第5个方法类似，但是返回类型却不相同。该方法返回的是符合该选择器的第一个元素。也就是说该方法返回的是一个DOM元素，而不是一个元素数组。

基于document的查找的第二种情况是直接通过document的属性从而获得相应的元素。这一类属性主要有：

1、document.forms。注意没有括号，该属性的意思是获得文档下的所有表单。

2、document.images。获得所有的图片元素。

3、document.links。获得所有的超链接，即a标签元素。

4、document.title。获得文档的标题元素。title也是一个DOM元素。

5、document.scripts。获得文档所有标签名为script的元素。

6、document.body。获得body标签元素。

第二种，基于某一特定的DOM元素进行查找。

这类方法也可以分为两种情况，一种是通过get方法，另一种同样也是通过属性的方式获得。

通过get方法的情况主要是以下几种，与document的get方法不同，基于element的get方法更加少。

1、element.getElementsByTagName(tagName)。

2、element.getElementsByClassNmae(className)。

3、element.querySelector(selector)。

4、element.querySelectorAll(selector)。

常用的只有以上两种。

另外的一种情况是通过属性获得，这类情况与document的属性相比多了很多新属性。

1、element.childNodes。 获得某一元素的所有子元素，该属性值是一个DOM元素对象数组。

2、element.firstChild。获得某一元素的第一个子元素，属性值是一个DOM元素。

3、element.lastChild。获得某一个元素的最后一个子元素，属性值是一个DOM元素。

4、element.nextSibling。获得某一元素的下一个兄弟元素。形象的说法是“弟弟元素”。

5、element.previousSibling。获得某一元素的前一个兄弟元素。形象的说法是“哥哥元素”。

6、element.parentNode。获得某一元素的父元素，该父元素是直接父元素。属性值是一个DOM元素。

至此，对DOM元素的查找的方法已经介绍完了。