接上面笔记内容接下来继续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';//3oTxt.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>

转载于:https://www.cnblogs.com/zzjeny/p/5532363.html

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

妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
第16天-树莓派初入门（一）—点亮-2016年9月26日 21:33:24
第16天-树莓派初入门(一)-点亮-2016年9月26日 21:33:24 标题里的第16天,不是接触树莓派16天,而是在我心中另一个重要的纪念的计时.. 下午刚收到订购的SD卡,晚上就迫不及待的鼓捣 ...
2016年8月26日星期五 --出埃及记 Exodus 16:27
2016年8月26日星期五 --出埃及记 Exodus 16:27 Nevertheless, some of the people went out on the seventh day to g ...
2016年3月26日作业质量管理和人力资源管理
2016年3月26日作业质量管理和人力资源管理一.质量管理 1.质量管理基本原则? 质量管理基本原则是: 以实用为核心的多元要求系统工程职工参与管理管理层和第一把手重视保护消费者权益面向 ...
妙味课堂ajax教程,妙味课堂JS高级专题篇视频资料分享
<妙味课堂JS高级专题篇视频教程>将向大家详细介绍javascript,javascript是一种直译式脚本语言,也是一种广泛用于客户端Web开发的脚本语言.目前,被数百万计的网页用来改进 ...
2016年3月26日作业
第十章质量管理 1.质量管理基本原则? 1) 以实用为核心的多元要求. 2) 系统工程. 3) 职工参与管理. 4) 管理层和第一把手重视. 5) 保 ...
软考中高项学员：2016年3月26日作业
1 质量管理 1.1 质量管理基本原则? 1.1.1 以实用为核心的多元要求: 1.1.2 系统工程:要求用系统的观点分析研究质量问题,把质量管理看成是处于较大系统(如企业管理.整个社会系统)中的一个 ...
2016年5月25日下午（妙味课堂js预热课程-4笔记一）
一.延时显示框首先我们要做的是制作两个显示框,当鼠标移入显示框1的时候显示框2出来,当鼠标移出的时候显示框2消失:其代码如下: <script type="text/javascri ...
传智刘意 2015年Java基础视频-深入浅出精华版笔记 day24~day26(2016年4月26日13:11:30)
day24 1.多线程(JDK5之后的Lock锁的概述和使用) Lock: void lock(): 获取锁. void unlock():释放锁. ...

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

一、首尾子节点

二、兄弟节点

三、操纵元素属性

四、DOM元素灵活查找

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

最新文章

热门文章