1、DOM（文档树 ）:文档对象模型（把网页当成对象的方式来描述）， 是树形结构
2、节点：元素节点、属性节点、文本节点（开始标签和结束标签内的内容
）、注释节点
html的所有内容都可以称之为节点
获取body标签对象 ----> var body = document.body;
获取html标签对象 ----> var html = document.documentElement;
节点的一些属性和方法：
属性
（1）nodeName:节点的名字（如果是元素节点的话，是标签的名称）
（2）nodeType:节点的类型（属性值是数值。1代表元素节点，2代表属性节点，3代表文本节点）
（3）nodeValue:节点的值（如果是元素节点，值为null）
方法：
（1）hasChildNodes()判断元素下是否含有子节点，但是注意的是，他不但会判断元素节点，也会判断文本节点等其他节点
获取父节点和子节点
（1）parentNode属性 父节点，只有一个
（2）childNodes属性 子节点，可以没有值，一个或多个值（会把文本节点，元素节点，注释节点都保存进去）--->浏览器兼容有问题，不推荐使用
（3）children 子节点（只保存元素节点）
<body>
<div id='box'>
<span class="cc">我是span</span>
<a href="javascript:">我是a标签</a>
</div>
<p>我是段落</p>
<script type="text/javascript">
parentNode 父节点，只有一个
childNodes 子节点，没有，一个或多个（会把文本节点，元素节点，注释节点都保存进去）--->浏览器兼容有问题，不推荐使用
children 子节点（只保存元素节点）-->推荐使用
获取div元素
var box = document.getElementById('box');
使用childNodes属性获取字节点,返回是一个节点列表
var childs = box.childNodes;
从中找出子节点是元素节点。思路：根据元素节点的nodeType为1来查找
for(var i=0; i<childs.length; i++) {
if(childs[i].nodeType === 1) {
console.dir(childs[i]);
}
}
使用parentNode获取父节点
var parentNode = box.parentNode;
console.dir(parentNode);
使用children获取子节点,返回一个集合
var child = box.children;
console.log(child);
</script>
</body>
获取父节点中的第一个和最后一个子元素节点
获取第一个子节点 firstChild属性
获取最后个子节点 lastChild属性
获取第一一个子节点（子元素） firstElementChild属性-->有兼容问题，就是在IE9及以下都不支持该属性
获取最后一个子节点（子元素） lastElementChild属性-->有兼容问题，就是在IE9及以下都不支持该属性
获取第一个子节点 firstChild属性
获取最后个子节点 lastChild属性
获取第一一个子节点（子元素） firstElementChild属性
获取最后一个子节点（子元素） lastElementsChild属性
// 获取元素
var box = document.getElementById('box');
获取第一个子节点 firstChild属性
var fc = box.firstChild;
console.log(fc); //输出的是#text(第一个文本节点)
获取最后一个子节点
var lc = box.lastChild;
console.log(lc); //输出的是#text(最后个文本节点)
根据上面两个情况得知lastChild和firstChild返回的节点是父节点所有子节点中的第一个和最后一个
获取最后一个子节点（子元素)
var fec = box.firstElementChild;
console.log(fec); //输出<span>我是span</span>
获取最后一个子节点（子元素）
var lec = box.lastElementChild;
console.log(lec); //输出<abbr>缩略</abbr>
得知以上两种返回的是子节点中的元素节点
兼容问题
firstElementChild，lastElementsChild虽然可以直接得到父节点中的最后一个和第一个子元素。
但是有兼容问题，就是在IE9及以下都不支持该属性，下面给出了处理方式：
我们可以创建一个函数，如getFirstElementChild(element),函数里面先使用children获取到所有的子元素节点，判断哪个是第一个字节点并返回
function getFirstElementChild(element) {
// 获取父节点的所有子元素节点
var nodes = element.children;
//获取第一个子元素
var node = nodes[0];
// 返回元素
return node;
}
function getLastElementChild(element) {
// 获取父节点的所有子元素节点
var nodes = element.children;
//获取最后一个子元素
var node = nodes[nodes.length-1];
// 返回元素
return node;
}
获取兄弟节点
previousSibling--->获取前一个兄弟节点
previousElementSibling--->获取前一个兄弟节点(元素)//有兼容问题，IE8及以下不能用
nextSibling--->获取下一个兄弟节点
nextElementSibling--->获取下一个兄弟节点（元素）//有兼容问题，IE8及以下不能用
网友评论