美文网首页
JavaScript知识点整理(三)

JavaScript知识点整理(三)

作者: 一枚小菜 | 来源:发表于2020-02-17 22:43 被阅读0次

五.BOM


1.概念:Browser Object Model 浏览器对象模型

   将浏览器的各个组成部分封装成对象

2.组成

    Windows:窗口对象

    Navigator:浏览器对象

    Screen:显示器屏幕对象

    History:历史记录对象

    Location:地址栏对象

1.Windows:窗口对象


    1.创建

    2.方法

        1.与弹出框有关的方法:

               alert():显示带有一段消息和一个确认按钮的警告框

               confirm():显示带有一段消息以及一个确认按钮和取消按钮的对话框

                    如果用户点击确认按钮,则方法返回true。如果用户点击取消按钮,则方法返回false

               prompt():显示可以提升用户输入的对话框

                    返回值:获取用户输入的值

        2.与打开关闭有关的方法:

              close():关闭浏览器窗口

                 谁调用我,关闭谁

              open():打开一个新的浏览器窗口

                 返回新的window对象

       3.与定时器有关的方法:

            setTimeout():在指定的毫秒数后调用函数或计算表达式

                 参数:1.js代码或者方法对象

                               2.毫秒值

                  返回值:唯一标识,用于取消定时器

            clearTimeout():取消由setTimeout()方法设置的timeout

            setInterval():按照指定的周期来调用函数或计算表达式

            cleartInterval():取消由setInterval()方法设置的timeout

    3.属性

        1.获取其他BOM对象

            history,location,Navigator,Screen

        2.获取DOM对象

            document

    4.特点

        window对象不需要创建可以直接使用。window.方法名()

        window引用可以省略。方法名()

2.location:地址栏对象


    1.创建

        1.window.location

        2.location

    2.方法

        reload():重新加载当前文档,刷新

    3.属性

        href:设置或返回完整的URL

3.History:历史记录对象


 1.创建

        1.window.history

        2.history

2.方法

        back():加载history列表中的前一个URL

        forward():加载history列表中的下一个URL

        go():加载history列表中的某个具体页面

3.属性

        length:返回当前窗口历史列表中的URL数量

六.DOM


1.概念:Document Object Model 文档对象模型

      将标记语言文档的各个组成部分,封装成对象。可以使用这些对象。对标记语言文档进行                  CRUD(增删改查)的动态操作

2.W3C DOM标准被分为3个不同的部分:

1.核心DOM - 针对任何结构化文档的标准模型

     Document:文档对象

     Element:元素对象

     Attribute:属性对象

     Text:文本对象

     Comment:注释对象

     Node:节点对象,其他5个的父对象

2.XML DOM - 针对XML文档的标准模型

3.HTML DOM - 针对HTML文档的标准模型

1.document:文档对象


1.创建

    在HTML DOM模型中可以使用window对象来获取

    1.window.document

    2.document

2.方法

    1.获取element对象:

        1.getElementById():根据id属性值获取元素对象。id属性值一般唯一

        2.getElementByTagName():根据元素名称获取元素对象们。返回值是一个数组

        3.getElementByClassName():根据Class属性值获取元素对象们。返回值是一个数组

        4.getElementByName():根据Name属性值获取元素对象们。返回值是一个数组

    2.创建其他DOM对象:

        createAttribute(name) 

        createComment()

        createElement()

        createTextNode()

2.Element:元素对象


1.创建:通过document来创建

2.方法:

    1.removeAttribute():删除属性

    2.setAttribute():设置属性

3.Node:节点对象

1.特点:所有dom对象都可以被认为是一个节点

2.方法:

    CRUD dom树

        appendChild():向节点的子节点列表的结尾添加新的子节点

        removeChild():删除(并返回)当前节点的指定子节点

        replaceChild():用新节点替换一个子节点

3.属性

    parentNode:返回节点的父节点

4.HTML DOM


    1.标签体的设置和获取:innerHTML

    2.使用HTML元素对象的属性

    3.控制样式

        1.使用元素的style属性值来设置

        2.提前定义好类选择器的样式,通过元素的className属性来设置其class属性值

七.事件监听机制


    1.概念:

        事件:某些组件被执行了某些操作后,触发某些代码的执行

        事件源:组件。如:按钮,文输入框...

        监听器:代码。

        注册监听:将事件,事件源,监听器结合在一起。当事件源上发生了某个事件,则触发执行某          个监听器代码

    2.常见的事件:

        1.点击事件:

            1.onclick:点击事件

            2.ondblclick:双击事件

        2.焦点事件:

            1.onblur:失去焦点。一般用于表单验证

            2.onfocus:元素获得焦点

        3.加载事件:

            onload:一张页面或一副图像完成加载

        4.鼠标事件:

            1.onmousedown:鼠标按钮被按下

                定义方法时:定义一个形参,接受event对象

                event对象的button属性可以获取鼠标按钮键被点击了

            2.onmouseup:鼠标按键被松开

            3.onmousemove:鼠标移到某元素之上

            4.onmouseout:鼠标从某元素移开

        5.键盘事件:

            1.onkeydown:某个键盘按键被按下

            2.onkeyup:某个键盘按键被松开

            3.onkeypress:某个键盘按键被按下并松开

        6.选择和改变:

            1.onchange:域的内容被改变

            2.onselect:文本被选中

        7.表单事件:

            1.onsubmit:确认按钮被点击。

                可以阻止表单提交

                方法返回false则表单被阻止提交

            2.onreset:重置按钮被点击

相关文章

  • JavaScript 知识点整理

    JavaScript是按照ECMAScript标准设计和实现的,后文说的JavaScript语法其实是ES5的标准...

  • JavaScript知识点整理

    1.数据类型模块 浮点数值需要的内存空间是保存整数值的两倍;parseInt()转换空字符串会返回NaN(Numb...

  • JavaScript知识点整理

    JavaScript是一门什么样的语言?有哪些特点? 运行在浏览器的V8引擎中的脚本语言,不要编译就可以由解释器直...

  • 第二章 在HTML中使用JavaScript

    前言 最近开始重拾JavaScript基础,会将《JavaScript高级程序设计》这本书的知识点做一个整理,以方...

  • 前端 JavaScript基础知识梳理

    前言 javascript内容较多,知识点较杂。我整理了一些js基础的知识点(只是知识点的名称,内容不做详解),希...

  • JavaScript DOM编程艺术 笔记

    了解的知识点 DOM概念 JavaScript相关原生api 整理 知识要点 XHTML HTML XML给文档加...

  • HTML CSS JavaScript入门知识点

    HTML CSS JavaScript入门知识点 本文将主要描述HTML css javascript这三门技术的...

  • 前端最全知识点汇总(面试必备)

    一年前写了一篇JavaScript八张思维导图,主要是对前端JavaScript知识点的一个系统的整理和总结。本篇...

  • JavaScript易错知识点整理

    前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向...

  • JavaScript易错知识点整理

    前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向...

网友评论

      本文标题:JavaScript知识点整理(三)

      本文链接:https://www.haomeiwen.com/subject/lptifhtx.html