Node对象是什么供应了
DOM的标准规范供应了Node对象，该对象重要供应了剖析DOM节点树结构的属性和要领，DOM树结构重如果依托节点举行剖析，称为DOM节点树结构。Node对象是剖析DOM节点树结构的重要进口。
- Node对象时继续于EventTarget对象的，EventTarget是一个用于接收时候的对象。
- Document对象和Element对象是继续于Node对象的。
推断节点范例
<body>
<button id="but" name="btn">按钮</button>
<script>
//元素节点
var elenode = document.getElementById('but');
//元素节点的nodeName属性为元素名大写
console.log(elenode.nodeName);//BUTTON
console.log(elenode.nodeType);//1
console.log(elenode.nodeValue);//null
//属性节点
var attrnode = elenode.getAttributeNode('name');
//属性节点的nodeName属性为当前属性名
console.log(attrnode.nodeName);//name
console.log(attrnode.nodeType);//2
//属性节点的nodeValue属性为当前属性值
console.log(attrnode.nodeValue);//btn
//文本节点
var textnode = elenode.firstChild;
//文本节点的nodeName属性为#text
console.log(textnode.nodeName);//#text
console.log(textnode.nodeType);//3
//文本节点的nodeValue属性为当前文本内容
console.log(textnode.nodeValue);//按钮
</script>
</body>遍历节点
猎取父节点与父元素节点
父节点与父元素节点的区分
- parentNode：猎取指定节点的父节点，其父节点不肯定是元素节点
- parentElement：猎取指定元素的父元素节点，其父节点必需是元素节点
<body>
<ul id="parent">
<li>苹果</li>
<li id="mi">小米</li>
<li>锤子</li>
</ul>
<script>
//子节点
var mi = document.getElementById('mi');
//经由过程子节点猎取父节点
var parent1 = mi.parentNode;
console.log(parent1);
//经由过程子节点猎取父元素节点
var parent2 = mi.parentElement;
console.log(parent2);
var html = document.documentElement;
console.log(html.parentNode);//文档节点
console.log(html.parentElement);//null
</script>
</body>空缺节点
主流浏览器浏览器剖析HTML页面内容为DOM节点树结构时，因为HTML中的源代码换行，会发生空文本的空缺节点。
// 建立对象 - 特地用于封装处理空缺节点题目
var myTools = {
// 处理猎取其一切子节点childNodes属性的题目
childNodes : function(parentNode){
var children = parentNode.childNodes;
var arr = [];
for (var i=0; i<children.length; i++) {
var child = children[i];
if (child.nodeType === 1) {
arr.push(child);
}
}
return arr;
},
firstChild : function(parentNode){
var firstChild = parentNode.firstChild;
firstChild = firstChild.nextSibling;
return firstChild;
}猎取子节点
经由过程html页面中置顶元素查找其子节点，经由过程Node对象的属性完成：
- childNodes：猎取指定节点的一切子节点
- firstChild：猎取指定节点的第一个子节点
- lastChild：猎取指定节点的末了一个子节点
<body>
<ul id="parent">
<li>苹果</li>
<li id="mi">小米</li>
<li>锤子</li>
</ul>
<script>
var parent = document.getElementById('parent');
//猎取一切的子节点
var childnode = myTools.childNodes(parent);
console.log(childnode);
//猎取第一个子节点
var firschild = myTools.firstChild(parent);
console.log(firschild);
//猎取末了一个子节点
var lastchild = parent.lastChild;
lastchild=lastchild.previousSibling;
console.log(lastchild);
</script>
</body>猎取相邻兄弟节点
- proviousSibling:猎取指定节点的相邻兄弟节点
- nextSibling：猎取指定节点的背面相邻节点
<body>
<ul id="parent">
<li>苹果</li>
<li id="mi">小米</li>
<li>锤子</li>
</ul>
<script>
var mi =document.getElementById('mi');
//猎取上一个相邻的兄弟节点
var presib = mi.previousSibling;//空缺节点
var presib = presib.previousSibling;
console.log(presib);//苹果
var nextsib = mi.nextSibling;
var nextsib = nextsib.nextSibling;//空缺节点
console.log(nextsib);//锤子
</script>
</body>插进去节点
Node对象的appendChild()要领能够向指定节点的子节点列表的末了增加一个新的子节点
<body>
<ul id="parent">
<li>苹果</li>
<li id="mi">小米</li>
<li>锤子</li>
</ul>
<script>
var parent = document.getElementById('parent');
var newli = document.createElement('li');
var textnode = document.createTextNode('华为');
newli.appendChild(textnode);
/*
parentNode.appendChild(childNode)
* 申明
* parentNode - 示意指定节点(作为父节点)
* childNode - 示意被增加的节点(作为子节点)
* 特性 - 被增加在指定节点一切子节点列表的末了
*/
parent.appendChild(newli);insertbefore()要领
insertbefore()要领将一个新节点插进去节点的某一个子结点之前
<body>
<ul id="parent">
<li>苹果</li>
<li id="mi">小米</li>
<li>锤子</li>
</ul>
<script>
var parent = document.getElementById('parent');
//建立子节点
var newli = document.createElement('li')
var textnode = document.createTextNode('华为');
newli.appendChild(textnode);
//猎取指定的子节点
var mi = document.getElementById('mi');
//增加子节点
parent.insertBefore(newli,mi);
</script>
</body>删除节点
Node对象供应了removeChild()删除指定节点
<body>
<ul id="parent">
<li>苹果</li>
<li id="mi">小米</li>
<li>锤子</li>
</ul>
<li id="hua">爆米花</li>
<script>
var parent = document.getElementById('parent');
var mi = document.getElementById('mi');
parent.removeChild(mi);
//删除不是子节点的节点
var hua = document.getElementById('hua');
parent.removeChild(hua);//没法删除 报错
</script>
</body>替代节点
Node对象供应了replaceChild()要领用于替代节点
<body>
<ul id="parent">
<li id="hua">化物语</li>
<li>伪物语</li>
<li>猫物语</li>
</ul>
<ul id="ms">
<li>燃尽人间色</li>
<li id="re">东进不太热</li>
<li>提灯照国土</li>
</ul>
<script>
//定位要替代节点的父节点
var parent = document.getElementById('parent');
//定位被替代的子节点
var hua = document.getElementById('hua');
//建立新的子节点
var newli = document.createElement('li');
var textnode = document.createTextNode('恋物语');
newli.appendChild(textnode);
//替代节点
/* 关于新的节点用于替代，就是替代节点
* 已有的节点用于替代，挪动+替代->原有节点从本来位置删除*/
parent.replaceChild(newli,hua);
//定位用于替代的原有节点
var re = document.getElementById('re');
//用原有节点替代节点
parent.replaceChild(re,newli);
</script>
</body>复制节点
Node对象供应了cloneNode()要领完成节点复制功用
<body>
<div id="ms1">白衣渡我</div>
<script>
var ms1 = document.getElementById('ms1');
/* node.cloneNode.(deep)
* deep参数 - 设置是不是复制节点子女
* true - 复制子女
* false - 不复制子女*/
var ms2 = ms1.cloneNode(true);
var body = document.body;
body.appendChild(ms2);
</script>
</body>textContent属性、innerText属性
经由过程textContent属性能够猎取和修正节点及其子女的文本属性
IE引入的innerText属性，类似于textContent，但有肯定的区分。
<body>
<div id="sixia">提灯照国土</div>
<script>
var sixia = document.getElementById('sixia');
//设置节点文本内容
//具有浏览器兼容题目，ie6/7/8 不支撑，undefined
sixia.textContent = '千秋此意';
var content;
if (sixia.textContent===undefined){
//IE6/7/8 不支撑
content=sixia.innerText;
}else {
//其他浏览器支撑
content=sixia.textContent;
}
console.log(content);
</script>
</body>