DOM相关内容_firstchildelement 不区分大小写-CSDN博客

本文链接：https://blog.csdn.net/qq_45639294/article/details/120261012

DOM

简介

DOM是针对HTML和XML文档的一个API（应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。1998年10月DOM1级规范成为W3C的推荐标准，为基本的文档结构以及查询提供了接口。但是要注意，IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生JavaScript对象的行为或活动特点并不一致。

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记。每个节点拥有各自的特点，数据和方法，另外也有与其他节点存在某种关系。节点之间的关系构成了层次，所有页面标记则表现为一个以特定节点为根节点的树形结构。

文档对象模型 Document Object Model dom

第三方库, 浏览器厂商提供的js操作html的api

不同的浏览器厂商提供的api可能不同，所以dom存在兼容性问题（少部分）

低于等于IE9

本地编辑（sublime/vsCode)-->本地浏览器打开（审查元素）

URL: file://C:/user/briup/1.html

本地编辑--》FTP工具---》服务器/var/www/html/chap09-->本地浏览器打开（审查元素）

URL : http://121.133.22.101/chap09/1.html

服务器vi---》服务器/var/www/html/chap09-->本地浏览器打开

构造函数树

Node、Document、Element、Text、Comment

var one = document.getElementById('one');

document 是 HTMLDocument实例对象,是window的属性

one 是 HTMLDivElement实例对象

可以调用

HTMLDivElement.prototype

HTMLElement.prototype

Element.prototype 【元素】

Node.prototype 【节点】

Object.prototype 【底层对象方法】

中的属性和方法

vi 1-constructor-tree.html

<!DOCTYPE html>

<head>

<title>constructor-tree</title>

<style>

#one {

background-color: teal;

color:#fff;

width: 300px;

height: 300px;

}

</style>

</head>

<body>

var one = document.getElementById('one');

console.log('one',one);

console.log('typeof one',typeof one);

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

btn.onclick = function(){

one.innerText = "这是一";

alert(one.nodeName);

alert(btn.nodeName);

}

console.log('btn',btn);

console.log('typeof btn',typeof btn);

// 测试关系

console.log("document", document);

console.log("document constructor",document.constructor);//function HTMLDocument

console.log(document instanceof HTMLDocument);//true

console.log(document instanceof Document);//true

console.log(document instanceof Node);//true

console.log(document instanceof Object);//true

console.log(document instanceof Element);//false

console.log(HTMLDocument.prototype instanceof Document);//true

console.log("----");

console.log("one",one);

console.log("one constructor",one.constructor);//function HTMLDivElement

console.log(one instanceof HTMLDivElement);//true

console.log(one instanceof HTMLElement);//true

console.log(one instanceof Element);//true

console.log(one instanceof Node);//true

console.log(one instanceof Object);//true

console.log(one instanceof Document);//false

console.log(HTMLDivElement.prototype instanceof Element);//true

</script>

</body>

</html>

Node.prototype

Node类型

DOM1级定义为一个Node接口，该接口将由DOM中的所有节点类型实现。除了IE之外，在其他所有浏览器中都可以访问到这个类型。javascript中所有的节点类型都继承自Node类型，所有节点类型都共享着相同的基本属性和方法。

节点关系

属性：

nodeType 表示节点类型

Document--> 9;Element -->1;TextNode -->3;Comment--> 8

document 是Document构造函数的实例

document.body是Element构造函数的实例

document.body.firstChild 是TextNode构造函数的实例

nodeName

该属性取决于节点类型，如果是元素类型，值为元素的标签名

nodeValue

该属性取决于节点类型，如果是元素类型，值有null

childNodes

保存一个NodeList对象，NodeList是一种类数组对象用来保存一组有序的节点，NodeList是基于DOM结构动态执行查询的结果，DOM结构变化可以自动反应到NodeList对象中。访问时可以通过中括号访问，也可以通过item()方法访问。可以使用slice方法将NodeList转换为数组

var arr = Array.prototype.slice.call(nodes,0);

parentNode

指向文档树中的父节点。包含在childNodes列表中所有的节点都具有相同的父节点，每个节点之间都是同胞/兄弟节点。

previousSibling 兄弟节点中的前一个节点

nextSibling 兄弟节点中的下一个节点

firstChild childNodes列表中的第一个节点

lastChild

childNodes列表中的最后一个节点

ownerDocument

指向表示整个文档的文档节点。任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。

方法：

hasChildNodes()

在包含一个或多个子节点的情况下返回true

操作节点

以下四个方法都需要父节点对象进行调用!

appendChild()

向childNodes列表末尾添加一个节点。返回新增的节点。关系更新如果参数节点已经为文档的一部分，位置更新而不插入，dom树可以看做是由一系列的指针连接起来的，任何DOM节点不能同时出现在文档中的多个位置

insertBefore() //第一个参数：要插入的节点；第二个参数：作为参照的节点；

被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回。如果第二个参数为null将会将该节点追加在NodeList后面

replaceChild() //第一个参数：要插入的节点；第二个参数：要替换的节点；

要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置

removeChild() //一个参数，即要移除的节点。

移除的节点将作为方法的返回值。其他方法,任何节点对象都可以调用。

其他方法

cloneNode()

