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 ...
随机推荐
- Laravel 简单使用七牛云服务
前言 路漫漫其修远兮,吾将上下而求索.学习 Laravel 之初觉得所有东西都很厉害的样子,现在看来就是很厉害啊!最近在写一个项目上传的模块,要上传图片到七牛云,昨天看了一下午七牛云官方的文档感觉还是 ...
- GIT简易使用流程
git是目前世界上最先进的分布式版本控制系统(摘自廖雪峰官网) 首先需要在系统上安装git: Windows系统在这下载: RHEL/Centos/Fedora用户可以用以下命令安装:yum -y i ...
- urlretrieve
urllib.urlretrieve(url[, filename[, reporthook[, data]]])参数说明:url:外部或者本地urlfilename:指定了保存到本地的路径(如果未指 ...
- VC生成lib的_stdcall函数名与mingw生成的不一致
Qt Creator在Windows系统中,怎样链接VC生成的动态链接库 这个问题曾经困扰了我一整天.我想的是按照VC中的方法,增加include文件,增加lib文件,然后编译即可.谁知链接时总是出现 ...
- app添加辅助功能时，需要注意的测试点
最近项目里需要在辅助功能添加对应的服务,来支持对应的功能实现: 1.对用户添加app进行信息管理功能中,该app有对应的通知或信息时在app的logo上显示提示标志. 2.用户下载一款app后能够自动 ...
- 隐藏APK在Launcher中的启动图标 android开发教程
隐藏APK在Launcher中的启动图标: APK的AndroidManifest.xml文件的主Activity中删除 intent-filter 中的 <category android:n ...
- python:利用asyncio进行快速抓取
web数据抓取是一个经常在python的讨论中出现的主题.有很多方法可以用来进行web数据抓取,然而其中好像并没有一个最好的办法.有一些如scrapy这样十分成熟的框架,更多的则是像mechanize ...
- LoaderManager使用具体解释（三）---实现Loaders
这篇文字将介绍Loader<D>类,而且介绍自己定义Loader的实现.这是本系列的第三篇文章. 一:Loaders之前世界 二:了解LoaderManager 三:实现Loaders 四 ...
- ThinkPHP - 自动创建 + 自动验证 + 自动完成
自动创建:创建数据模型. $User->create(); 自动验证:验证提交的表单数据. protected $_validate = array( array('verify','requi ...
- c++, 虚基派生 : 共同基类产生的二义性的解决办法
虚基派生 //虚继承 #include <iostream> using namespace std; #include <string> //---------------- ...