一、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. 高级UNIX环境编程13 守护进程

    linux下,keventd守护进程为内核中运行的执行的函数提供进程上下文 bdflush,kupdated将高速缓存中的数据冲洗到磁盘上

  2. ie条件注释还能这样写

    通过条件注释给html开始标签定义不同的class, 来区分不同版本的IE,可以在样式表中避免 样式属性hack (如 _margin-top, *float:none ) 注意: IE10+不支持条 ...

  3. How can you determine how much disk space a particular MySQL table is taking up?

    http://stackoverflow.com/questions/6474591/how-can-you-determine-how-much-disk-space-a-particular-my ...

  4. utf8格式源代码中的字符串，默认都会当作char来处理，除非用L""符号来修饰

    原先QString("mystrr"),现在都不认了,必须都要加上L才行 原先:m_conn->put_HttpProxyAuthMethod("Basic&quo ...

  5. POJ 1472 Coins （多重背包+滚动数组）

    Coins Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 25827 Accepted: 8741 Description Pe ...

  6. HTML高级选项卡（1）————表标签

    利用上述表格属性,能够简单的创建一个表格.并随意的分割行和列. <html> <head> <title>表格的应用</title> </head ...

  7. Android开发之TextView排版问题

    下面直接是关于解决该问题的代码(根据别人的代码进行了修正以及测试,保证可以修改字体尺寸.颜色.根据padding调整,如果需要支持其他的格式可以将对应的属性添加至Paint类型的对象中):   1 p ...

  8. java生成压缩图

    链接地址:http://blog.sina.com.cn/s/blog_407a68fc0100nrba.html package util; import java.awt.image.Buffer ...

  9. [Swust OJ 249]--凸包面积

        题目链接:    http://acm.swust.edu.cn/problem/0249/   麦兜是个淘气的孩子.一天,他在玩钢笔的时候把墨水洒在了白色的墙上.再过一会,麦兜妈就要回来了, ...

  10. zIndex属性在IE中无效

    在ie中他的子类的zindex就以父类为准: <!doctype html> <html> <head> <meta charset="utf-8& ...