用于创建调用这个方法的节点的一个完全相同的副本。有一个参数为布尔类型参数为true时，表示深复制，即复制节点以及整个子节点数。参数为false的时候，表示浅复制，只复制节点本身。该方法不会复制添加到DOM节点中的JavaScript属性，例如事件处理程序等。该方法只复制特定,子节点，其他一切都不复制。但是IE中可以复制，建议标准相同，在复制之前，移除所有事件处理程序。

normalize()

处理文档树中的文本节点，由于解析器的实现或DOM操作等原因，可能会出现文本节点不包含文本，或者接连出现两个文本节点，当在某个节点上调用了该方法，会删除空白节点，会找到相邻的两个文本节点，并将他们合并为一个文本节点。

属性：

层次结构

parentNode 父节点

childNodes 获取所有子节点（文本，元素，注释）

firstChild 获取当前节点的第一个子节点

lastChild 获取当前节点的最后一个子节点

nextSibling 获取当前节点下一个兄弟节点

previousSibling 获取当前节点上一个兄弟节点

ownerDocument 获取当前document

节点属性：

nodeName

如果文本节点:#text

如果元素节点:元素的名称大写

nodeType

Node.ELEMENT_NONE

Node.DOCUMENT_NONE

Node.COMMENT_NONE

Node.TEXT_NODE

nodeValue

注释节点

文本节点

方法：

【父节点调用的方法】

appendChild() 追加孩子节点

insertBefore(new,reference) 将new节点插入到reference之前

removeChild(child) 移除指定的子节点元素

replaceChild(new, old) 使用new节点替换old节点

cloneNode() 克隆节点

normalize()

contains() 判断某个节点是否是当前节点的后代节点

hasChildNodes() 盘点某个节点是否是当前节点的子节点

Vi 2-Node-test.html

<!DOCTYPE html>

<head>

</head>

<body>

<div>hello</div>

<div>world</div>

</div>

<p></p>

</div>

console.log("function Node",Node);//除了IE之外，在其他所有浏览器中都可以访问到这个类型，新版本IE（大于9）可以使用

console.log("document obj",document);

// 获取body元素

var body = document.body;

console.log("body",body);

// 判断类型

console.log("body.nodeType",body.nodeType);//1 Element

// 标签名字

console.log("body.nodeName",body.nodeName.toLowerCase());//body

// 标签值

console.log("body.nodeValue",body.nodeValue);//null

//信息判断

console.log("body.ownerDocument",body.ownerDocument);//HTMLDocument

console.log(body.ownerDocument===document);//true

console.log(body.hasChildNodes());//true

// 获取父节点

console.log("body.parentNode",body.parentNode); //<html>

// 获取子节点测试childNodes 在不同浏览器下的结果

console.log("body.childNodes",body.childNodes);//NodeList

console.log("body.childNodes.length",body.childNodes.length);

//将类数组对象转换为数组，并过滤出元素节点

var childs = body.childNodes;

var arr = Array.prototype.slice.call(childs,0);

var result = arr.filter(function(item){

// 过滤元素节点 nodeType=1 Element

return item.nodeType == 1;

});

console.log("body.childNodes",result);//Array 没有#text

//类数组对象可以调用数组的方法吗？不可以调用数组中的方法

//arr.slice(begin, end) [begin,ben)返回一个新的数组对象

/*arr.slice() //正确

childs.slice() //错误

slice.call(childs,0) //正确*/

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

console.log('baseURI element:',one.baseURI);

console.log('baseURI document:',document.baseURI);

//获取所有子节点-Node

console.log('childNodes List:',one.childNodes);//NodeList

console.log(one.firstElementChild);//div hello

console.log(one.childNodes[0].nodeName);//#text 空白

console.log(one.childNodes[1].nodeType == Node.ELEMENT_NODE);

//true

console.log(one.nextSibling.nextSibling);//div#tow

// 获取所有子元素-Element

console.log("children element:",one.children);//HTMLCollection

console.log("children element:",one.children.item(1));

// 获取one的信息

console.log("innerHTML",one.innerHTML);

console.log("attributes",one.attributes);

one.setAttribute("class","second");

//节点操作

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

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

// 将节点two克隆一份，并且修改id

//如果写了参数true,则代表深复制。浅复制是默认的

var two_copy = two.cloneNode(true);

var two_copy_2 = two.cloneNode(true);

two_copy.setAttribute("id","two_copy");

two_copy_2.setAttribute("id","two_copy_2");

// 将克隆的节点追加到one孩子的最后

one.appendChild(two_copy);

one.appendChild(two_copy);//添加子元素到父元素中，并放到最后，每个节点对象只能出现一次

one.insertBefore(two_copy_2,two_copy);

</script>

</body>

</html>

Document.prototype HTMLDocument.prototype

Document类型

Javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。HTMLDocument继承自Document。

文档子节点

可以继承Node中所有的属性和方法

属性：

documentElement 始终指向HTML页面中的<html>元素。

body 直接指向<body>元素

doctype 访问<!DOCTYPE>, 浏览器支持不一致，很少使用

title 获取文档的标题

URL 取得完整的URL

domain 取得域名，并且可以进行设置，在跨域访问中经常会用到。服务器测

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

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

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

links 获取文档中所有带href属性的<a>元素

查找元素

getElementById()

