JS的BOM DOM讲解

知识点-JS的BOM

1.⽬标

  掌握BOM中常⽤的API

2.路径

  1. BOM介绍

  2. BOM⾥⾯的五个对象

3.讲解
3.1概述
Browser Object Model ,浏览器对象模型. 为了便于对浏览器的操作，JavaScript封装了对浏览器中各个对象，使得开发者可以⽅便的操作浏览器中的各个对象。

 3.2.BOM⾥⾯的五个对象

3.2.1window: 窗体对象

 

 

 3.2.2,navigator:浏览器导航对象【了解】  

 

 3.2.3,screen:屏幕对象【了解】

 3.2.4,history:历史对象【了解】

 3.2.5,location:当前路径信息(最重要)

 location.href; 获得路径

location.href = "http://www.baidu.com"; 设置路径,跳转到 百度⻚⾯

4.⼩结

1. BOM: 浏览器对象模型, JS⾥⾯封装了五个对象 ⽤来操作浏 览器的

2. window对象

   alert() 弹出警告框

   confirm() 弹出确认框

   prompt() 弹出输⼊框

   setInterval('函数()',时间) 周期执⾏

   setTimeout(''函数()',时间) 延迟执⾏

3. location

   location.href; 获得路径

   location.href=""; 设置路径

 

 

知识点-DOM介绍

⽬标

  了解dom相关的概念

分析

   1. 什么是dom

   2. 什么是dom树

讲解

1. 什么是dom

   DOM：Document Object Model，⽂档对     象模型。是js提 供的，⽤来访问⽹⻚⾥所有     内容的(标签,属性,标签的内容)

2. 什么是dom树

   当⽹⻚被加载时，浏览器会创建⻚⾯的DOM对象。DOM 对象模型是⼀棵树形结构：⽹⻚⾥所有的标签、属性、⽂ 本都会转换成节象，按照层级结构组织成⼀棵树形结 构。

 

  整个⽹⻚封装成的对象叫document

  标签封装成的对象叫Element

  属性封装成的对象叫Attribute

  ⽂本封装成的对象叫Text

 

⼀切皆节点, ⼀切皆对象

 

⼩结

1. dom: ⽂档对象模型, ⽤来操作⽹⻚

2. dom树: html通过浏览器加载到内存⾥⾯形成了⼀颗dom 树, 我们就可以操作dom树节点(获得节点, 添加节点, 删除 节点)

 

知识点-操作标签

1. ⽬标

   能够使⽤dom操作标签

2. 分析

1. 获取标签

2. 操作标签

3.讲解

3.1. 获取标签

 

 

 

 

 3.2. 操作标签

 

 

 4.⼩结

1. 获得标签

  document.getElementById("id”) 根据id获得

  document.getElementsByTagName("标签名") 根据标

   签名获得
  document.getElementsByClassName("类   名") 根据类名获得
2. 操作节点(标签,⽂本)
   document.createElement(tagName) 创建标签Element对象
   document.createTextNode("⽂本") 创建⽂本节点
         parentElement.appendChild(sonElement)    插⼊标签

  element.remove() 删除标签

知识点-操作标签体
1. ⽬标
   掌握操作标签体内容的⽅法
2. 路径
   获取/设置标签体内容
3. 讲解
3.1语法
   获取标签体内容：标签对象.innerHTML

设置标签体内容：标签对象.innerHTML = "新的HTML代 码";

   innerHTML是覆盖式设置，原本的标签体内     容会被覆盖 掉；

   ⽀持标签的 可以插⼊标签, 设置的html代码     会⽣效

3.2示例

 

 4. ⼩结

1. 获得标签的内容 (⼀并获得标签)

 2. 设置标签的内容(①会把前⾯的内容覆盖 ②⽀持标签的)

 知识点-操作属性

1. ⽬标

   能够操作HTML标签的属性

2.路径

  1. 使⽤JS操作标签的属性

3. 讲解

  每个标签Element对象提供了操作属性的⽅法

 

 

 4.⼩结

1. getAttribute(attrName) 获取属性值

2. setAttribute(attrName, attrValue) 设置属性值

3. removeAttribute(attrName) 删除属性

第四章-JS案例

案例-使⽤JS完成表单的校验

1. 案例需求

 ⽤户名输⼊框,电⼦邮箱, ⼿机号码 , 获得焦点的时候给⽤户 提示, 失去焦点进⾏ 校验

⽤户名：只能由英⽂字⺟和数字组成，⻓度为4～16个字

符，并且以英⽂字⺟开头

⼿机号：以1开头, 第⼆位是3,4,5,7,8的11位数字 /^1[34578]\d{9}$/

2.思路分析

1. 给⽤户名输⼊框设置获得焦点事件

 2. 创建showTips()函数提示

 3. 给⽤户名输⼊框设置失去焦点事件

 4. 创建checkUsername()函数

 3.代码实现

 

 

 

 

 

 4,⼩结

1. 获得和失去焦点

2. 函数

3. 操作标签体

4. 获得标签, 获得标签的value

案例-使⽤JS完成图⽚轮播效果

1.需求分析

  实现每过3秒中切换⼀张图⽚的效果，⼀共3    张图⽚，当显 示到最后1张的时候，再次显示    第1张。

2.思路分析

1. 创建定时任务

 3.代码实现

 

 4.⼩结

1. 定时任务

 2. 操作属性

 案例-JS控制⼆级联动

1.需求分析

 在注册⻚⾯添加籍贯,左边是省份的下拉列表,右边是城市的 下拉列表.右边的select根据左边的改变⽽更新数据

2.思路分析

1. 创建这个⻚⾯ (两个select)

2. 给省份的select设置onchange事件

3. 当省份改变的时候

 3.代码实现

 

 

 4.⼩结

1. 内容改变事件

2. ⼆维数组

3. innerHTML

   会把前⾯的内容覆盖掉

   ⽀持标签的

4. dom

   ⽗节点.appendChild(⼦节点)

   document.createElement()

   document.createTextNode()