javascript每日一练（三）——DOM一
一、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一的更多相关文章
- javascript每日一练（四）——DOM二
一.DOM的创建,插入,删除 createElement(标签名) appendChild(节点) insertBefore(节点,原有节点) removeChild(节点) <!doctype ...
- javascript每日一练（八）——事件三：默认行为
一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...
- javascript每日一练（一）——javascript基础
一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...
- javascript每日一练（十三）——运动实例
一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- javascript每日一练（五）——BOM
一.BOM打开,关闭窗口 window.open(); window.close(); <!doctype html> <html> <head> <meta ...
- javascript每日一练—运动
1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练（十四）——弹性运动
一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练（十二）——运动框架
运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...
- javascript每日一练（十一）——多物体运动
一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...
随机推荐
- background-position 个人理解
background-position这里先说像素 百分比比较复杂background-position:xxpx xxpx 这里第一个值指的是x轴坐标 第二个值是y轴坐标这里使用的坐标系和数学 ...
- python类继承
面向对象的编程带来的主要好处之一是代码的重用,实现这种重用的方法之一是通过 继承 机制.继承完全可以理解成类之间的 类型和子类型 关系. 假设你想要写一个程序来记录学校之中的教师和学生情况.他们有一些 ...
- 转:.Net程序员学习Linux最简单的方法
有很多关于Linux的书籍,博客.大多数都会比较“粗暴“的将一大堆的命令塞给读者,从而使很多.NET程序员望而却步.未入其门就路过了. 所以我设想用一种更为平滑的学习方式, 就是在学习命令时,先用纯语 ...
- 从PyOpenCV到CV2
安装cv2 http://hyry.dip.jp/files/opencv.zip 采用cv2重写的<Python科学计算>中的实例程序 读者可以在下面的页面中搜索“opencv”,并根据 ...
- cocos2d-x游戏开发系列教程-超级玛丽03-main函数
代码下载链接 http://download.csdn.net/detail/yincheng01/6864893 解压密码:c.itcast.cn main函数内容 #include "m ...
- Girls and Boys（匈牙利）
Girls and Boys Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- java.text.NumberFormat使用方法
NumberFormat 是全部数值格式的抽象基类. 该类提供了格式化和分析数值的接口. NumberFormat 也提供了确定 哪个语言环境具有数值格式以及它们名字的方法. package com. ...
- 多线程wait()和sleep()以及InterruptedException异常
1.核心区别: sleep用于线程控制,wait用于线程间的通信. sleep是Thread类的方法,是让线程休息一段时间,然后自动恢复运行,与其他线程无关,与同步无关,也与锁无关(拿锁时不会释放锁) ...
- 写一方法来实现两个变量的交换。在主调函数中定义两个整型变量，并初始化，调用交换方法，实现这两个变量的交换。（使用ref参数）
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 【Linux命令】命令行查找文件并进行操作
查找: #找./下的所有txt文件,输出个数 find ./ -name "*.txt" | wc -l #查找并删除 find ./ -name "*.txt" ...