参数为要取得元素的ID，如果找到返回该元素，否则返回null。如果页面中多个元素的ID值相同，只返回文档中第一次出现的元素。如果某个表单元素的name值等于指定的ID，该元素也会被匹配。

getElementsByTagName()

参数为要取得元素的标签名，返回包含另个或者多个元素的NodeList，在HTML文档中该方法返回的是HTMLCollection对象，与NodeList非常类似。可以通过[index/name],item(),namedItem(name)访问

getElementsByName()

参数为元素的name,返回符合条件的NodeList

getElementsByClassName()

参数为一个字符串，可以由多个空格隔开的标识符组成。当元素的class属性值包含所有指定的标识符时才匹配。HTML元素的class属性值是一个以空格隔开的列表，可以为空或包含多个标识符。

属性:

PPT中有详细介绍

head

title

body

forms

images

hidden

links

location 跳转

方法:

createElement(tagName)

getElementById()

通过id获取元素

getElementsByClassName()

获取类名获取元素

getElementsByName()

通过名称获取元素

getElementsByTagName()

通过标签名获取元素

create..()

Vi 3-Document-test.html

<!DOCTYPE html>

<head>

<title>Document-test</title>

<style>

#one {

border: 1px solid #ccc;

width: 500px;

padding: 20px;

}

.pink {

background-color: pink;

color: #fff;

}

</style>

</head>

<body>

<a></a>

console.log("function Document",Document);

// 获取html标签

console.log(document.documentElement);

// body标签

console.log(document.body);

// doctype

console.log(document.doctype);//name:”html”

// title

console.log(document.title);

// images

console.log(document.images);//HTMLCollection 2个

var arr = Array.prototype.slice.call(document.images,0);

console.log(arr);

// forms

console.log(document.forms);//HTMLCollection 2个

// links 带有href属性的a标签

console.log(document.links);//HTMLCollection 3个

// getElementsByTagName

console.log(document.getElementsByTagName("div"));//HTMLCollection 3个

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

console.log(one);//1个

var twos = document.getElementsByClassName("two");

console.log(twos);//HTMLCollection 2个

//HTMLCollection的遍历 twos.[i] twos.item(i)

for(var i = 0;i<twos.length;i++){

twos[i].setAttribute("class","two pink")//Element

}

// 将一个类数组对象转换为数组

var array_twos = Array.prototype.slice.call(twos,0);

console.log(array_twos);

//创建元素

var p1 = document.createElement("p");//Document.prototype

p1.innerHTML = "hello world";//Element.prototype

p1.setAttribute("class","two pink");//Element.prototype

one.appendChild(p1);//Node.prototype

</script>

</body>

</html>

Vi 4-Document-open.html

<!DOCTYPE html>

<head>

<title>Document-open</title>

//不要和 window.open() 方法混淆。

//document.open 可用于对当前的文档追加内容, 而 window.open 是提供了打开一个新的窗口的方法

document.open(); //打开一个文档流区追加写入内容

document.write("<p>Hello world!</p>");

document.write("<p>I am a fish</p>");

document.write("<p>The number is 42</p>");

document.close();

alert(1);

document.write(new Date());//会发生自动的 document.open()调用

</script>

</head>

<body>

<div>加载顺序的影响</div>

</body>

</html>

Element.prototype HTMLElement.prototype

Element类型

HTML元素

所有的HTML元素都由HTMLElement类型表示，或者其子类型表示。每个HTML元素都应具有如下一些属性以及html元素特有的属性。

id 元素在文档中的唯一标识符

title 有关元素的附加说明信息

className 与元素class特性对应

src img元素具有的属性

alt img元素具有的属性

lang 元素内容的语言代码，很少使用！

dir 语言方向，ltr,rtl 左到右，右到左、

每个元素都有一个或者多个特性，这些特性的用途是给出相应元素或内容的附加信息。可以通过属性访问到该属性对应的值,特性的名称是不区分大小写的，即"id""ID"表示相同的特性，另外需要注意的是，根据HTML5规范，自定义特性应该加上data-前缀，以便验证。

取得自定义属性

getAttribute() 参数为实际元素的属性名，class,name,id,title,lang,dir一般只有在取得自定义特性值的情况下，才会用该方法。大多数直接使用属性进行访问，比如style,onclick

设置属性

dom.className = "one"

dom.setAttribute("className","one");

setAttribute() ：两个参数，第一个参数为要设置的特性名，第二个参数为对应的值。如果该值存在，替换

移除属性 removeAttribute() 移除指定的特性

attributes属性，其中包含了一个NamedNodeMap,与NodeList类似

getNamedItem(name) 返回nodeName属性等于name的节点,再访问nodeValue

removeNamedItem(name) 从列表中删除nodeName属性等于name的值

setNamedItem(attrNode) 向列表中添加一个节点

var attr=document.createAttribute(”title“);

attr.nodeValue=”test“;

btn.attributes.setNamedItem(attr);

item(index) 返回位于数字index位置处的节点

创建元素

document.createElement() 参数为要创建元素的标签名。该标签名在HTML中不区分大小写，但是在XML中区分大小写

元素的子节点

<ul>

</ul>

ie8及以下版本浏览器 2个子节点

其他浏览器 5个子节点

特殊特性

style

