原生JS操作DOM节点

以前也学过JS，但都是那种随便学的一点，东一笤帚西一扫帚，没过几天就忘得一干二净，今后就踏踏实实的来点干货吧。

1、获取节点元素。

先自定义了一些DOM，如下：

        <div class="div1" id="div1" name="123">
            1
            <div class="div1">
                2
                <div class="div1">
                    3
                </div>
            </div>
        </div>
        <div class="div2" id="div2">
            4
            <div class="div2">
               5
            </div>
        </div>
        <input name="input1" type="text" value="rrr"/>
        <input name="input2" type="text" />

根据ID获取，只返回一个元素

var id = document.getElementById("div1");

alert(id.innerHTML);

 

注：原生的JS获取DOM元素（div,ul等）的值都是innerHTML，返回的是这个节点下的所有的html元素。

 根据类名获取元素，返回的是一个元素数组，有length属性。

var name = document.getElementsByClassName("div1")[0];
alert(name.innerHTML);

 

如果有多个div的类都是一样的，那么返回的数组元素的位置是按照第一个div--第一个div的子节点，直到所有子节点都完成后，再返回来执行其兄弟节点。

var name = document.getElementsByClassName("div1")[2];
alert(name.innerHTML);

 

根据元素标签名获取元素，返回的结果也是一个数组，元素位置也是按照子集优先的原则（同上）

var name2 = document.getElementsByTagName("div")[2];
alert(name2.innerHTML);

根据元素的那么属性获取元素，返回的也是一个数组，主要用于<input>标签，注意，在获取值的时候只能用value

var name3 = document.getElementsByName("input1")[0];
alert(name3.value);

需要注意的是：可以通过给div等标签加上name属性，虽然编译器里不识别，但是运行的时候照样可以通过document.getElementsByName（）方式获得，返回的也是一个数组，另外，取值的时候不能value,而是用innerHTML

var name3 = document.getElementsByName("123")[0];
alert(name3.innerHTML);