一、Dom基础

　　childNodes(有兼容问题),children　　nodeType　　getAttribute()　　firstChild,lastChild,previousSilbing,nextSilbing(有兼容问题)

　　offsetParent,parentNode

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>无标题文档</title>
 <script>
 window.onload = function(){
     var oUl = document.getElementById('ul1');
     var aLi = oUl.childNodes;

     //1.childNodes
     //alert(oUl.childNodes.length);    //chrome 7 ie 3  有兼容问题，标准浏览器下会获取包括文本节点

     //2.nodeType:    1,元素节点    3,文本节点
     /*for(var i=0;i<aLi.length;i++){
         if(aLi[i].nodeType==1){
             aLi[i].style.background = 'red';
         }
     }*/

     //3.children    无兼容问题
     //alert(oUl.children.length);    //3

     //4.Dom方式获取元素属性
     //alert(oUl.getAttribute('id'));

     //5.firstChild    lastChild    有兼容问题
     //alert(oUl.firstChild);    //chrome:object Text        ie:object HTMLElement
     //var oFirst = oUl.firstElementChild || oUl.firstChild;
     //oFirst.style.background = 'red';

     //6.兄弟节点 有兼容问题（同上） nextSilbing    nextElementSilbing    previousSilbing    previousElementSilbing
     //oUl.nextSibling.style.background = 'red';

     //7.offsetParent获取元素基于定位的父级
     /*oUl.onclick = function(){
         alert(this.offsetParent.tagName);    //body
     };*/

     //8.parentNode    获取元素的父节点
     //alert(oUl.parentNode.tagName);    //body

     //9.getByClass
     var aBox = getByClass(document.body, 'box');

     for(var i=0;i<aBox.length;i++){
         aBox[i].style.background = 'red';
     }

 };

 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;
 }
 </script>
 </head>

 <body>
 <p>p1</p>
 <ul id="ul1">
     <li></li>
     <li class="box"></li>
     <li></li>
 </ul>
 <p class="box">p2</p>
 </body>
 </html>

javascript每日一练（三）——DOM一的更多相关文章

  1. javascript每日一练（四）——DOM二

    一.DOM的创建,插入,删除 createElement(标签名) appendChild(节点) insertBefore(节点,原有节点) removeChild(节点) <!doctype ...

  2. javascript每日一练（八）——事件三：默认行为

    一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...

  3. javascript每日一练（一）——javascript基础

    一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...

  4. javascript每日一练（十三）——运动实例

    一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  5. javascript每日一练（五）——BOM

    一.BOM打开,关闭窗口 window.open(); window.close(); <!doctype html> <html> <head> <meta ...

  6. javascript每日一练—运动

    1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  7. javascript每日一练（十四）——弹性运动

    一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  8. javascript每日一练（十二）——运动框架

    运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...

  9. javascript每日一练（十一）——多物体运动

    一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...

随机推荐

  1. vim插件管理之Vundle

    Vim是一个类似于Vi的著名的功能强大.高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性.正是由于其可定制的特性, 许许多多的Vim插件便诞生了.管理这些插件又成为我们最为头疼的问题,最近无 ...

  2. python成长之路16

    阅读(72) 一:jQuery是一个兼容多浏览器的javascript类库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发, ...

  3. HTML+CSS笔记 表格,超链接,图片,表单

    表格 给表格加入CSS样式,添加表格边框 语法: <style type="text/css"> table tr td,th{border:1px solid #00 ...

  4. javascript单元测试(转)

    1.      什么是单元测试 在计算机编程中,单元测试(又称为模块测试)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作.程序单元是应用的最小可测试部件.在过程化编程中,一个单元就是单 ...

  5. QT图片旋转

    目前发现有两种方法,如下: 1.使用QPixmap的transformed函数旋转,这个函数默认是以图片中心为旋转点,不能随意设置旋转点,使用如下: QMatrix leftmatrix; leftm ...

  6. delphi数字签名验证及能够获取数字签名文件信息（利用wintrust.dll的导出函数，翻译一下）

    unit TrustCheck; interface uses Windows,SysUtils,jwaWinTrust,JwaWinCrypt; function CheckFileTrust(co ...

  7. Android显示GIF动画完整示例(一)

    MainActivity如下: package cc.testgif; import com.ant.liao.GifView; import com.ant.liao.GifView.GifImag ...

  8. 关于jave在oracle驱动下事务提交与回滚问题

    一直以来,都觉得Connection假设设置了setAutoCommit(false)后.启动手工事务提交.必须手工进行commit或者rollback才行.今天正好遇到一个问题.结果大跌眼镜. 于是 ...

  9. Spring IOC和DI原理讲解并制作LazyCoder版的Spring (一)

    转载请注意出处:http://blog.csdn.net/zcm101 写在前面的话 最近,给项目组成员培训了Spring 控制反转和依赖注入的原理,并自己做了个Lazy Coder版的Spring, ...

  10. c++子类和父类成员函数重名

    子类和父类返回值参数相同,函数名相同,有virtual关键字,则由对象的类型决定调用哪个函数. 子类和父类只要函数名相同,没有virtual关键字,则子类的对象没有办法调用到父类的同名函数,父类的同名 ...