通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过属性来访问返回一个对象，由于style属性是用于以编程方式访问元素样式的，因此并没有直接映射到style特性

onclick

类似的事件处理程序，通过getAttribute()访问时，返回相应代码字符串；访问onclick属性时，返回一个javascript函数

作为文档树的文档

将文档看做是Element对象树，忽略文档Text,Comment节点。Element中的属性

children 类似于childNodes,返回NodeList对象，但是该对象中仅包含Element对象

firstElementChild 第一个孩子元素节点

lastElementChild 最后一个孩子元素节点

nextElementSibling 下一个兄弟元素节点

previousElementSibling 上一个兄弟元素节点

childElementCount 子元素的数量，返回值和children.length值相等元素内容

innerHTML 返回元素内容，包括html标签

innerText 元素内部的文本，去除回车和换行

textContent 元素内部的文本，不去除空格和回车

属性：

获得元素获得节点

children------Elements childNodes-----Nodes

firstElementChild------Element firstChild-----Node

lastElementChild------Element lastChild-----Node

nextElementSibling------Element nextSibling-----Node

previousElemetSibling------Element previousSibling-----Node

children 获取所有子元素(子 Element)

firstElementChild 获取当前元素的第一个子元素

lastElementChild 获取当前元素的最后一个子元素

nextElementSibling 获取当前元素的下一个兄弟元素

previousElementSibling 获取当前元素的上一个兄弟元素

childElementCount

获得该元素里的内容：

Node.prototype.nodeValue Element-->null

innerHTML 兼容性比较好，获取或者设置元素内部的html，标签可以被解析

textContent 非IE

innerText IE

获得元素的属性：

attributes: NamedNodeMap

className

name

href

src

alt

...

获得元素尺寸:

clientWidth 宽（padding + 内容）

clientHeight 高（padding + 内容）

clientTop 上边框的宽度

clientLeft 左边框的宽度

方法：

getAttribute(key)

setAttribute(key,val)

removeAttribute()

querySelector() HTMLDocument.prototype HTMLElement.prototype

querySelectorAll() HTMLDocument.prototype HTMLElement.prototype

Vi 5-Element-test.html

<!DOCTYPE html>

<head>

<title>Element-test</title>

<style>

body {

margin: 0;

padding: 0;

}

#one {

width: 100px;

height: 100px;

padding: 20px;

border: 10px solid #ccc;

position: relative;

left: 100px;

}

</style>

</head>

<body>

</div>

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

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

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

console.log(one.innerHTML);//innerHTML 兼容性比较好

console.log(one.textContent);// 非IE浏览器

console.log(one.innerText);// IE浏览器

console.log("one.id",one.id);//one

console.log("one.name",one.name);//undefined // attr 自有

console.log("one.name",one.getAttribute("name"));//photo //prop 添加

console.log("one.className",one.className);//first

console.log("width",one.clientWidth);//140

console.log("left",one.clientLeft);//10

one.clientWidth = 300;//此方式修改失败

one.style.width="300px";

//div#three更新内容

three.innerText = "<h1>hello</h1>"; //innerHTML 兼容性比较好

three.innerHTML = "<h1>world</h1>";

//创建ul/li元素追加给div#four

var newUL = document.createElement("ul");//Document.prototype

newUL.innerHTML = `

`;//Element.prototype

four.appendChild(newUL); //Node.prototype

var a = document.getElementsByTagName("a")[0];

console.log(a);

console.log(a.constructor);//HTMLAnchorElement

console.log(a.href);

a.href = "http://www.briup.com";

//var myCollection = document.getElementsByTagName("div");

var myNodelist = document.querySelectorAll("div");

console.log("selector",myNodelist );//3个

console.log(myNodelist[1].innerHTML) ;

console.log(myNodelist.length);

//改变节点列表中所有 <div> 元素的背景色：

for (var i = 0; i < myNodelist.length; i++) {

myNodelist[i].style.backgroundColor = "red";

}

</script>

</body>

</html>

Vi Selector-test.html--不讲

<!DOCTYPE html>

<head>

<title>选择器Selector</title>

<style>

body {

margin: 0;

padding: 0;

}

#one>div {

line-height: 2em;

color: #fff;

}

#one>div:first-child {

background-color: lightblue;

}

#one>div:nth-child(3) {

background-color: pink;

}

</style>

</head>

<body>

<div>three</div>

</div>

<p>hello</p>

<h1>world</h1>

// 获取类数组对象

var divs = document.body.querySelectorAll("#one > div");

console.log(divs);

// 遍历完成后逐个绑定

for(var i=0; i<divs.length ; i++){

var div = divs[i];

div.onclick = function(event){

alert(event.target.innerText);

}

</script>

</body>

</html>

Vi selector-jquery.html--不讲

<!DOCTYPE html>

<head>

<style>

body {

margin: 0;

padding: 0;

}

#one>div {

line-height: 2em;

color: #fff;

}

#one>div:first-child {

background-color: lightblue;

}

#one>div:nth-child(3) {

background-color: pink;

}

</style>

</head>

<body>

<div>three</div>

</div>

<p>hello</p>

<h1>world</h1>

var divs = $("#one > div")

divs.on("click",function(event){

alert(event.target.innerText);

document.location = "http://www.baidu.com";

});

divs.append($("<h1>hi</h1>"))

