win对象、DOM及事件

最新推荐文章于 2024-04-01 13:14:12 发布

HuiDT

最新推荐文章于 2024-04-01 13:14:12 发布

阅读量241

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_42842786/article/details/101637800

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

1. 什么是DOM
2. Event Listener Breakpoints 事件侦听器断点
3. DOM操纵html输出流
4. DOM EventListener
5. 事件流
6. 事件处理
7. 事件对象
8. JS 对象
9. DOM 对象控制HTML
10. 注意事项
11. window对象
12. window尺寸
13. window方法
14. 计时器
15. History对象
16. Location对象
17. screen对象
18. 认识面向对象
19. 深入了解面向对象

1. 什么是DOM

DOM 事件被发送用于通知代码相关的事情已经发生了。

每个事件都是继承自Event 类的对象，可以包括自定义的成员属性及函数用于获取事件发生时相关的更多信息。

事件可以表示从基本用户交互到渲染模型中发生的事件的自动通知的所有内容。

参考：https://developer.mozilla.org/zh-CN/docs/Web/Events

2. Event Listener Breakpoints 事件侦听器断点


Animation	动画
Canvas	画布
Clipboard	剪贴板
Control	控制
DOM Mutation	DOM突变
Device	设备
Drag / drop	拖放
Geolocation	地理位置
Keyboard	键盘
Load	加载
Media	媒体
Mouse	鼠标
Notification	通知
Parse	解析
Picture-in-Picture	字母画面
Pointer	指针
Script	脚本
Timer	计时器
Touch	触摸
WebAudio	web音频
Window	窗口
Worker	工人
XHR	XMLHttpRequest对象

3. DOM操纵html输出流

  （1）改变html输出流
  （2）寻找元素
        通过id寻找元素
        通过标签名寻找元素
  （3）改变html内容   
        使用属性:innerHTML
  （4）改变html属性
        使用属性：attribute

4. DOM EventListener

  （1）addEventListener
           方法用于向指定元素添加时间句柄
  （2）removeEventListener
           移除添加的事件句柄
        附：可添加多个句柄，句柄之间不会覆盖
        mouseover、mouseout事件

5. 事件流

  （1）事件流
           描述的是在页面中接受事件的顺序
  （2）事件冒泡(false)
           由最具体（最内层）的元素接收，然后逐级向上传播至不具体的节点（甚至文档）
  （3）事件捕获(true)
           最不具体的节点先接收事件，而最具体的节点应该是最后接收事件

6. 事件处理

  （1）html事件处理
           直接添加在html结构中
           缺点：可能需要修改多处
  （2）DOM　０级事件处理
           把一个函数赋值给另一个事件处理程序属性,
           例：`var btn1 = document.getElementById("wer").onclick = function()`
           注意：后面的函数会覆盖之前的函数
  （3）DOM　２级事件处理
           addEventListener("事件名"，"事件处理函数"，"布尔值");
           true：事件捕获
           false：事件冒泡
           removeEventListener();
                 同０级事件处理相比它不会覆盖之前的事件
  （4）IE事件处理程序
           attachEvent
           detachEvent
           附：针对IE版本<=8的版本，同addEventListener、removeEventListener类似
                 click改为onclick即可

7. 事件对象

    （1）事件对象
            在触发DOM事件时都会产生一个事件对象
    （2）事件对象event
            1）type：获取事件类型
            2）target：获取事件目标
            3）stopPropagation()：阻止事件冒泡
            4）preventDefault()：阻止事件默认行为

注：自己操作时出了很多问题，暂未解决，我认为这部分知识可能发生了更新

8. JS 对象

    JS中所有事物都是对象（内置对象：字符串、数组、函数......）
    每个对象都带有属性和方法，可自定义对象
    创建方法：
            （1）new操作符 (对象的构造函数同函数一样，然后new就行)
            （2）直接赋值（像构造函数一样）
            （3）函数创建（函数名即对象名）

    String对象
            方法：  
            （1）indexOf() 查找字符串
            （2）match() 内容匹配
            （3）replace() 替换内容（2个参数）
            （4）大小写转换 toUpperCase() toLocaleLowerCase()
            （5）字符串转数组split(",")，参数表示转换的根据
    DATE日期对象
            （1）获得方法new Date()
            （2）getFullYear()、getMonth()等等
             注：getMonth或其他某些函数从0开始计数，所以需要+1

    Array数组对象
            （1）创建
            （2）访问
            （3）常用方法   
                    a) concat()数组合并
                    b) sort()排序——升序、降序（奇葩方法）
                    c) push()末尾追加元素
                    d) reverse()数据元素翻转
    
    Math对象
            常用方法
            （1）Math.round(3.8) 四舍五入
            （2）Math.random()*8 从0到1*8随机生成，可使用parseInt(Math.random()*10)转换为int型
            （3）min & max
            （4）abs()绝对值

