03 JavaScript-D0M基础

03-D0M基础

1事件

1.1 概述

JS是以事件驱动为核心的一门语言。

1.2 事件三要素

事件源

事件

事件驱动程序。

三句话：获取事件源、绑定事件、书写事件驱动程序。

体验事件：

1.事件源（引发后续事件的标签）

2.事件(js已经定义好，直接使用）

3.事件驱动程序（对样式和html的操作）(DOM操作）

需要掌握的获取事件源的三种方式：

var div=document.getElementById("box")；

var arr1 =document.getElementsByTagName("div'"

var arr2 = document.getElementsByClassName("leiming")；

绑定事件的方法：

1.匿名绑定

2. 用函数名绑定

3. 行内绑定

可以操作标签的属性和样式:

div.className = "aaa"; //更改样式，也就是Css代码中所写的哪个样式

div.style.width ="200p×"；

div.style.height ="200px"；

div.style.backgroundColor = "red";

案例：点击盒子，改变盒子的宽高颜色等样式，并弹出对话框alert(1)

1.2.1 事件有哪些

Onclick              鼠标单击

Ondblclick               鼠标双击

Onkeyup                 按下并释放键盘上的一个键时触发

Onchange               文本内容或下拉菜单中的选项发生改变

Onfocus                 获得焦点，表示文本框等获得鼠标光标

Onblur               失去焦点， 表示文本框等失去鼠标光标

Onmouseover           鼠标悬停，即鼠标停留在图片等的上方

Onmouseout             鼠标移出，即离开图片等所在的区域网页文档加载事件  

Onload                      网页文档加载事件

onunload      关闭网页时

onsubmit       表单提交事件

onreset         重置表单时

1.3 案例

1.京东广告栏（类）

2. 京东狗(src)(this)3. 手机京东（前两个结合）

2 D0M概述

2.1 解析过程

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementByld是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

2.2 D0M（文档对象模型）

document是文档对象模型的一部分。DOM是一个复合的数据类型。

2.3 0OM的数据结构（树状）

2.4 HTML的组成部分为节点( Node )

在HTML当中一切都是节点......

由结构图中我们可以看到，整个文档就是一个文档节点。

每一个HMTL标签都是一个元素节点（标签）。

标签中的文字则是文字节点。（文本）

标签的属性是属性节点。（属性）

2.5 D0M节点的获程

操作节点，必须首先找到该元素。有三种方法来做这件事：

1.通过id找到HTML元素

document.getElementById("demo");

2. 通过标签名找到HTML元素

document.getElementsByTagName("div'"

3.通过类名找到HTML元素 派通过类名查找HTML元素

在IE 5, 6, 7, 8中无效

document.getElementsByClassName("a"

新增：通过css选择器获取元素

document.querySelector("css选择器”）单个元素

document. querySelectorAll("css选择器“) 一组元素

特殊情况：数组中的值只有1个。

document.getElementsByTagName("div)[0];取数组中第

一个元素

document.getElementsByClassName("a)[0];取数组中第一个元素

2.6 D0M访问关系(节点的获得）

节点的访问关系，是以属性的方式存在的。

DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

2.6.1 父节点(parentNode )

调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.

案例：

1.通过子盒子设置父盒子的背景色。

2.关闭二维码

2.6.2 兄弟节点

nextSibling:调用者是节点。

1E678中指下一个元素节点（标签）

在火狐谷歌E9+以后都指的是下一个节点（包括空文档和换行节点）。

nextElementSibling：在火狐谷歌E9都指的是下一个元素节点。

总结：在(E678中用nextSibling，在火狐谷歌IE9+以后

用nextElementSibling

previousSibling:调用者是节点。

1E678中指前一个元素节点（标签）。

·在火狐谷歌E9+以后都指的是前一个节点（包括空文档和换行节点）。

previousElementSibling:在火狐谷歌IE9都指的是前一个元素节点。

总结：在E678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling。

1.9.3 单个子节点

firstChild:调用者是父节点。

0 1E678中指第一个子元素节点（标签）。

o 在火狐谷歌E9+以后都指的是第一个节点（包括空文档和换行节点）。

firstElementChild:在火狐谷歌E9都指的第一个元素节点。

lastChild:调用者是父节点。

O 1E678中指最后一个子元素节点（标签）。

o 在火狐谷歌E9+以后都指的是最后一个节点（包括空文档和换行节点）。

lastElementChild：在火狐谷歌E9都指的最后一个元素节点。

1.9.4所有子节点

childNodes:它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点（他还是W3C的亲儿子 ）

火狐谷歌等高本版会把换行也看做是子节点

nodeType==1时才是元素节点（标签）

nodeType ==1表示的是元素节点记住 元素就是标签

nodeType ==2 表示是属性节点 了解

nodeType==3是文本节点了解

children：非标准属性，它返回指定元素的子元素集合。

但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几平所有浏览器的支持。

children在IE6/7/8中包含注释节点，在1E678中，注释节点不要写在里面。

1.9.5 知识补充

随意得到兄弟节点。

节点自己.parentNode.children[index];

作为了解内容：

function siblings(elm)

var a = [];

var p =elm.parentNode.children;

for(var i =0, pl=p.length;i<pl;i++)[

if(p [i] !== elm)

a.push(p[i]);

return a;

//定义一个函数。必须传递自己。定义一个数组，获得自己的父亲，在获得自己父亲的所有ル子（包括自己）。遍历所有的儿子，只要不是自己就放进数组中。

2.6.6要明自两个属性

parentNode 和 children 这两个属性。

2.7 D0M节点操作

节点的访问关系都是属性。

节点的操作都是函数或者方法。

2.7.1创建节点

使用方法是这样的document.createElement();

新的标签（节点）=document.createElement(“标签名”）；

2.7.2插入节点

使用方法：父节点.appendChild();

父节点.appendChild（新节点）；父节点的最后插入一个新节点

使用方法：父节点.insertBefore（要插入的节点，参考节点）；

父节点.insertBefore（新节点，参考节点）在参考节点前插入：

如果参考节点为null,那么他将在节点最后插入一个节点。

2.7.3删除节点

用法：用父节点删除子节点。

父节点.removeChild(子节点）：//必须指定要删除的子节点

父节点.removeChild（子节点）；//必须指定要删除的子节点

节点自己删除自己：node.parentNode.removeChild(node)

2.7.4复制节点( oldNode.cloneNode( true ) )

想要复制的节点调用这个函数cloneNode()，得到一个新节点。

方法内部可以传参，如果是true, 深层复制，如果是false，只复制节点本身。

新节点-要复制的节点.cloneNode（参数）；

1参数可选复制节点

用于复制节点，接受一个布尔值参数，true表示深复制（复制节点及其所有子节点），false 表示我复制（复制节点本身，不复制子节点）

2.7.5节点属性(节点.属性）两种方法：

第一种

获取：节点.属性；

设置：节点.属性=值；

第二种

获取：getAttribute（属性名称）

设置：setAttribute（属性名称，值）

删除：removeAttribute（属性名称）注意：IE6、7不支持。

3 D0M详解（属性操作）

3.1D0M元素

DOM就是html文档的模型抽象。数据以树的形式在内存中排列。

节点就是DOM的组成。是一个对象，有属性和方法。获取方式有很多种。

节点分为元素节点（标签），文本节点，属性节点。

区分方法：nodeType:1是标签，2是属性，3是文本

3.2案例

1.显示和隐藏盒子

2.美女相册( placehold.it网站，获取xxx*xxx大小的图片）

3.3 value和innerHTML和innerText和textContent

1.老版本的火狐不支持innerText，支持

textContent

2.p不能嵌套p。h1不能嵌套h1。a连接内部不能嵌套

4 D0M案例

表单元素的常用属性：tgpe, value.checked, selected, disabled

1. 禁用文本框

2. 获取/失去焦点输入事件。

3. 用户注册高亮显示

4. select选鲤鱼

5.为文本框赋值/取值并打印

6. 全选反选

4.1菜单练习，属性获取修改和删除（属性绑定）

属性绑定的两种方式不能交换使用，赋值和获取值必须使用用一种方法。

元素节点.属性（元素节点[属性]）:绑定的属性

值不会出现在标签

get/set/removeAttribut:绑定的属性值会出现在标签上。

4.2 总结

/父节点

dom.parentNode;

//访问兄弟节点

dom.previousSibling

dom.previousElementSibling

dom.nextSibling

dom.nextElementSibling;

dom.firstChild;

dom.firstElementChild;

dom.lastChild;

dom.lastElementChild;

//获取所有子节点

dom.childNodes;

dom.children;

//获取指定的兄弟节点

dom.parentNode.children[index];

//获取所有的兄弟节点（返回值是一个数组）

function fn(ele)f

//定义一个新数组，装所有的兄弟元素，将来返回

var newArr =[];

var arr =ele.parentNode.children;

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

//判断，如果不是传递过来的元素本身，那么添加到新数组中。

if(arr[il!==ele)[

newArr.push(arr[i]);

newArr.push(arr[i]);

//newArr [newArr.length]= arr[i];

return newArr;

4.3 工具类的封装tools.js（了解, 尝试）

隔行变色

百度换肤

4.4 D0M创建元素

1.document.write();

2.直接利用元素的innenHTML方法。(innerText方法不识别标签）

3. 利用dom的api创建元素document.createElement(“节点”）;

4.5 00M添加元素

appendChild（新节点）；插入子元素

insertBefore（新节点，参照节点）；在指定元素前插入

4.6 D0M删除元素

removeChild();刪除子元素

4.7D0M替换元素

replaceChild（新节点，旧节点）;替换子元素

4.8 D0M克隆元素

cloneNode(true)克隆元素，深层复制

案例：半透明的遮蔽层