// ...【 DOM 】 / BOM /ECMAScript

</script>

</body>

</html>

vi 6-element-img.html

<!DOCTYPE html>

<head>

<title>element-img</title>

</head>

<body>

var img = document.images[0];

//获取属性

// 获取class属性的值

console.log(img.className);//test

console.log(img.getAttribute("class"));//test

//获取自定义属性

console.log(img["date-now"]);//undefined

console.log(img.getAttribute("date-now"));//today

// 获取height和width属性

console.log(img.height);//100

console.log(img.width);//100

console.log(img.style.height);//100px

console.log(img.style.width);//100px

//获取src

console.log(img.src);//file://xxxx/1.jpg

console.log(img.getAttribute("src"));//1.jpg

// 获取img标签的所有属性

console.log(img.attributes);//NamedNodeMap

console.log(img.attributes[0]);

console.log(img.attributes.item(0));

console.log(img.attributes.getNamedItem("alt"));

console.log(img.attributes.removeNamedItem("alt"));

img.removeAttribute("src");

console.log(img.attributes);

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

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

// 点击按钮1,复原图片原来的尺寸、src

//src="../images/2.jpg"

//height:100px;width:100px

btnreset.onclick = function(){

//img.src = "../images/2.jpg";

img.setAttribute("src","1.jpg");

img.style.height = "100px";

img.style.width = "100px";

}

// 点击按钮2,图片放大2倍

btnbig.onclick = function(){

img.style.height = "200px";

img.style.width = "200px";

}

// 点击图片，替换图片

img.onclick = function(){

img.src = "2.jpg";

}

// 获取onclick

console.log(img.onclick);

// 模拟点击事件

// img.onclick();

</script>

</body>

</html>

Text.prototype Comment.prototype

Text类型(文本类型)

文本节点，包含的是可以按照字面解释的纯文本内容。

length //文本长度

appendData(text) //追加文本

deleteData(beginIndex,count) //删除文本

insertData(beginIndex,text) //插入文本

replaceData(beginIndex,count,text) //替换文本

splitText(beginIndex) //从beginIndex位置将当前文本节点分成两个文本节点

document.createTextNode(text) //创建文本节点，参数为要插入节点中的文本

substringData(beginIndex,count) //从beginIndex开始提取count个子字符串

Comment类型：注释类型

Comment类型

Vi 7-text-comment.html

<!DOCTYPE html>

<head>

</head>

<body>

hello

var body = document.body;

var text = body.firstChild;//Node ,Elelemtn: firstElementChild

console.log(text);//空行

// 获取文本内容

console.log(text.data.trim().length);//0

console.log(text.length);//2

text.appendData("world");

//追加内容

var briup=document.createTextNode("briup");

console.log(briup);

text.appendData(briup);

//text.appendChild(briup);error

body.appendChild(briup);//Node

// Comment

var comment = body.firstChild.nextSibling;

console.log(comment);

// 获取内容

console.log(comment.data);

</script>

</body>

</html>

学习地址

JavaScript HTML DOM

文档对象模型 (DOM) - Web API 接口参考 | MDN

事件机制

简介

为元素添加事件响应函数，当执行相应的操作的时候会执行该函数

Vi 1-demo.html:只需填补<script>代码

<!DOCTYPE html>

<head>

<style>

.btn {

padding: .5em 1em;

border-radius: 3px;

background-color: teal;

color: #ededed;

cursor: pointer;

display: inline-block;

}

</style>

</head>

<body>

// 1. 事件源/事件目标 event target

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

// 2. 绑定事件处理函数 event handler

var a = 1;

one.onclick = function(event){

// 3. 事件对象event object

console.log(event);

alert(a);

}

</script>

</body>

</html>

JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

事件三要素：

事件目标（event target）

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

事件处理程序（event handler）

处理或相应事件的函数

事件对象（event object）

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

为元素添加事件响应函数，当执行响应的操作的时候会执行该函数

事件源/事件目标 event target :浏览器要去监听的元素

事件处理函event handler :浏览器在事件类型发生的时候去执行处理的函数

事件对象 event object: 由浏览器传递的实参值，事件对象

事件流

事件流

描述的是从页面中接受事件的顺序

事件冒泡 (IE事件流)

从内往外

事件开始由最具体的元素接收，然后逐级向上传播到不具体的节点

<html>

<body>

<div>click me</div>

</body>

</html>

当点击了<div>元素，这个click事件会按照如下顺序传播

div->body->html->document

注意：IE8以及更早版本只支持事件冒泡。

事件捕获 (Netscape事件流)

不太具体的节点更早接收事件，具体的节点到最后接收事件。当点击了<div>元素，按照如下方式触发click事件

document->html->body->div

DOM事件流

“DOM2级事件”规定了事件流包括三个阶段：事件捕获阶段，处理目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后是事件冒泡。

事件捕获： document->html->body

处理目标：事件处理

事件冒泡： body->html->document

事件流（元素嵌套，为每层元素添加事件处理函数）

1. 事件捕获(外->内)

2. 事件冒泡(内->外)

在多数浏览器中，默认按照事件冒泡的方式来执行事件处理函数，也就是越靠里的元素上的事件处理函数越先执行。

3.DOM2级事件规定了事件流的三个阶段

事件捕获： document->html->body

