javascript DOM 获取节点

1.获取元素节点：

 1.1)通过元素节点的id属性获取：

       语法：document.getElementById("元素id属性的值");

       例如：

      

1.2）根据元素的名称获取,获取的是所有为该名称的元素节点组成的数组，可以用数组的方法操作该节点数组：

         语法：document.getElementsByTagName("元素名称");

         例如：

          

           结果：

         

1.3）根据元素节点的name属性获取，获取的也是一个由具有相同name属性值得元素组成的数组，可以用操作数组的方式操作：

         语法:document.getElementsByName("name属性的值");

         示例:

          

           显示结果一次为：

                               

         1.4）三种方法比较：

1.4.1）getElementById是document的方法，用于获取整个文档特定id的元素

1.4.2）而getElementsByTagName和getElementsByName是Node接口的方法，任何节点都具有该方法，都可以使用该方法

1.4.3）示例：

                 

                       

             结果一次为：

                                         

  2.获取属性节点：获取属性节点的目的就是操作元素的属性（读或者写），属性节点即元素节点的属性，所以可以像操作属性一样去操作属性节点

          2.1)方法：先获取对应的元素节点（此处表示为el,再用el.属性节点名称或者el["属性节点名称"]

          2.2)注意：在获取元素节点的class属性节点时，要写为el.className

          2.3)示例

       

3.获取元素节点的子节点：

3.1）获取元素节点的所有子节点:采用元素的childNodes方法

3.1.1）示例：

         

3.2）获取元素节点的指定子节点，采用元素的getElementByTagName("标签名称")：

3.2.1）示例：

           

3.3）获取元素节点的第一个和最后一个子节点，采用元素的firstChild方法和lastChild方法：

3.3.1)示例:

         

4.获取文本节点：

4.1)获取文本节点主要就是对文本进行读写操作

4.2)方法：

4.2.1)由于文本节点是元素节点的子节点，所以可以采用获取元素节点的子节点的方法获取，具体采用哪个方法，视情况而定，通过该方法得到的还是节点。

4.2.1.1）示例：

结果：

4.2.2）如果想要读写文本节点的内容，还可以采用元素的nodeValue方法，获取到节点的内容

4.2.2.1)示例：