一、节点
- 文本节点，IE8以下空格节点获取不到。
- 元素节点
div。
- 属性节点
class、id、value。
- 注释节点
<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>
二、获取节点
- 获取子代节点（动态获取）。
ele.childNodes：文本节点、元素节点。ele.children：只获取元素节点。
- 获取第一个子代节点。
ele.firstChild：返回第一个包括文本节点和注释节点。ele.firstElementChild：获取第一个元素节点。
- 获取最后一个子代节点。
ele.lastChild：获取到文本和注释节点。ele.lastElementChild：获取最后一个元素节点。
- 获取父亲节点。
ele.parentNode：获取父亲节点。ele.offsetParent：找到定位父级。
- 下一个兄弟节点。
ele.nextSibling：获取到下一个节点，包括文本、注释节点。ele.nextElementSibling：只获取元素节点。
- 上一个兄弟节点。
ele.previousSibling：获取到下一个节点，包括文本、注释节点。ele.previousElementSibling：只获取元素节点。
- 获取子元素节点的数量。
ele.childElementCount。
三、节点的操作
- 创建节点：
document.createElement('nodename')，放标签名，创建元素节点，创建节点是document的方法，创建完的节点可以直接进行dom操作。
- 创建文本节点：
createTextNode。
- 删除节点：
parentNode.removeChild(node)，删除节点只能从父级开始删除，不能自己删除自己。
- 克隆节点：
cloneNode()，克隆只克隆元素本身还有元素节点，不会克隆事件，可以接受一个布尔类型，若是true，则克隆子孙元素。
- 添加节点：
parentNode.appendChild(node)，只能从父级节点开始添加，添加位置在最后的子节点后面。
- 替换节点：
parentNode.replaceChild(new, old)，第一个用来替换新元素，第二个被替换元素。
- 在节点前添加节点：
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)
四、节点属性
- 获取节点属性。
ele.getAttribute(key)，节点名称，直接返回值。ele.getAttributeNode，返回节点对象。
- 设置节点属性。
ele.setAttribute(key, value)，不要用数字来当做key。ele.setAttributeNode(node)，node是一个节点对象。
- 创建节点对象。
document.createAttribute("nodeName")，创建完之后要设置value值。
- 删除节点对象。
ele.removeAttribute(key)
- 节点类型。1--element--元素节点、3--#text--文本节点、8--#comment--注释节点、9--document--文档节点。
- tagName是只有元素节点才有，nodeName是所有节点都有。
var oBox = document.getElementById('box');
oBox.removeAttribute('abc');
console.log(document.nodeType);