处理目标：事件处理

事件冒泡： div->body->html->document

元素嵌套，为每层元素添加事件处理函数

</div>

1.事件捕获：谁被点击了外---->内

document->html->body->div.outer Y ->div.center Y ->div.inner Y

2.处理目标：事件处理 div.outer div.center div.inner

3.事件冒泡：执行处理函数内-->外

div.inner.handler()-->div.center.handler()-->div.outer.handler()

事件处理程序

事件处理程序

事件就是用户或浏览器自身执行的某种动作，响应某个事件的函数为事件处理程序，事件处理程序以"on"开头(onclick,onload)

HTML事件处理程序

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码。

function showMsg(){

alert("is clicked");

}

</script>

点击按钮会调用showMsg()函数，事件处理程序的代码在执行时，有权访问全局作用域的任何代码。

缺点：1)时差问题，用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行的条件。2)这种扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。3)HTML与JavaScript代码紧密耦合。

DOM0级事件处理程序

通过javascript指定事件处理程序的传统方式，将一个函数赋值给一个事件处理程序属性。特点是简单，跨浏览器。

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

btn.onclick = function(){

alert('cliked');

}

dom0级方法制定的事件处理程序被认为是元素的方法，因此这个时候事件处理程序是在元素的作用域中运行，this指向当前元素。

btn.onclick = null; //删除事件处理程序

DOM2级事件处理程序

DOM2级规范以一种符合逻辑的方式来标准化DOM事件，IE9, Firefox, Opera, Safari, Chrome全部已经实现了"DOM2级事件"模块的核心部分。IE8是最后一个仍然使用其专有事件系统的主要浏览器

非IE事件处理程序

addEventListener() 事件绑定

参数：

要绑定的事件名，不加on前缀

作为事件处理的函数

布尔值：true在捕获阶段调用事件处理程序；false在冒泡阶段调用【默认】

removeEventListener() 事件解绑

参数：

要删除的事件名，不加on前缀

作为事件处理的函数

布尔值：true在捕获阶段调用事件处理程序；false在冒泡阶段调用【默认】

可以添加多个事件处理程序，并且按照添加她们的顺序触发。移除事件传入的参数与添加处理程序时使用的参数相同，添加事件时如果使用匿名函数将无法删除

IE事件处理程序

事件处理程序会在全局作用域中运行，因此this指向window对象。为一个对象添加两个相同的事件，事件处理程序的顺序是按照添加相反顺序进行处理。

attachEvent() 事件绑定

参数：

事件类型，加on前缀

事件处理函数

detachEvent() 事件移除

参数：

事件类型，加on前缀

事件处理函数

事件处理程序都被添加到冒泡阶段

事件处理函数的绑定 event handler

1. HTML特性来指定

2.普通绑定（绝大多数浏览器都兼容）DOM0级事件处理程序

事件源.onxxx = function(event){

执行过程

}

事件对象通过事件处理函数形式参数来接受即可

事件源.onxxx=null

3. 标准方法（新版本都兼容） DOM2级事件处理程序

A)非IE,>IE9：

事件源.addEventListener(“xxx”,handler,boolean)

事件源.addEventListener("xxx",function(event){},boolean)

事件对象通过事件处理函数形式参数来接受即可

事件源.removeEventListener(“xxx”,handler,boolean)

B)<IE9:

事件源.attachEvent(“xxx”,handler);

事件源.attachEvent("xxx",function(){window.event})

事件源.detachEvent(“xxx”,handler)

C)兼容性

在script的开头添加不兼容的方法到内置原型中

if(element.addEventListener){

element.addEventListener(“click”,modifyText,false);

}else if(element.attachEvent){

element.attachEvent("onclick",modifyText);

}else{

element["onclick”] = handler;

}

Vi 2-event-flow.html:填补<script>代码

<!DOCTYPE html>

<head>

<style>

div {

border: 1px solid #666;

box-sizing: border-box;

}

div.outer {

width: 400px;

height: 400px;

margin: 0 auto;

padding: 50px;

}

div.center,

div.inner {

height: 100%;

padding: 50px;

}

</style>

</head>

<body>

outer

center

<div class="inner">inner</div>

</div>

var outer = document.getElementsByClassName("outer")[0];

var center = document.getElementsByClassName("center")[0];

var inner = document.getElementsByClassName("inner")[0];

function handler(event){

console.log(this,this.className,this.nodeName,this.constructor);

// 获取事件对象

// 非IE9之下,使用event直接获取

console.log(event);

// 在IE9之下,则使用window.event获取

console.log(window.event);

console.log(event.target,event.currentTarget);

alert(event.currentTarget.className);

//在事件处理程序内部，对象this始终等于currentTarget值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，this,currentTarget,target包含相同的值。

//event.stopPropagation();//取消事件的进一步捕获或者冒泡

}

//普通绑定：画图描述捕获、冒泡过程 DOM0级

outer.onclick = handler;

center.onclick = handler;

inner.onclick = handler;

//解绑

Inner.οnclick=null;

// IE9以下的

/*绑定方法attachEvent

inner.attachEvent("onclick",handler);

center.attachEvent("onclick",handler);

outer.attachEvent("onclick",handler);*/

// 解绑

// inner.detachEvent("onclick",handler);

//标准绑定 DOM2级

outer.addEventListener("click",handler,true);//true 事件捕获阶段调用

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

alert("~~~~~");

},true)

