原生JS--DOM的操作

一、获取元素

案例1：

    <ul class="box">
        <li>01</li>
        <li id='_2'>02</li>
        <li>03</li>
    </ul>
    <form>
        <input type="text" name="uName">
        <input type="button" value="按钮">
        <input type="button" value="按钮">
    </form>

1.1 普通获取

// 通过id属性名获取
console.log(document.getElementById('_2'));
// 通过类名获取
console.log(document.getElementsByClassName('box'));
// 通过元素名获取
console.log(document.getElementsByTagName('li'));
// 通过元素name属性名获取
console.log(document.getElementsByName('uName'));
// 通过选择器获取
console.log(document.querySelector('input[value=按钮]'));
console.log(document.querySelectorAll('input[value=按钮]'));
// 对于form包裹的表单元素--form元素[表单元素的name属性值]
var form = document.querySelector('form');
console.log(form['uName']);

通过观察，我们发现：

1. get后面Element获取一个元素，Elements获取满足条件的元素集合。
2. querySelector获取满足条件的第一个元素;
   querySelectorAll获取满足条件的元素集合。
3. querySelector和querySelectorAll获取的是非动态的元素/集合。如下：

var ul = document.querySelector('ul'),
    lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
   
    ul.appendChild(document.createElement