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 ...
随机推荐
- 海量Web日志分析 用Hadoop提取KPI统计指标
http://blog.fens.me/hadoop-mapreduce-log-kpi/ http://dongxicheng.org/search-engine/scribe-installati ...
- HDU2084：数塔(DP)
Problem Description 在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这样描述的: 有如下所示的数塔,要求从顶层走到底层,若每一步只能走到相邻的结点,则经过的结点的数字之和最大 ...
- myeclipse设置凝视
Window-perferences--java--Code Style--Code Templates--Commments 类凝视:Types /** *@desc *@author haozk ...
- nginx日志每日定时写入Hdfs
#!/bin/bash hadoop_home=/opt/hadoop-2.4.0 tw_nginx_log_file=/home/chiline.com.all/access_com_tw.log ...
- 详细解析BluetoothAdapter的详细api
(1)开关状态值 (2)扫描状态值 (3)蓝牙操作接收的广播 (4)蓝牙操作请求的广播 (5)附加域 (6)错误码 (1)获取蓝牙适配器 (2)获取state状态方法 (3)蓝牙是否可用 (4)打开蓝 ...
- CentOS 64位上编译 Hadoop 2.6.0
Hadoop不提供64位编译好的版本号,仅仅能用源代码自行编译64位版本号. 学习一项技术从安装開始.学习hadoop要从编译開始. 1.操作系统编译环境 yum install cmake lzo- ...
- c++的引用（二）
/*按地址传递*/ #include <iostream> using namespace std; void swap(int *a, int *b) { int c; c = *a; ...
- c++，虚函数
1.在声明函数时,在最前加上virtual,则该函数就是函虚数,基类的虚函数被派生类继承后仍是虚函数.2.派生类中可以重写基类的虚函数.3.用指针访问重写的虚函数时,被访问的虚函数是指针指向的对象所属 ...
- Jquery UI accordion手风琴菜单
最近学习jQuery,总结了一些心得. 1.引用 <script type="text/javascript" src=jquery.js></script> ...
- Spring MVC 3.x 版本使用 @ResponseBody 返回乱码
由于万恶的Spring MVC 默认返回编码 是 ISO-8859-1, 使用如下配置, 可以将编码专为UTF-8, <bean class="org.springframework. ...