JavaScript知识学习详情

1.DOM 文档对象模型

当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。

在页面中用document来表示浏览器创建出来的文件对象模型,document对象是window对象的一个属性，因此可以直接调用

document对象中的常见属性:

//documentElement属性 始终指向HTML页面中的元素

console.log(document.documentElement);

//body属性 直接指向元素

console.log(document.body);

//doctype属性 访问, 浏览器支持不一致，很少使用

console.log(document.doctype);

//title属性 获取文档的标题

console.log(document.title);

//URL属性 取得完整的URL

console.log(document.URL);

//domain属性 取得域名，并且可以进行设置，在跨域访问中经常会用到

console.log(document.domain);

//referrer属性 取得链接到当前页面的那个页面的URL，即来源页面的URL

console.log(document.referrer);

//images属性 获取所有的img对象，返回HTMLCollection类数组对象

console.log(document.images);

//forms属性 获取所有的form对象，返回HTMLCollection类数组对象

console.log(document.forms);

//links属性 获取文档中所有带href属性的元素

console.log(document.links);

1)查找 HTML 元素

通过 id 找到 HTML 元素

document.getElementById("...");

返回某一个元素对象,默认id是唯一的

通过name找到 HTML 元素

document.getElementsByName("...");

返回一个集合

通过标签名找到 HTML 元素

document.getElementsByTagName("...");

返回一个集合

通过class找到 HTML 元素

document.getElementsByClassName("...");

返回一个集合

2)找到元素之后干什么

1.改变元素中的内容

利用innerHTML 或者 value来改变元素中显示的内容

2.改变元素的属性

document.getElementById("image").src="2.jpg";

3.改变元素的css样式

document.getElementById("p1").style.color="blue";

今天天气很好.

4.给元素添加事件处理(覆盖之前的事件)

document.getElementById("myBtn").onclick=function(){

//...

};

5.给元素添加事件监听(不覆盖之前的事件)

document.getElementById("myBtn").addEventListener("click",function(){.....});

6.添加或删除元素

添加:

//创建新元素对象

var para=document.createElement("p");

//创建文本节点

var node=document.createTextNode("大家好");

//把文本节点添加到

中

para.appendChild(node);

//获得指定div

var element=document.getElementById("div1");

//把

添加到div中

element.appendChild(para);

删除:

大家好

你们好

2.javascript中的事件

1)事件三要素：

事件目标(event target)

发生的事件与之相关联或与之相关的对象

事件处理(event handler)

处理或相应事件的函数

事件对象(event object)

与特定事件相关且包含有关该事件详细信息的对象。

2)事件处理

给页面元素添加事件的三种方式

1. 在元素标签中使用事件属性

页面中的大都数元素都有事件处理属性,这些属性的名字都是以on开头的,例如onclick onload等等

例如1:

或者

例如2:

注意:调用showMsg(this)的时候把this当做参数传给了该函数,因为showMsg函数的调用是写在onclick属性值中的,而且这个onclick属性又是这个input标签中的,所以这个this代表的是当前input元素对象,在函数中输出即可知道

例如3:

注意:每个函数中有一个this,用来表示当前函数是由哪个对象来调用,就是java中所描述的当前对象

2. 在js中访问元素的事件属性并且赋值

var btn = document.getElementById("btn");

btn.onclick = function(){

console.log(this);

console.log(this == btn);//true

}

//删除事件处理程序

btn.onclick = null;

注意:这里函数中的this代表当前btn对象,因为函数是作为btn对象中的一个属性值出现的,所以这个函数就属于btn对象,那么函数中的this就代表这个btn对象

注意:如果之前btn对象中已经有了onclick事件处理了,那么这种方式会覆盖之前的事件

3. 使用指定函数给元素添加事件处理

事件绑定使用addEventListener函数

var btn = document.getElementById("btn");

btn.addEventListener("click",function(){

console.log(this);

console.log(this == btn);//true

});

注意函数中this代表的含义

注意第一个参数所写的事件名称中不带on

注意这种方式【不会】覆盖之前的事件

事件删除使用removeEventListener函数

var btn = document.getElementById("btn");

var handler = function(){

console.log(this);

console.log(this == btn);//true

}

btn.addEventListener("click",handler);

//移除事件

btn.removeEventListener("click",handler);

注意:可以添加多个事件处理程序，并且按照添加她们的顺序触发。添加事件时如果使用匿名函数将无法删除

注意:这个时候使用btn.onclick=null是【不能】移除事件处理的

4. IE事件处理

在低版本的IE中绑定事件和解除事件可以分别使用attachEvent()函数和detachEvent()函数

3)事件对象

1. DOM中的事件对象

在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有与事件相关的信息，包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。兼容DOM的浏览器默认会将event对象传入到事件处理函数中

element.onclick = function(event){

console.log(event);

}

element.addEventListener("click",function(event){

console.log(event);

});

2. 事件对象event的特殊属性

1)客户区坐标位置

clientX,clientY 事件发生时，鼠标指针在视口中的水平和垂直坐标

2)页面坐标位置

pageX,pageY 事件发生时，鼠标指针在页面本身而非视口的坐标，页面没有滚动的时候，pageX和pageY的值与clientX和clientY值相等

3)屏幕坐标位置

screenX,screenY

4)事件类型

1. UI事件

onload

在浏览器完成对象的装载后立即触发

onunload

在浏览器完成对象的卸载后立即触发(有些情况需要浏览器支持)

onselect

当用户选择文本框(,