您的位置：首页 > Web前端 > JavaScript

2016年5月26日晚上（妙味课堂js基础-2笔记二（DOM））

2016-05-26 19:25 477 查看
接上面笔记内容接下来继续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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航