JavaScript DOM文档对象

一、节点

1. 文本节点，IE8以下空格节点获取不到。
2. 元素节点 div。
3. 属性节点 class、id、value。
4. 注释节点

<div id="wrap">
    <div class="position">
        <div id="box" class="box1" data-title="这也是节点" abc="133">
            <!-- <div>
                <img src="1.jpg" />
            </div> -->
            你好吗！！！
            <span id="my-span">这是个span</span>
            <p>这是一个p标签</p>
            <ul>
                <li>这是li标签1</li>
                <li>这是li标签2</li>
                <li>这是li标签3</li>
            </ul>
        </div>
        <div id="box2"></div>
    </div>
</div>

二、获取节点

1. 获取子代节点（动态获取）。ele.childNodes：文本节点、元素节点。ele.children：只获取元素节点。
2. 获取第一个子代节点。ele.firstChild：返回第一个包括文本节点和注释节点。ele.firstElementChild：获取第一个元素节点。
3. 获取最后一个子代节点。ele.lastChild：获取到文本和注释节点。ele.lastElementChild：获取最后一个元素节点。
4. 获取父亲节点。ele.parentNode：获取父亲节点。ele.offsetParent：找到定位父级。
5. 下一个兄弟节点。ele.nextSibling：获取到下一个节点，包括文本、注释节点。ele.nextElementSibling：只获取元素节点。
6. 上一个兄弟节点。ele.previousSibling：获取到下一个节点，包括文本、注释节点。ele.previousElementSibling：只获取元素节点。
7. 获取子元素节点的数量。ele.childElementCount。

三、节点的操作

1. 创建节点：document.createElement('nodename')，放标签名，创建元素节点，创建节点是document的方法，创建完的节点可以直接进行dom操作。
2. 创建文本节点：createTextNode。
3. 删除节点：parentNode.removeChild(node)，删除节点只能从父级开始删除，不能自己删除自己。
4. 克隆节点：cloneNode()，克隆只克隆元素本身还有元素节点，不会克隆事件，可以接受一个布尔类型，若是true，则克隆子孙元素。
5. 添加节点：parentNode.appendChild(node)，只能从父级节点开始添加，添加位置在最后的子节点后面。
6. 替换节点：parentNode.replaceChild(new, old)，第一个用来替换新元素，第二个被替换元素。
7. 在节点前添加节点：parentNode.insertBefore(new, old)，第一个用来插入的新元素，第二个在这个元素前插入。

var oBox = document.getElementById('box'),
    oSpan = document.getElementById('my-span');
    oBox.onclick = function(){
        alert(1)
    }

    var oBox2 = oBox.cloneNode(true);
    wrap.appendChild(oBox2);
    console.log(oBox2)

var oP = document.createElement('p');
oP.innerHTML = '我是一个p标签';

oP.onclick = function() {
    alert('我是p标签的点击事件')
}
oBox.appendChild(oP);
        
var oText = document.createTextNode('我很好！！！');
oBox.appendChild(oText);
console.log(oText)

四、节点属性

1. 获取节点属性。ele.getAttribute(key)，节点名称，直接返回值。ele.getAttributeNode，返回节点对象。
2. 设置节点属性。ele.setAttribute(key, value)，不要用数字来当做key。ele.setAttributeNode(node)，node是一个节点对象。
3. 创建节点对象。document.createAttribute("nodeName")，创建完之后要设置value值。
4. 删除节点对象。ele.removeAttribute(key)
5. 节点类型。1--element--元素节点、3--#text--文本节点、8--#comment--注释节点、9--document--文档节点。
6. tagName是只有元素节点才有，nodeName是所有节点都有。

var oBox = document.getElementById('box');
oBox.removeAttribute('abc');
console.log(document.nodeType);