zoukankan      html  css  js  c++  java
  • javaScript高级:BOM和DOM

    一、BOM

    1、概念

    Browser Object Model 浏览器对象模型。它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

    2、组成

    * Window:窗口对象

    * Navigator:浏览器对象

    * Screen:显示器屏幕对象

    * History:历史记录对象

    * Location:地址栏对象

    3、Window:窗口对象

    1)、方法

    (1)、与弹出框有关的方法

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

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

        如果用户点击确定按钮,则方法返回true

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

      prompt() 显示可提示用户输入的对话框。

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

    (2)、与打开关闭有关的方法

      close() 关闭浏览器窗口。

        谁调用我 ,我关谁

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

        返回新的Window对象

    (3)、与定时器有关的方式

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

        参数:参数一:js代码或者方法对象,参数二:毫秒值。

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

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

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

      clearInterval() 取消由 setInterval() 设置的 timeout。

    2)、属性

    (1)、获取其他BOM对象

      history

      location

      Navigator

      Screen

    (2)、获取DOM对象

      document

    3)、特点

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

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

    4、Location:地址栏对象

    1)、创建(获取)

    (1)、window.location

    (2)、location

    2)、方法

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

    3)、属性

    href 设置或返回完整的 URL。

    5、History:历史记录对象

    1)、创建(获取)

    (1)、window.history

    (2)、history

    2)、方法

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

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

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

        参数:

          正数:前进几个历史记录

          负数:后退几个历史记录

    3)、属性

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

    二、DOM

    1、概念

    Document Object Model 文档对象模型。是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)

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

    2、分类

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

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

      Document:文档对象

      Element:元素对象

      Attribute:属性对象

      Text:文本对象

      Comment:注释对象

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

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

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

    3、核心DOM模型

    1)、Document:文档对象

    (1)、创建(获取):在html dom模型中可以使用window对象来获取

      window.document

      document

    (2)、方法

    获取Element对象

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

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

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

      getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

    创建其他DOM对象

      createAttribute(name)

      createComment()

      createElement()

      createTextNode()

    2)、Element:元素对象

    (1)、创建(获取)

    通过document来获取和创建

    (2)、方法

      removeAttribute():删除属性

      setAttribute():设置属性

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

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

    (2)、方法:

      CRUD dom树:

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

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

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

    (3)、属性:

    parentNode 返回节点的父节点。

    4、HTML DOM

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

    2)、使用html元素对象的属性

    3)、控制元素样式

    (1)、使用元素的style属性来设置
    如:

    //修改样式方式1
    div1.style.border = "1px solid red";
    div1.style.width = "200px";
    //font-size--> fontSize
    div1.style.fontSize = "20px";

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

    三、事件监听机制

    1、概念

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

      事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了

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

      监听器:代码。

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

    2、常见事件

    1)、点击事件:

      onclick:单击事件

      ondblclick:双击事件

    2)、焦点事件

      onblur:失去焦点

      onfocus:元素获得焦点。

    3)、加载事件:

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

    4)、鼠标事件:

      onmousedown 鼠标按钮被按下。

      onmouseup 鼠标按键被松开。

      onmousemove 鼠标被移动。

      onmouseover 鼠标移到某元素之上。

      onmouseout 鼠标从某元素移开。

    5)、键盘事件:

      onkeydown 某个键盘按键被按下。

      onkeyup 某个键盘按键被松开。

      onkeypress 某个键盘按键被按下并松开。

    6)、选择和改变

      onchange 域的内容被改变。

      onselect 文本被选中。

    7)、表单事件:

      onsubmit 确认按钮被点击。

      onreset 重置按钮被点击。

  • 相关阅读:
    安装 pgadmin4 docker
    DevExpress 、XtraGrid 自定义统计数据
    LINQ之Join(from join on )与GroupJoin(from join on into)将两个集合进行关联与分组
    LINQ之LookUp
    LINQ之GroupBy(group p by into)
    LINQ之SelectMany(from.. from..复合from子句)
    Row_number over (Partition by yyy) in Entity Framework
    为表或者表字段添加扩展属性(MS_Description、sp_addextendedproperty、注释)
    学习vue,待续中。。。
    用Python爬取《王者荣耀》英雄皮肤数据并可视化分析,用图说话
  • 原文地址:https://www.cnblogs.com/zwh0910/p/15735361.html
Copyright © 2011-2022 走看看