javascript组成：
- ECMAScript，描述了JS的语法和基本对象；
- BOM （浏览器对象模型），处理网页内容的方法和接口，是W3C 的标准；
- DOM （文档对象模型），提供与浏览器交互的方法和接口，s各个浏览器厂商根据 DOM在各自浏览器上的实现;
DOM
文档对象模型(Document Object Model,简称DOM),描述了处理网页内容的方法和接口。最根本对象是document（window.document）。
DOM就是我们日常对Html所有文本节点，元素，属性等操作，访问，修改等，都在dom的范畴。 其中，我们日常用的HTML DOM，他包括HTML的标准对象模型，W3C 标准等规范。
image.png
DOM可分为三个部分
1、核心DOM：是用于XML与HTML的共用接口(增删改查)
2、XML DOM：操作xml --- 了解
3、HTML DOM：操作html(操作属性、操作文本、操作css样式) --- 重点
DOM对象
document ：DOM顶层对象
Element 对象：文档节点
Attribute 对象：节点属性
Event 对象：事件对象
节点树
1、整个文档看作一个文档节点(对象) ： document
2、所有的元素都是元素节点 : element
3、标签中所有的属性都是属性节点：attribute
4、标签中所有的文本都是文本节点(空格和换行符) ：text
5、一切都是节点(对象)
节点层次图如下：
image.png
操作节点的方法
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
BOM
浏览器对象模型（Browser Object Model），描述了与浏览器进行交互的方法和接口。由navigator、history、screen、location、window五个对象组成的，最根本对象是window。
BOM，就是跟浏览器有关的相关是属性，如浏览器的窗口呀，浏览器的页面跳转等。
1、window : BOM中最顶层对象
2、screen ：屏幕对象
3、location： 地址栏对象
4、history：历史记录对象
5、navigator： 导航对象
6、document ： 文档对象
7、frames :框架集
Location的属性
| 属性 | 描述 | 栗子 |
|---|---|---|
| hash | 获取锚点，简单来说就是url的#后边 | #detail?a=1 |
| host | url的端口 + 端口 | www.baidu.com:8080 |
| hostname | 主机路径 | www.baidu.com |
| href | 完整url | www.baidu.com?a=1 |
| pathname | 返回当前 URL 的路径部分 | /index.html |
| port | 端口 | 8080 |
| protocol | 协议 | http或htttps |
| search | 协议 | 获取参数，简单来说就是url的?后边 |
Location的方法
| 方法 | 描述 |
|---|---|
| assign | 加载新的文档 |
| reload | 重新刷新页面 |
| replace | 用新的文档替换当前文档 |
Navigator
| 属性 | 说明 |
|---|---|
| appCodeName | 返回浏览器的代码名 |
| appName | 返回浏览器的名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
| platform | 返回运行浏览器的操作系统平台 |
| userAgent | 返回由客户机发送服务器的user-agent 头部的值 |
Screen
| 属性 | 说明 |
|---|---|
| availHeight | 返回屏幕的高度（不包括Windows任务栏） |
| availWidth | 返回屏幕的宽度（不包括Windows任务栏） |
| colorDepth | 返回目标设备或缓冲器上的调色板的比特深度 |
| height | 返回屏幕的总高度 |
| pixelDepth | 返回屏幕的颜色分辨率（每象素的位数） |
| width | 返回屏幕的总宽度 |
History
| 属性 | 说明 |
|---|---|
| back | 返回上一页 |
| forward | 返回下一页 |
| go | 加载 history 列表中的某个具体页面 |
网友评论