WebAPI之DOM实战教程#JavaScript的核心技术
收藏本阶段是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所学知识串联到一起,也可以启发开发思路。
object对象
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();
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 节点 即
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 是被替换元素
1.DOM 文档对象模型
文档document
对象object
查找HTML对象
HTML对象合集
操作元素内容Model
操作元素属性
操作样式
id=title下的所有h3标签
var titles = document.getElementById("title").getElementsByTagName("h3");
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() 方法可返回带有指定名称的对象的集合。
JavaWeb从基础到项目实战
Java 949
JavaWeb项目实战全程实录#学完你就可以自己用Java做项目了
Java 实战 5997
Bootstrap从入门到实战三天精品课程
前端 实战 3158
PHP项目开发全程实录【已完结】
PHP 实战 3322
WebAPI之DOM实战教程#JavaScript的核心技术
前端 中级 3289
Web前端页面各种布局方式全攻略#实战全程实录
前端 实战 3055
C4D三维立体设计全套课程#C4D字体案例实战
UI/UE 中级 1927
生产环境下的LAMP环境搭建#全部应用最新版本软件
Linux 中级 3027
辅导猿
辅导猿
辅导猿
辅导猿
辅导猿
学习资料 | 内容数量 |
---|---|
任务数量 | 90 关 |
视频教程 | 270 小时+ |
教学案例 | 630 个+ |
辅助资料 | 270 个+ |
练习作业 | 380 个+ |
阶段测评 | 1400 道+ |
专注 好
Beyant 好
仲夏 好
Nyacat 好
mogodes 好
JiangJooh 好