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 ...
随机推荐
- 转:requirejs2.0新特性介绍
就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升 ...
- 下载的firebug-lite压缩包的调用方法
把以下代码copy到地址栏按回车,等加载完毕之后(受网速限制,有时候等待会久一点,如果很久都无法加载,重试几次就ok了),就会显示firebug lite的窗口,这样不用更改页面任何东西,任何地方轻松 ...
- 多种EDA软件的鼠标增强工具EDAHelper
最新版本(unicode版本,各种语言环境显示中文)下载地址:http://www.jyxtec.com/edahelper/EDAHelper-2.1.13.7z 繁体版:http://www.jy ...
- hibernate Criteria查询 2.3
Criteria对象提供了一种面向对象的方式查询数据库.Criteria对象需要使用Session对象来获得一个Criteria对象表示对一个持久化类的查询 查询所有 Session session ...
- Android绘图监听接口OnPreDrawListener详解
public static interface ViewTreeObserver.OnPreDrawListener 我们先看下API中的定义: 类概述: 为即将绘制视图树时执行的回调函数定义的接口. ...
- @RequestParam
@MVC另外一个特性是其提取和解析请求参数的能力.让我们继续重构上面的方法,并在其中添加@RequestParam注解: @RequestMapping("/accounts/show&qu ...
- Maven Jrebel 多模块热部署方案
近期在构建maven多模块项目时,发现web module依赖的其它模块,每次都要clean install成一个jar包,然后运行web module才能加载. 本生jrebel是配置在了web m ...
- haproxy 访问www.zjdev.com 自动跳转到appserver_8001 对应的nginx
# # acl zjdev_7_req hdr_beg(host) -i www.zjdev.com # use_backend appserver_8001 if zjdev_7_req
- zoj p3780 Paint the Grid Again
地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5267 题意:Leo 有一个N*N 的格子,他又有一把魔法刷,这个刷子能把 ...
- STL--stack/queue的使用方法
stack(栈)和queue(队列)也是在程序设计中经常会用到的数据容器,STL为我们提供了方便的stack(栈)的queue(队列)的实现. 准确地说,STL中的stack和queue不同于vect ...