outer.removeEventListener("click",handler,true)//可删除、内存开销小

center.addEventListener("click",handler,false);//false 冒泡阶段调用

// 封装绑定事件和解绑事件函数。

var handler = function(event){

alert(event.currentTarget.className);

}

var utils = {

bind:function(element,type,handler){

if(element.addEventListener){

element.addEventListener(type,handler,false);

}else if(element.attachEvent){

// element.attachEvent("on"+type,handler);

element.attachEvent("on"+type,function(){

handler.call(element);

});

}else{

element["on"+type] = handler;

}

};

utils.bind(inner,"click",handler);

utils.bind(center,"click",handler);

utils.bind(outer,"click",handler);

// 在DOM0级绑定事件中，this指向currentTarget(当前目标)【都是】

// 在DOM2级非IE9以下绑定事件中，this指向currentTarget(当前目标)

// 在DOM2级IE9以下绑定事件中，this指向window

// 获取事件对象：

// 使用DOM0级绑定函数中,在非IE9以下,直接使用event;在IE9之下,通过window.event来获取

// 使用DOM2级绑定函数中，使用event来获取

</script>

</body>

</html>

事件对象

事件对象

DOM的事件对象

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

dom.onclick = function(event){

console.log(event);

}

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

console.log(event);

},false);

事件对象的属性均为只读属性

属性类型说明

bubbles Boolean 事件是否冒泡

cancelable Boolean 是否可取消事件默认行为

currentTarget Element 事件处理程序当前正在处理事件的那个元素

eventPhase Integer 调用事件处理程序的阶段;1捕获 2处于目标 3冒泡

target Element 事件真正目标

type String 事件类型，需要一个函数，处理多个事件时，可使用该属性。

preventDefault() Function 取消事件的默认行为

stopPropagation()Function 取消事件的进一步捕获或者冒泡

在事件处理程序内部，对象this始终等于currentTarget值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，this,currentTarget,target包含相同的值。

IE中的事件对象

在使用DOM0级方法添加事件时，event对象可以作为window对象的一个属性存在，使用attachEvent添加事件处理程序的时候，event对象会作为参数传入事件处理函数中

dom.onclick = function(){

console.log(window.event);

window.event.returnValue = false;//阻止默认行为

window.event.cancalBubble = true;//取消冒泡

}

dom.attachEvent("onclick",function(event){

console.log(window.event);

});

属性类型说明

cancelBubble Boolean 是否取消事件冒泡,值为true取消冒泡, 类似stopPropagation()

returnValue Boolean 取消事件默认行为,值为false阻止,类似 preventDefault()

srcElement Element 事件的目标 target

type String 被触发的事件的类型

使用事件绑定的方式不同，获取事件对象的方式就不同

target

在一个嵌套的结构中，当点击内部元素，外部元素上绑定的onclick事件处理函数也会执行，这时候，这个事件处理函数中的event.target为内部元素；一般用于事件代理

currentTarget

在一个嵌套的结构中，当点击内部元素，外部元素上绑定的onclick事件处理函数也会执行，这时候，这个事件处理函数中的event.currentTarget为外部元素（绑定该事件处理函数的事件源）

target 内部元素

currentTarget this 外部元素，绑定处理函数的那个对象

点击单选按钮，自动切换男女头像

Vi 3-eventObject.html:填补<script>代码

<!DOCTYPE html>

<head>

</head>

<body>

<div>

<br>

</div>

var img = document.getElementsByTagName('img')[0];

// 1. 事件源/事件目标

var gender=document.getElementsByName("gender");

//console.log(gender[0].value,gender[1].value);

for(var i=0;i<gender.length;i++){

// 2. 绑定事件处理函数

gender[i].onclick = function(event){

// 3. 事件对象event

console.log(event.target.value)//千万不能使用gender[i].value

if(event.target.value=="male") img.src = 'images/male.jpg';

if(event.target.value=="female") img.src = 'images/female.jpg';

}

</script>

</body>

</html>

stopPropagation():阻止事件流，

阻止捕获或者冒泡阶段中当前事件的进一步传播

HTML属性的绑定、普通绑定DOM0级：在冒泡阶段执行处理函数

标准绑定DOM2级，false：在冒泡阶段执行处理函数

标准绑定DOM2级，true：在捕获阶段执行处理函数

defaultPrevented:是否阻止了 false

preventDefault():阻止默认行为 true

form submit 默认提交表单

a click 默认调转

checkbox click 默认可以选择

Vi 3-preventDefault.html:填补<script>代码

<!DOCTYPE html>

<head>

form{

margin: 0 auto;

width: 700px;

padding-top: 100px;

border-right-style: none;

}

#search{

height: 16px;

width: 500px;

padding: 12px 16px;

font-size: 16px;

margin: 0;

vertical-align: top;

outline: 0;

box-shadow: none;

border-radius: 10px 0 0 10px;

border: 2px solid #c4c7ce;

background: #fff;

color: #222;

overflow: hidden;

}

#btn{

display: inline-block;

cursor: pointer;

width: 108px;

height: 44px;

padding: 0;

background: 0 0;

background-color: rgba(0, 0, 0, 0);

background-color: #4e6ef2;

