DOM学习笔记整理二使用及定时器

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])  打开一个“模态窗口”（打开的子窗口只要不关闭，其父窗口即无法获得焦点；且父子窗口间可以传递数据）

 

1.navigator对象

此对象表示当前的浏览器对象，常用属性(了解)：

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 )