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

收藏

9219人加入学习
价格
限期免费
教学计划
学习有效期
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所学知识串联到一起,也可以启发开发思路。

      DOM表单操作

      1. var frm = document.forms.frm; //找到表单集合下name教frm的表单
        2.setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,次数是一次
        setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式,次数不定
        3.表单提交事件和方法
        表单提交事件:onsubmit="return onsub()"
        表单提交方法:onsubmit();
      2. 表单焦点事件和方法
        页面加载完成之后获取焦点的方法 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() 方法可返回带有指定名称的对象的集合。

      JavaScript的DOM应用笔记

      dom可以做的事情很多很多

      JavaScript的DOM应用笔记

      这里的修改className属性,因为长度会动态改变,所以需要将修改的下标设为0,

      高老师的讲的课是精品,精品,精品
      好几个案例做的都有问题,免费的也要做仔细一点呀
      一般般吧
      超喜欢高洛峰老师的,讲得很好!
      谢谢老师的分享,案例加上讲解,逻辑清晰。
      高老师的课真的都精品。
      推荐好课(试听)
      更新

      Java  实战   10428

      最新课程体验中
      限时免费

      升级

      前端  实战   8824

      最新课程体验中
      限时免费

      更新

      前端  中级   9215

      最新课程体验中
      限时免费

      更新

      前端  实战   8217

      最新课程体验中
      限时免费

      升级

      UI/UE  中级   6366

      最新课程体验中
      限时免费

      更新

      Linux  中级   7562

      最新课程体验中
      限时免费

      更新

      PHP  实战   8847

      最新课程体验中
      限时免费

      更新

      Python  实战   9293

      最新课程体验中
      限时免费

      辅导猿
      Sample avatar
      xxyd_golang

      辅导猿

      Sample avatar
      xxyd_python

      辅导猿

      Sample avatar
      xxyd_php

      辅导猿

      Sample avatar
      xxyd_java

      辅导猿

      Sample avatar
      xxyd_h5x

      辅导猿

      最新成员
      Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar Sample avatar
      学习资料 内容数量
      任务数量 90 关
      视频教程 270 小时+
      教学案例 630 个+
      辅助资料 270 个+
      练习作业 380 个+
      阶段测评 1400 道+
      最新评价
      Image placeholder

      专注

      评价:高老师的讲的课是精品,精品,精品

      Image placeholder

      Beyant

      评价:好几个案例做的都有问题,免费的也要做仔细一点呀

      Image placeholder

      仲夏

      评价:一般般吧

      Image placeholder

      Nyacat

      评价:超喜欢高洛峰老师的,讲得很好!

      Image placeholder

      mogodes

      评价:谢谢老师的分享,案例加上讲解,逻辑清晰。

      Image placeholder

      JiangJooh

      评价:高老师的课真的都精品。