DOM操作

DOM操作——获取节点

web浏览器生成一个树型结构，用来表示页面内部结构，这格结构被称为DOM树。DOM把这种树型结构理解成节点组成。

获取子节点的方法有以下几种：
父节点.children; 属性返回子元素的集合，返回中只包含元素节点。
父节点.childrenNodes;保存的是NodeList对象。NodeList是一类数组对象。用于有序的节点，返回的是元素节点和文本节点。

<div>
abcdefg
<p>这是一个段落</p>
<span>span</span>
</div>
//获取子节点children
var oDiv=document.getElementsByTagName('div')[0]
console.log(oDiv.children); //HTMLcollection(2)[p,span]
console.log(oDiv.childrenNodes); //返回子节点，包含元素节点，文本节点。

节点的基本属性
节点的基本属性包含：nodeType，nodeName，nodeValue
节点.nodeType ——获取节点的类型
节点.nodeName——获取节点的名称
节点.nodeValue——获取节点的值

<ul>
哈哈哈，我是新来的
<li>1</li>
<li>2</li>
</ul>
var oUl=document.getElementByTagName('ul')[0];
//获取所有子节点
var childs=oUl.childNodes//[text,li,text,li,text]
//判断每一个节点的类型
for (var i=0;i<childs.length;i++){
if(childs[i].nodeType===1){
childs[i].style.background="pink";
console.log(childs[i].nodeName);
}else if(childs[i].nodeType===3){
childs[i].nodeValue="hello world";
}
}

获取父节点的方法有以下几种：
元素.parentNode:☞父节点，返回值是一个元素节点对象
元素.offsetParent:当前元素最近的有定位属性的父级元素，如果没有定位的父级，就指向body。

<div></div>
var oDiv=document.getElementsByTageName('div');
//parentNode获取父元素
var par=oDiv[0].parentNode;
console.log(par);

//获取最近的定位父元素
<div style="position:absolute">
<p>这是一个段落</P>
</div>
//offserParent获取定位父元素，如果没有父元素，就会找到BODY
console.log(oDiv[1].offsetParent);
var oP=document.getElementByTagName('p')[0];
console.log(oP.offsetParent);

心得：关于获取子节点和父节点的知识点属性大多是两两出现的，也比较好记忆。但是还是两者之间还是有区别的，所以在使用的时候还是得小心注意。