一、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. 最短路径算法—Dijkstra(迪杰斯特拉)算法分析与实现(C/C++)

    Dijkstra算法 ———————————最后更新时间:2011.9.25———————————Dijkstra(迪杰斯特拉)算法是典型的最短路径路由算法,用于计算一个节点到其他所有节点的最短路径. ...

  2. FPGA知识大梳理（一）对FPGA行业的一点感言

    今天想开始把这FPGA行业的知识点做一个大整理,从个人感想,到语法,到器件基础,难点攻克,到项目应用.把自己这几年接触到的知识做一个全面的回顾,看看自己这几年走过的路. 人生无常,几年的跌跌撞撞勉强算 ...

  3. 转: sublime text 2 前端编码神器-快捷键与使用技巧介绍

    代码编辑器或者文本编辑器,对于程序员来说,就像剑与战士一样,谁都想拥有一把可以随心驾驭且锋利无比的宝剑,而每一位程序员,同样会去追求最适合自己的强大.灵活的编辑器,相信你和我一样,都不会例外. 如果说 ...

  4. Qt学习 之 多线程程序设计（QT通过三种形式提供了对线程的支持）

    QT通过三种形式提供了对线程的支持.它们分别是, 一.平台无关的线程类 二.线程安全的事件投递 三.跨线程的信号-槽连接. 这使得开发轻巧的多线程Qt程序更为容易,并能充分利用多处理器机器的优势.多线 ...

  5. web.py入门

    官网介绍: web.py is a web framework for Python that is as simple as it is powerful. web.py is in the pub ...

  6. 谷歌三大核心技术（一）The Google File System中文版

    谷歌三大核心技术(一)The Google File System中文版  The Google File System中文版 译者:alex 摘要 我们设计并实现了Google GFS文件系统,一个 ...

  7. uva11722 - Joining with Friend（几何概率）

    11722 - Joining with Friend You are going from Dhaka to Chittagong by train and you came to know one ...

  8. JQuery实现表格的相同单元格合并的三种方法

    代码: <!DOCTYPE html> <html> <head> <title>merge.html</title> <meta h ...

  9. java实现随机验证码的图片

    链接地址:http://blog.sina.com.cn/s/blog_407a68fc010006qo.html 1.一共需要2个常用java文件(RandomCode.java和RandomCod ...

  10. 我的Python成长之路---第三天---Python基础（11）---2016年1月16日（雾霾）

    三.深浅拷贝 在Python中将一个变量的值传递给另外一个变量通常有三种:赋值.浅拷贝以及深拷贝 讨论深浅拷贝之前我们把Python的数据类型分为基本数据类型包括数字.字符串.布尔以及None等,还有 ...