2016年5月26日晚上（妙味课堂js基础-2笔记二（DOM））
接上面笔记内容接下来继续DOM节点：
7. 获取首尾子元素：firstChild、firstElementChild、lastChild、lastElementChild
8. 获取兄弟节点：nextSibling、nextElemnetSibling、previousSibling、previousElementSibling
9. 元素属性操作：“.”与“[]”回顾、setAttribute、getAttribute、removeAttribute
10. 通过className获取元素、封装getByClass函数
一、首尾子节点
1、兼容性问题
<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');
//oUl.firstChild.style.background='red'; //现在不能用；
//oUl.firstElementChild.style.background='red'; //可以用
var oFirst=oUl.firstElementChild||oUl.firstChild; //或
oFirst.style.background='red'; //这样就都可以了，用来处理兼容性问题
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
2、——firstChild、firstElementChild；
3、——lastChild、lastElementChild
二、兄弟节点
1、兼容性问题
2、——nextSibling、nextElemnetSibling
3、——previousSibling、previousElementSibling
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
var oLi=document.getElementById('li1');
oLi.previousElementSibling.style.background='red';
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li id="li1">111</li>
<li></li>
<li></li>
</ul>
</body>
同样只有在这个情况下才能显示；注意兼容性问题，以后会再具体研究！
三、操纵元素属性
（1）元素属性操作
第一种：oDiv.style.display=“block”;
第二种：oDiv.style[“display”]=“block”;
第三种：Dom方式
（2）DOM方式操作元素属性
第一种：获取：getAttribute(名称)
第二种：设置：setAttribute(名称, 值)
第三种：删除：removeAttribute(名称)
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var oTxt=document.getElementById('txt1'); //1 //oTxt.value='123'; //2 //oTxt['value']='abc'; //3 oTxt.setAttribute('value', 'rtertw'); //DOM方法设置元素属性setAttribute（） alert(oTxt.getAttribute('id')); //DOM方法获取元素属性getAttribute（） } </script> </head> <body> <input type="text" id="txt1"/> </body>
四、DOM元素灵活查找
（1）用className选择元素
如何用className选择元素？
——选出所有元素
——通过className条件筛选
<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');
var aLi=oUl.getElementsByTagName('li');
var i=0;
for(i=0;i<aLi.length;i++)
{
if(aLi[i].className=='box')
{
aLi[i].style.background='red';
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
（2）封装成函数
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
var i=0;
for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
//以上就是封装了一个函数；
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var aBox=getByClass(oUl, 'box');
var i=0;
for(i=0;i<aBox.length;i++)
{
aBox[i].style.background='yellow';
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
