JavaScript

BOM

• 概念：Browser Object Model 浏览器对象模型

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

• 组成：

  • Window：窗口对象

    • 创建

    • 方法

      • 与弹出框有关的方法：

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

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

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

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

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

          • 返回值：获取用户输入的值

      • 与打开关闭有关的方法：

        • close()：关闭浏览器窗口

          • 谁调用，就关谁

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

          • 返回新的window对象

      • 与定时器有关的方法：

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

          • 参数：

            • js代码或者方法对象

            • 毫秒值

          • 返回值：唯一标识，用于取消定时器

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

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

        • clearInterval()：取消由setInterval()方法设置的timeout

    • 属性

      • 获取其他BOM对象：

        • history

        • location

        • Navigator

        • Screen

      • 获取DOM对象

        • document

    • 特点

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

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

  • Navigator：浏览器对象

  • Screen：显示器屏幕对象

  • History：历史记录对象

    • 创建(获取):

      • window.history

      • history

    • 方法：

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

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

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

        • 参数：

          • 正数：前进几个历史记录

          • 负数：后退几个历史记录

    • 属性：

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

  • Location：地址栏对象

    • 创建(获取)：

      • window.location

      • loction

    • 方法：

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

    • 属性：

      • href：设置或返回完整的URL

DOM

• 概念：Document Object Model 文档对象模型

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

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

  • 核心DOM：针对任何结构化文档的标准模型

    • Document：文档对象

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

        • window.document

        • document

      • 方法：

        • 获取Element对象：

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

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

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

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

        • 创建其他DOM对象：

          • createAttribute(name)

          • createComment()

          • createElement()

          • createTextNode()：

      • 属性

    • Element：元素对象

      • 创建/获取：通过document来获取和创建

      • 方法：

        • removeAttribute()：删除属性

        • setAttribute()：设置属性

    • Attribute：属性对象

    • Text：文本对象

    • Comment：注释对象

    • Node：节点对象，其他5个的父对象

      • 特点：所有dom对象都可以被认为是一个节点

      • 方法：

        • CRUD dom树：

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

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

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

        • 属性：

          • parentNode：返回节点的父节点

  • XML DOM：针对XML文档的标准模型

  • HTML DOM：针对HTML文档的标准模型

    • 标签体的设置和获取：innerHTML

    • 使用html元素对象的属性

    • 控制元素样式

      • 使用元素的style属性来设置

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

• 功能：控制html文档的内容

• 代码：获取页面标签(元素)对象 Element

  • document.getElementById("id值")：通过元素id获取元素对象

• 操作Element对象：

  • 修改属性值：

    • 明确获取的对象是哪一个

    • 查看API文档，找其中有哪些属性可以设置

  • 修改标签体内容：

    • 属性：innerHTML

• 事件简单学习：

  • 功能：某些组件被执行了某些操作后，触发某些代码的执行。

  • 如何绑定事件

    • 直接在html标签上，指定事件的属性(操作)，属性值就是js代码

      • 事件：onclick--------单击事件

    • 通过js获取元素对象，指定事件属性，设置一个函数

标签：十一,元素,对象,JavaScript,获取,文档,节点,属性
来源： https://www.cnblogs.com/aoyouJavadeDashu/p/16495414.html