一、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. H面试程序（16）： 简单选择排序

    #include<stdio.h> #include<assert.h> void display(int * a, int n) { assert(a); for(int i ...

  3. 判断圆和矩形是否相交C - Rectangle and Circle

    Description Given a rectangle and a circle in the coordinate system(two edges of the rectangle are p ...

  4. 【论文阅读】Parsing Clothing in Fashion Photographs（翻译与理解）

    发表于2012年 作者:Kota Yamaguchi M.Hadi Kiapour Luis E.Ortiz Tamara L.Berg 摘要:展示了一个从时装图片中解析衣服的有效方法,提供了一个一般 ...

  5. POJ 3384 Feng Shui 凸包直径 + 半平面交

    G++一直没有过了 换成 C++果断A掉了...It's time to bet RP. 题意:给一个多边形,然后放进去两个圆,让两个圆的覆盖面积尽量最大,输出两个圆心的坐标. 思路:将多边形的边向里 ...

  6. applicationContext.xml详解

    http://blog.csdn.net/heng_ji/article/details/7022171

  7. c# 数据库编程（通过SqlCommand 执行数据库查询）

    前面一篇文章,我们介绍了如何在c#中对数据库进行更新操作.主要是利用SqlCommand 对象的ExecuteNonQuery方法. 这篇文章介绍,如何进行查询操作.本文给出的例子仍然是针对sql s ...

  8. 为什么C语言在2013年仍然很重要：一个简单的例子

    附注:在最初的文章里,我没说明进行模2^64的计算——我当然明白那些不是“正确的”斐波那契数列,其实我不是想分析大数,我只是想探寻编译器产生的代码和计算机体系结构而已. 最近,我一直在开发Dynvm— ...

  9. 设计模式 ( 十三 ) 命令模式Command（对象行为型）

    设计模式 ( 十三 ) 命令模式Command(对象行为型) 1.概述         在软件设计中,我们经常需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是哪个,我们只需 ...

  10. HDU1316(求区间斐波那契数的个数)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1316 题意:给两个数a和b,其中它们可能很大,最大到10^100,然后求去区间[a,b]内有多少个fib数 ...