border-radius: 0 10px 10px 0;

font-size: 17px;

color: #fff;

box-shadow: none;

font-weight: 400;

border: none;

outline: 0;

}

</style>

</script>

</head>

<body>

</form>

// 阻止默认：点击提交按钮的时候不让提交

var form = document.forms[0];

form.onsubmit = function(event){

// 非IE9以下

event.preventDefault();

// IE9以下

window.event.returnValue = false;

}

</script>

</body>

</html>

事件代理

将事件处理函数绑定在当前元素的父元素上，当点击当前元素的时候，父元素上绑定的事件处理函数就可以执行。可以通过event.target来获取触发事件的对象：当前元素；通过event.currentTarget获取事件处理函数绑定的对象：父元素。

好处在于不用为每个元素绑定事件处理函数，只需要为这些元素的父元素绑定一次即可。

应用：动态表格

Vi 4-dytable.html:填补<script>代码

<!DOCTYPE html>

<head>

<style>

.table {

border-collapse: collapse;

width: 100%;

text-align: center;

}

.table td {

border: 1px solid #ccc;

line-height: 2em;

}

.table tr.current {

background-color: #ededed;

}

.none {

display: none;

}

.btn {

padding: .5em 1em;

border-radius: 3px;

background-color: teal;

color: #ededed;

cursor: pointer;

display: inline-block;

}

.btns {

margin-bottom: .5em;

}

</style>

</head>

<body>

<h1>学生信息管理</h1>

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<td>winnie</td>

<td>female</td>

<td>

</td>

</tr>

</tbody>

</table>

// 给添加按钮绑定事件

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

var tbody = document.getElementsByTagName("tbody")[0];

btn_add.onclick = function(){

// 向tbody中追加一行数据

var newTr = tbody.firstElementChild.cloneNode(true);

newTr.setAttribute("class","");

newTr.children[1].innerHTML+=Math.floor(Math.random()*100);

console.log(newTr);

tbody.appendChild(newTr);

}

// 给删除按钮绑定事件

tbody.onclick = function(event){

if(event.target.nodeName === "A" &&

event.target.getAttribute("class") === "btn_del" ){

var current_tr = event.target.parentNode.parentNode;

// 将tr从tbody中移除

tbody.removeChild(current_tr);

}

// 给批量删除按钮绑定事件

document.getElementById("btn_delmore").addEventListener("click",

function(e){

var inputs = document.querySelectorAll("input[type=checkbox]");

console.log(inputs);

for(var i in inputs){

if(inputs[i].checked){

tbody.removeChild(inputs[i].parentNode.parentNode);

}

},false);

</script>

</body>

</html>

事件类型

事件类型

UI事件

load

当页面完全加载后在window上触发，当所有框架加载完时在框架集上触发，当图像加载完毕时在img元素上触发，当嵌入的内容加载完时在<object>触发

unload

当页面完全卸载后在window上触发，当所有框架都卸载后在框架集上触发，当嵌入的内容卸载完毕后再<object>上触发,(firefox不支持)

select

当用户选择文本框（<input>,<textarea>）中的一个或多个字符时

change

在select的下拉列表的选中的选项更改的时候触发

resize

当浏览器窗口被调整到一个新的高度或者宽度时，会触发

scroll

当用户滚动带滚动条的元素中的内容时，在该元素上触发resize,scroll会在变化期间重复被激发，尽量保持代码简单

焦点事件

blur 元素失去焦点的时候触发

focus 元素获得焦点的时候触发，不支持冒泡

//IE支持

focusin 与focus等价，支持冒泡

focusout 与blur等价，支持冒泡

鼠标与滚轮事件

click

点击主鼠标按钮或者按下回车按键的时候触发。只有在一个元素上相继发生mousedown,mouseup事件，才会触发click事件

dblclick

双击主鼠标按钮时触发.只有在一个元素上相继触发两次click时间才会触发dbclick事件

mousedown 任意鼠标按钮按下时触发

mouseup 释放鼠标按钮触发

mousemove 鼠标在元素内部移动的时候重发触发

mousewheel 滚轮事件

mouseenter 鼠标光标从元素外部首次移动到元素范围内激发，不冒泡。【不支持子元素】

mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发，不冒泡【不支持子元素】

mouseover 鼠标位于元素外部，将其首次移入另一个元素边界之内时触发【支持子元素】

mouseout 在位于元素上方的鼠标光标移入到另外一个元素中。【支持子元素】在被选元素上与mouseleave效果相同

Vi dytable.html

动态表格dytable.html继续添加事件：

// 当光标移动的某一行上，为这一行添加背景

tbody.onmouseover = function(event){

var target = event.target;

if(target.nodeName === "TD"){

target.parentNode.className = "current"

}

tbody.onmouseout = function(event){

var target = event.target;

if(target.nodeName === "TD"){

target.parentNode.className = ""

}

键盘与文本事件

keydown 按下键盘任意键时触发，如果按住不放会重复触发此事件

keypress 按下键盘字符键时触发，如果按住不放会重复触发此事件

keyup 释放键盘上键时触发

当键盘事件发生时，event对象的keyCode属性中会包含一个代码与键盘上的特定键对应，对数字字母键，keyCode属性的值与ASCII码中对应的小写字母和数字编码相同