WebAPI之DOM实战教程#JavaScript的核心技术
 收藏

    

 9213人加入学习

价格

限期免费

教学计划

默认计划

学习有效期

2020-04-03至2023-03-27

课程介绍

本阶段是DOM课程的讲解，从DOM的概念，到DOM的获取元素对象的各种方法，以及对样式的操作，对元素内容和属性的操作，对事件的操作，位置属性操作等，再到实战项目，全程覆盖DOM的每个知识点，并且讲解每个知识点，都结合网页中流行的特效案例进行讲解。并配有项目开发过程。

第一关： JavaScript的DOM应用 本关是DOM学习的第一关，重点讲解DOM使用，包括对DOM的介绍，文档对象的属性和方法的使用，获取文档的对象集合，操作对象的属性，操作对象的单个样式，和操作对象的类样式，以及通过名子属性获取元素集合，通过类名获取元素对象集合等内容。并结合伸缩菜单，以及选择卡等案例，对本关内容进行贯穿。

第二关：DOM导航和节点操作 本关内容是DOM导航和节点操作，包括DOM树的结构介绍，节点的属性，以及在DOM节点之间进行导航，重点是创建元素节点，并在DOM树中追加，以及删除和替换节点的操作，并结合几个常用的DOM导航案例进行讲解。

第三关：DOM元素的位置属性和事件操作 本关主要的内容是讲解元素的各种位置属性，并通过位置属性讲解DOM的动画开发，以及讲解DOM中的常用事件，和事件对象，以及事件冒泡处理，并通过常用的一些事件，结合位置属性，开发页面中常见的动画。

第四关：DOM表单操作及相关的案例 本关主要讲解和DOM操作表单相关的内容，包括表单使常用的事件和操作方法，和JS表单验证API。重点讲解联动菜单，权限选择和表单验证等，常见的和表单相关的实用案例。

第五关：原生JS版贪吃蛇游戏项目开发过程 本关内容是经典的网页游戏贪吃蛇案例开发全过程，　从项目需求分析到游戏上开发过程一步步实现，　并以面向对象的思想开发，并结合游戏的算法和业务流程，可以将JavaScript基础、BOM和DOM所学知识串联到一起，也可以启发开发思路。

 第1关：JavaScript的DOM应用开始学习

 第2关：DOM导航和节点操作开始学习

 第3关：DOM元素的位置属性和事件操作开始学习

 任务:4.offsetTop和offsetLeft偏移位置属性 

 第4关：DOM表单操作及相关的案例开始学习

 第5关：原生JS版贪吃蛇游戏项目开发过程开始学习

DOM表单操作

var frm = document.forms.frm; //找到表单集合下name教frm的表单
2.setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,次数是一次
setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式，次数不定
3.表单提交事件和方法
表单提交事件：onsubmit="return onsub()"
表单提交方法：onsubmit();
表单焦点事件和方法
页面加载完成之后获取焦点的方法 focus();
window.onload = function () {
```
 document.frm.username.focus();
```
};

onblur="one()" 失去焦点事件进行验证
onfocus = "two()" 获取焦点事件进行验证
5.表单改变事件 onchange(); 比如选择一级菜单用改变事件能够显示一级菜单内的内容
onkeyup="this.value = this.value.toUpperCase()" 键盘抬起事件==》输入的值全都直接转换成大写
alert(document.frm.sel.selectedIndex); //找到下拉菜单所选元素的索引值(选中的索引)
6.表单操作验证API

7.三级联动菜单
联动菜单系统的方法

8.var betext = this.innerText; //表格里面的纯文本内容

9.select() 方法用于选择该元素中的文本。
//选中表格里的文本
inputs.select();

?大月月??

DOM元素的位置属性和事件操作笔记

1.clientWidth，clientHeight
可视部分的宽度和高度，内容+padding
如果出现滚动条，会覆盖元素宽高，要减去滚动条的宽高不包滚动条边线
2.offsetWidth,offsetHeight 内容+padding+border （图片/操作元素自身的宽高）包滚动条等边线
3.clientLeft,clientTop 读取元素的border的宽度和高度
4.offsetParent 最近的父级元素(只读属性)
offsetLeft 获取当前元素到定位父节点的left方向的距离相当于定位元素的 left属性。
offsetTop 获取当前元素到定位父节点的top方向的距离相当于定位元素的 top 属性。
偏移位置属性需要定位脱离文档流（元素左上角顶点位置坐标 ==》元素自身的距离）
5.滚动的宽高带滚动条的
scrollWidth：元素内容真实的宽度，内容不超出盒子高度时为盒子的clientWidth 会随对象中内容超过可视区后而变大。
scrollHeight：元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight
scrollLeft、scrollTop 可以获取或设置元素的滚动条到元素左边/顶部的距离
6.two.innerHTML = one.innerHTML; //把one的内容复制到two里面

 ****** Document文档视图
 * document.documentElement.clientWidth 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏、滚动条）
 * document.documentElement.clientHeight 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏、滚动条）
 * 
 * document.documentElement.offsetHeight 获取整个文档的高度（包含body的margin）
 * document.body.offsetHeight 获取整个文档的高度（不包含body的margin）
 * 
 * document.documentElement.scrollTop 返回文档的滚动top方向的距离（当窗口发生滚动时值改变）
 * document.documentElement.scrollLeft 返回文档的滚动left方向的距离（当窗口发生滚动时值改变）

