2016年5月26日下午（妙味课堂js基础-2笔记一（DOM））
主要内容：
1. DOM简介、DOM标准、DOM节点
2. 获取元素的子节点：childNodes、兼容性问题
3. 节点类型：nodeType、文本节点、元素节点
4. children的使用
5. 获取元素父节点parentNode
6. 获取定位元素的父节点offsetParent
7. 获取首尾子元素：firstChild、firstElementChild、lastChild、lastElementChild
8. 获取兄弟节点：nextSibling、nextElemnetSibling、previousSibling、previousElementSibling
9. 元素属性操作：“.”与“[]”回顾、setAttribute、getAttribute、removeAttribute
10. 通过className获取元素、封装getByClass函数
一、DOM基础
（1）什么是DOM？
（2）浏览器支持情况
二、DOM节点
（1）childNodes
——获取子节点
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
//alert(oUl.childNodes.length); //这里弹出来7
oUl.childNodes[1].style.background='red'; //注意这里写的是childNodes[1]
}
</script>
</head>
<body>
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
显示结果为：
基于上面的结论我们现在来说一下：
<body><ul id="ul1"><li>111</li><li>222</li><li>333</li></ul></body>
当我们把代码改为这样时，就是不一样的显示结果了；
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
//alert(oUl.childNodes.length); //这里弹出来3
oUl.childNodes[1].style.background='red'; //注意这里写的是childNodes[1]
}
</script>
</head>
<body>
<ul id="ul1"><li>111</li><li>222</li><li>333</li></ul>
</body>
显示结果为：
这是因为它把空行算作为子节点了；把它叫做文本节点（空的文本节点）；选择我们就要引入nodeType（节点类型）了；
<script type="text/javascript"> window.onload=function () { alert(document.body.childNodes[1].nodeType); //当为childNodes[1]时弹出3(元素节点)；当为[0]时弹出1（文本节点）
} </script> </head> <body> aaafsa <span>fff</span> </body>
注意这里是给元素加样式：（要用if进行判断！）
<script type="text/javascript"> window.onload=function () { var oUl=document.getElementById('ul1'); var i=0; for(i=0;i<oUl.childNodes.length;i++) { if(oUl.childNodes[i].nodeType==1) { oUl.childNodes[i].style.background='red'; } } } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> </ul> </body>
——children（兼容版的childNodes）（现在好像不支持了！！！）
（2）parentNode（获取的是结构上的父级）
——例子：点击链接，隐藏整个li
<script type="text/javascript"> window.onload=function () { var aA=document.getElementsByTagName('a'); var i=0; for(i=0;i<aA.length;i++) { aA[i].onclick=function () { this.style.display='none'; } } } </script> </head> <body> <ul> <li>aass <a href="javascript:;">隐藏</a></li> <li>5453 <a href="javascript:;">隐藏</a></li> <li>cvxc <a href="javascript:;">隐藏</a></li> <li>ertert <a href="javascript:;">隐藏</a></li> </ul> </body>
注意：这个没有加parentNode的显示效果为点击隐藏的话只有该隐藏消失；
parentNode的显示效果为点击隐藏的话都消失；
<script type="text/javascript"> window.onload=function () { var aA=document.getElementsByTagName('a'); var i=0; for(i=0;i<aA.length;i++) { aA[i].onclick=function () { this.parentNode.style.display='none'; } } } </script> </head> <body> <ul> <li>aass <a href="javascript:;">隐藏</a></li> <li>5453 <a href="javascript:;">隐藏</a></li> <li>cvxc <a href="javascript:;">隐藏</a></li> <li>ertert <a href="javascript:;">隐藏</a></li> </ul> </body>
（3）offsetParent（offsetParent() 方法返回最近的祖先定位元素。）
——例子：获取元素在页面上的实际位置
定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。
可以通过 jQuery 设置 position，或者通过 CSS 的 position 属性。
<div id="div1" style="width:100px; height:100px; background:red;margin:100px;position:relative;"> <div id="div2" onclick="alert(this.offsetParent.id)" style="width:100px; height:100px; background:yellow;
position:absolute;left:100px;top:100px;"></div> </div>
如果是在上面的代码的情况下，弹出来的是div；
<div id="div1" style="width:100px; height:100px; background:red;margin:100px;">
<div id="div2" onclick="alert(this.offsetParent.tagName)" style="width:100px; height:100px; background:yellow;
position:absolute;left:100px;top:100px;"></div>
</div>
而上述代码弹出来的是body；（因为div1上面没有加定位；）