9. DOM 对象控制HTML

    （1）getElementsByTagName、getElementsByName同名标签会一起获得，存在对象里
    （2）getAttribute获取当前元素的某个属性
    （3）setAttribute("","") 设置某个属性(新属性or已有的属性)
    （4）var a=document.getElementsByTagName("ul")[0].childNodes;存在NodeList，类数组（不是一个数组）
    （5）获取父节点 document.write(document.getElementById("divsp").parentNode.nodeName);
    （6）创建元素节点 document.createElement("button");
    （7）appendChild往末尾追加节点
    （8）insertBefore插入节点
    （9）div.removeChild(div.childNodes[1]);删除节点
    （10）offsetHeight、scrollHeight获取页面尺寸

10. 注意事项

不要在文档加载完成之后使用document.write，这会覆盖之前的文本

11. window对象

  BOM（Browser Object Model）核心，指当前浏览器对象窗口
  所有JS全局对象、函数、变量均为window对象成员
  例如全局变量位window属性、全局函数为window方法，甚至document也是其属性之一

12. window尺寸

参考文章：https://juejin.im/post/5e9e9d3cf265da47f517a116

  window.innerWidth 浏览器窗口内部高度(不包含滚动条，意思是滚动条其实是算在窗口里面的)  
  window.innerHeight(经本人亲自检验，的确是浏览器内部窗口高度，也就是显示网页内容的地方)

13. window方法

  window.open(); 打开新窗口（一般会被浏览器拦截）
  window.close(); 关闭当前窗口

14. 计时器

  (1)setInterval有固定的时间延迟循环调用函数
        对应clearInterval(nIntervId);要取消的定时器的 ID。是由 setInterval() 返回的。
        值得一提的是，所用的ID池setInterval()和setTimeout()共享，
        这意味着你可以在技术上使用clearInterval()和clearTimeout()互换。
        但是，为清楚起见，应避免这样做。
  （2）setTimeout在定时器到期后执行一个函数或指定的一段代码
        对应scope.clearTimeout(timeoutID)
        您要取消的超时的标识符。此ID是通过对的相应调用返回的setTimeout()。
        值得一提的是ID的池使用setTimeout()和setInterval()共享，
        这意味着你可以在技术上使用clearTimeout()和clearInterval()互换。
        但是，为清楚起见，应避免这样做。

15. History对象

  window.history对象包含浏览器的历史（url）的集合
     方法：
        （1）history.back();
        （2）history.forward();
        （3）history.go();

16. Location对象

  用于获取当前页面的地址（URL），并把浏览器重新定向到新的页面。
     属性：
        （1）location.hostname返回web主机域名
        （2）location.pathname返回档期那文件的路径和文件名
        （3）location.port返回web主机端口
        （4）location.protocol返回所使用的web协议（http或https）
        （5）location.href返回当前页面的url
        （6）location.assign()加载新的文档

17. screen对象

  window.screen对象包含有关用户屏幕的信息
     属性：
        （1）screen.availHeight可用屏幕高度
        （2）screen.availWidth可用屏幕宽度
        （3）screen.Height屏幕高度
        （4）screen.Width屏幕宽度

18. 认识面向对象

  概念：
     （1）一切事物皆对象
     （2）对象具有封装性和继承特性
     （3）信息隐藏
  创建：
     （1）直接命名赋值
     （2）函数构造器

19. 深入了解面向对象

  JS中不存在类（es6已经引入，实为原型继承的语法糖）的概念，但可以使用function模拟类
     注意原型链prototype的使用，以及类套类+（立即执行函数）闭包实现封装
     prototype 属性使您有能力向对象添加属性和方法
     封装之后可以使用window赋值向外部提供一个引用的接口
     不管方法还是属性直接赋值就可以 例：`window.person = person;`