7.事件对象属性
clientX 事件触发鼠标X轴的位置(文档中的鼠标水平位置)
clientY 事件触发鼠标Y轴的位置
screenX 事件触发鼠标相对于屏幕的X轴的位置
screeny 事件触发鼠标相对于屏幕的Y轴的位置

8.事件冒泡

阻止冒泡兼容性写法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

为元素添加样式
style="position:relative" 创建容器元素
style="position:absolute"创建动画元素

动画设置
pos++;
elem.style.top=pos+'px';
elem.style.left=pos+'px';

9.常用事件
鼠标事件
onclick：点击某个对象时触发
ondblclick：双击某个对象时触发
onmouseover：鼠标移入某个元素时触发
onmouseout：鼠标移出某个元素时触发
onmouseenter：鼠标进入某个元素时触发
onmouseleave：鼠标离开某个元素时触发
onmousedown：鼠标按下时触发
onmouseup：鼠标抬起时触发
onmousemove：鼠标被移动时触发
onwheel：鼠标滚轮滚动时触发
oncontextmenu：点击鼠标右键时触发

键盘事件

onkeydown：键盘的键按下时触发
onkeyup：键盘的键放开时触发
onkeypress：按下或按住键盘键时触发

框架/对象事件
onresize：浏览器窗口大小改变时触发
onabort：图形的加载被中断时触发
onload：元素加载完时触发
onerror：当加载文档或者图片时（没找到）发生的错误时触发
onscroll：文档滚动时触发(滚动事件) scrollWidth scrollHeight(滚动的宽高) scrollTop scrollLeft
onpageshow：用户访问页面时触发
onunload：用户退出页面时触发

表单事件
onfocus：元素获得焦点时触发
onblur：元素失去焦点时触发
onchange：元素内容改变时触发
oninput：元素获取用户输入时触发
onsubmit：提交按钮时触发
onreset：重置按钮时触发
onselect：文本被选中时触发

拖动事件
ondrag：元素正在拖动时触发
ondragend：用户完成元素拖动时触发

多媒体事件
onplay：在视频/音频开始播放时触发
onended：在视频/音频播放结束时触发
onpause：在视频/音频暂停时触发

position：static 默认值，没有定位，元素出现在正常的流中；(原位置)

10.什么是document.body？返回html dom中的body节点即

什么是 document.documentElement？返回html dom中的root 节点即

?大月月??

DOM导航和节点操作笔记

1.通过css选择器获取元素对象集合(IE8之前不支持)
var obj= document.querySelector("#one"); //操作一个元素
obj.style.cssText ="border:5px solid green"; //添加样式
//var objs = document.querySelectorAll(".cls1"); //多个元素集合
//var objs = document.querySelectorAll("p.cls12"); //多个元素中的一个 p下面的cls12
var objs = document.querySelectorAll("div p"); //div 下的 p
for (var i = 0; i<objs.length;i++){
objs[i].innerHTML = "this is a test";
objs[i].style.cssText ="border:5px solid green"; //添加样式
}

2.HTML DOM 导航

3.节点属性

节点名称: nodeName(只读)
节点值:nodeValue 类似textContent 或innerHTML
节点类型:nodeType(只读)

文本

元素节点的nodeName 等于标签名 ELEMENT_NODE 类型1 ul对应元素节点
属性节点的nodeName 是属性名称 ATTRIBUTE_NODE 类型2 width:100px;对应属性节点
文本节点的nodeName 总是#text TEXT_NODE 类型3 （空格也属于文本节点）文本对应文本节点
文档节点的nodeName 总是#document

4.DOM节点之间导航
parentNode:当前节点的父节点 --根节点
childNodes[nodenumber]:子节点(子节点是复数)
firstChild:父节点下面第一个子节点
lastChild:父节点下面最后一个子节点
nextSibling:下一个兄弟节点
previousSibling:上一个兄弟节点

5.创建元素节点

创建新HTML元素节点
document.createElement(); 创建新的节点
document.creatTextNode(); 文本节点(内容)
追加节点
appendChild()方法
insertBefore(a，p1) 方法把a标签插到p1的前面
删除已有HTML元素(必须有父元素)
parent.removeChild(child);
替换元素(必须有父元素)
parent.replaceChild(para,child); parent 是被替换元素的父元素 para是替换元素，child 是被替换元素

?大月月??

JavaScript的DOM应用笔记

1.DOM 文档对象模型
文档document

对象object

查找HTML对象

HTML对象合集

操作元素内容Model

操作元素属性

操作样式

id=title下的所有h3标签
var titles = document.getElementById("title").getElementsByTagName("h3");

11111111111

var checkbox = document.getElementsByName("id[]");
通过类名获取对象

var objs = document.getElementsByClassName("one tit"); 两个类名

document中的三个方法
var objs=document.getElementsByTagName("div");(返回包含带有指定标签名称的所有元素的节点列表)
var objs=document.getElementById("one"); 返回带有指定id的元素
var objs=document.getElementsByClassName("two"); 返回带有指定类名的所有元素的节点列表
getElementsByName() 方法可返回带有指定名称的对象的集合。