胖蔡叨叨叨
你听我说

JS 中的DOM与BOM

JS的组成

  • ECMAScript
    描述JS的语法与基本对象,ECMAScript是一个标准,JS只是它的一个实现
  • DOM(文档对象模型)
    处理网页内容的方法和接口,是 W3C 的标准,所有浏览器公共遵守的标准
  • BOM(浏览器对象模型)
    与浏览器交互的方法和接口,各个浏览器厂商根据 DOM在各自浏览器上的实现,表现为不同浏览器定义有差别,实现方式不同.window 是 BOM 对象,而非 js 对象;javacsript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器)

A区:(浏览器的标签页,地址栏,搜索栏,书签栏,窗口放大还原关闭按钮,菜单栏等等)
B区:(document加载时的状态栏,显示http状态码等)
C区: (滚动条scroll bar)
E区: (浏览器的右键菜单)
F区: html显示区域

DOM与DOM结构

DOM

Document Object Model(文档对象模型),就是把「文档」当做一个「对象」来看待,相当于把html页面结构解析成一个对象,提供一个接口API,让你去操作所有的节点。在 DOM 中,文档中的各个组件(component),可以通过 object.attribute 这种形式来访问。一个 DOM 会有一个根对象,这个对象通常就是 document。DOM通常包括HTML DOM 和 XML DOM。


根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:整个文档是一个文档节点:

  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点
<html>
<head>
<title>文档标题</title>
</head>
<body>
<a href=“”>我的链接</a>
<!--这是一段注释-->
<h1>我的标题</h1>
</body>
</html>

<!--xml-->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:background="@color/white"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <com.worfu.base.widget.HeadBarView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:title="现金明细"/>
    <com.google.android.material.tabs.TabLayout
            android:id="@+id/mTabLay"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            app:tabSelectedTextColor="@color/colorTabSelect"
            app:tabIndicatorFullWidth="false"
            app:tabTextAppearance="@style/TabLayoutTextStyle"
            app:tabBackground="@android:color/transparent"
            app:tabRippleColor="@android:color/transparent" >
    </com.google.android.material.tabs.TabLayout>
    <androidx.viewpager.widget.ViewPager
            android:id="@+id/mViewPager"
            style="@style/NoScrollBar"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
    </androidx.viewpager.widget.ViewPager>
</LinearLayout>

DOM节点树

DOM 方法是我们可以在节点(HTML 元素)上执行的动作,可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。方法是您能够执行的动作(比如添加或修改元素)。属性是您能够获取或设置的值(比如节点的名称或内容)
一些常用的 HTML DOM 方法:

  • getElementById(id) – 获取带有指定 id 的节点(元素)
  • appendChild(node) – 插入新的子节点(元素)
  • removeChild(node) – 删除子节点(元素)

一些常用的 HTML DOM 属性:

  • innerHTML – 节点(元素)的文本值
  • parentNode – 节点(元素)的父节点
  • childNodes – 节点(元素)的子节点
  • attributes – 节点(元素)的属性节点

BOM(浏览器对象模型)

BOM(Browser Object Model) 是指浏览器对象模型。由于最初JavaScript就是设计在浏览器中执行的脚本语言,所以BOM是浏览器提供给JavaScript操作自身的接口。BOM的核心对象是window对象,window对象表示一个浏览器的一个页面窗口对象。同时window对象也是ECMAScript定义的Global对象,即网页中定义的全局属性或者全局方法最终都是定义到该对象上,同时提供JS的Global的方法如parseInt方法。

BOM对象

  • Window 对象:表示浏览器打开的窗口,包括获取焦点、改变滚动条、设置定时器等等。
  • Navigator 对象:包含浏览器信息。如:获取浏览器名称、版本信息、操作系统平台信息等等。
  • Screen 对象:包含屏幕信息。如:获取屏幕高度、宽度等等。
  • History 对象:可对当前页的浏览历史进行操作,如:前进、后退等。
  • Location 对象:可对当前页面的URL进行操作,如:导航到新的页面、获取URL信息等。

window对象是BOM(浏览器对象模型)的核心。window对象既是通过JS访问浏览器窗口的接口,也是ECMAScript规定的global对象, 由于window对象是js中的顶级对象,所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法,在调用的时候可以省略window。

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » JS 中的DOM与BOM
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

'); })();