胖蔡说技术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。
