DOM学习笔记整理二使用及定时器
2015-11-10 23:14
627 查看
DOM的用途:—— 使用JavaScript增删改查HTML文档内容
(1)节点树、元素树(2)遍历HTML文档,查看其内容
(3)查找节点
getElementById()
getElementsByTagName()
getElementsByName()
getElementsByClassName()
querySelector()
querySelectorAll()
document.documentElement
document.head
document.body
(4)获取/修改元素中HTML内容 innerHTML/textContent/innerText
(5)获取/修改元素的属性 getAttribute()/setAttribute()
(6)新建节点,追加到HTML文档中
varelement = document.createElement('tr');
vartxt = document.createTextNode('新闻标题');
varcomment = document.createComment('注释内容');
varattr = document.createAttribute('属性名');
(7)删除节点,将HTML文档中的元素删除
parentNode.removeChild(child );
(8)替换节点,将HTML文档中的某个元素删除,同一位置上再添加另一个元素
parentNode.replaceChild(newChild, existingChild );
一、节点的增删改查
(1)节点的查询(2)节点的新添
parent.appendChild(newChild )
parent.insertBefore(newChild, existingChild )
(3)节点的删除
parent.removeChild(child )
//某个节点不能删除自己,必须要通过父节点
二、BOM对象
共有7个BOM对象,都以其中的window对象为根,故window也称为全局对象;另外的6个对象在使用时,可以省略window.前缀。window对象的常用属性:
window.self 返回当前窗口的引用
window.parent 返回当前窗体的父窗体对象
window.top 返回当前窗体最顶层的父窗体的引用
window.outerwidth 返回当前窗口的外部宽
window.outerheight 返回当前窗口的外部高
window.innerwidth 返回当前窗口的可显示区域宽
window.innerheight 返回当前窗口的可显示区域高
提示:通过直接在Chrome控制台中输入console.log(window)可以查看到其所有的被当前浏览器支持的属性及值。
window对象的常用方法:
与打开窗口相关的方法:
window.prompt() 弹出一个输入提示框,若用户点击了“取消”则返回null
window.alert() 弹出一个警告框
window.confirm() 弹出一个确认框
window.close() 关闭当前浏览器窗口。 有些浏览器对此方法有限制。
window.open(uri,[name], [features]) 打开一个浏览器窗口,显示指定的网页。name属性值可以是“_blank”、“_self”、“_parent”、“_top”、任意指定的一个窗口名。
window.blur() 指定当前窗口失去焦点
window.focus() 指定当前窗口获得焦点
window.showModalDialog(uri,[dataFromParent]) 打开一个“模态窗口”(打开的子窗口只要不关闭,其父窗口即无法获得焦点;且父子窗口间可以传递数据)
此对象表示当前的浏览器对象,常用属性(了解):
appName /appVersion / appCodeName
cookieEnabled true/false,返回当前浏览器是否启用了Cookie
userAgent 用户代理(即浏览器)类型,用此属性可以获取当前浏览器的类型——为了保证浏览器兼容性。
常见浏览器的navigator.userAgent | |
Chrome | Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.99 Safari/537.36 |
FF | Mozilla/5.0 (Windows NT 6.1; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0 |
Safari | Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2 |
Opera | Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36 OPR/26.0.1656.60 |
IE11 | Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E;rv:11.0) like Gecko |
2.location对象
封装着浏览器显示的页面的地址,
location对象的常用属性:
href string型,用于读取或设置浏览器显示的页面URI(可用于实现页面跳转)
hash string型,获取URI中#开头那一部分(即锚点)
search string型,获取URI中?开头哪一部分(即查询字符串)
location对象的常用方法:
reload() 重新加载当前页面(刷新当前页) location.reload( );
assign('uri' ) 打开一个新的页面
replace('uri' ) 打开一个新的页面,且在浏览记录中替代当前页面
总结可以实现页面跳转的方法 (1)<meta http-equiv="Refresh" content="0;url=http://tts7.tarena.com.cn"/> (2)<a href="uri"> (3)<form action="uri"> (4)window.open( uri ) (5)location.href = uri ; location.assign(uri); |
3.history对象
history对象中保存着当前浏览器的访问历史记录
常用方法:
back() 返回历史记录中的前一个页面
forward() 返回历史记录中的下一个页面
go( num ) 返回历史记录中的指定页面,如go(1)相当于forwar() go(-1)相当于back()。 又如go(2) go(-3)
4.screen对象
screen对象中保存着当前浏览器所在的客户端显示屏幕的信息,如分辨率、色彩深度等——使用此对象可以辅助实现网页内容的自适应。
availHeight: 返回整个屏幕的可用高度(减去任务栏的高)
availWidth: 返回整个屏幕的可用宽度(减去任务栏的宽)
width:返回屏幕的水平分辨率
height:返回屏幕的竖直分辨率
colorDepth: 颜色位深,如24、48
orientation:屏幕的显示方向/角度
5.event对象
浏览器中时时刻刻在创建“Event”对象,以描述特定的事件信息。
1995年开始,IE4就已经确定了自己的事件模型;
2004年,DOM Level3标准才确定标准事件模型,被FF、Chrome等所支持;
所以,事件模型有两套“IE事件模型”和“DOM标准事件模型”
为事件绑定监听函数的三种方法:
(1)直接在HTML页面中某个元素上声明事件句柄——违反了“内容与行为相分离”的原则,尽量少用
<buttononclick="..."></button>
(2)在JavaScript查找特定元素,为其绑定事件监听函数
//btn.setAttribute('onclick','console.log(123)');
element.onxxx= function(){ } //事件句柄赋值为匿名函数
element.onxxx= myFunc ; //事件句柄赋值为函数名
functionmyFunc(){
}
注意:此方式不能为一个元素绑定多个监听函数
(3)高级事件绑定——第三阶段继续学习——可以为一个元素先后绑定多个处理函数
element.addEventListener('xxx', function(){} , [useCapture] ); //DOM
element.attachEvent('onxxx', function(){} ); //IE
6.通过event对象阻止事件的默认行为
事件的默认的行为:如submit按钮默认就可以提交表单、input只要键盘一按下默认就会把内容显示在输入框中....
可以使用下述方法阻止事件的默认行为:
event.returnValue= false; //IE
event.preventDefault(); //DOM
兼容各种浏览器的写法:
if(event.preventDefault){
event.preventDefault( );
}else{
event.returnValue= false;
}
7.事件的周期
(1)IE的事件模型中,子元素身上触发的事件,调用完其监听函数后,会继续向上(即父元素)依次传递——即:事件周期包括“目标触发”和“事件冒泡”两个阶段,业界也称IE的事件模型为“冒泡型事件模型”
(2)DOM的事件模型中,子元素身上触发的事件对象,会先传递给文档根元素(如html),再一级一级的向下传递;最终有可能传递给触发此事件的子元素,调用完监听函数后,事件对象会继续向上(即再次反传给父元素)传递——即:事件周期包括“事件捕获”=>“目标触发”=>“事件冒泡”三个阶段,业界也称DOM的事件模型为“捕获/冒泡型事件模型”
element.addEventListener('click',function(){}, true); //捕获阶段触发
element.addEventListener('click',function(){}, false); //冒泡阶段触发
在IE事件模型中,若想停止事件向上冒泡,可以使用:
event.cancelBubble= true; //事件对象取消冒泡
在DOM事件模型中,若想停止事件向下捕获、或者向上冒泡,可以使用:
event.stopPropagation(); //事件对象停止继续传播
8.如何获取event对象
IE: 不论是HTML还是JavaScript都可以直接使用event关键字FF: HTML中可以直接使用,而JavaScript函数中不能直接使用event对象
解决方案:
HTML: <button onclick="f1( event )"></button>
JavaScript: function f1( e ){
console.log(e );
}
事件的坐标
事件发生时的坐标有如下几种坐标系:(1)以屏幕为原点:
event.screenX event.screenY
(2)以浏览器显示区为原点:
event.x/ event.clientX event.y /event.clientY
(3)以HTML页面起点为原点:
event.pageX event.pageY
(4)以当前事件源对象起点为原点:
event.offsetX event.offsetY
HTML DOM
由于HTML文档中的标签是固定的,且标签的属性也是固定的,故HTMLDOM专门为每个标签制定了一个DOM对象,且每个对象都有固定的属性,所以使用起来会比核心DOM更加方便。bt.setAttribute('onclick','function(){}'); //核心DOM方法
bt.onclick =funtion(){ } //HTMLDOM方法
核心DOM更擅长于:操作元素,如创建、删除、替换;
HTMLDOM更擅长于:操作属性,如读取/修改属性。
常见的HTML DOM对象:
Image var img = newImage(); img.src="";
Table var table =document.createElement('table');
TableRow var tr=table.insertRow( );
相当于 var tr =document.createElement('tr');
table.appendChild(tr );
TableCell var td=tr.insertCell( );
相当于 var td = document.createElement('td');
tr.appendChild(td );
Form 表单对象 form.submit( );
Text
Password
Textarea
Select select.add(opt )
Option var opt= new Option(text, value)
与定时器相关的方法
(1)一次性定时器var timer = window.setTimeout( 'code', time )
window.clearTimeout( timer )
(2)周期性定时器
var timer = window. setInterval( 'code', time )
window.clearInterval(timer )
相关文章推荐
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- Mootools 1.2教程(2) DOM选择器
- 通过Mootools 1.2来操纵HTML DOM元素
- DOM 事件流详解
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- Dom在ajax技术中的作用说明
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类(类似XElement语法)
- 没有文件大小限制并免费的PDF到HTML转换工具
- JavaScript与HTML结合的基本使用方法整理
- css实现气泡框效果(实例加图解)
- html链接与文本标签们
- html活用软字符连接符
- 浅谈html中id和name的区别实例代码
- HTML <!DOCTYPE> 标签
- javascript针对DOM的应用分析(三)
- Dom 是什么的详细说明