javascript 的三大组成部分
- DOM (document object model) 文档对象模型
- BOM (browers object model) 浏览器对象模型
- ECMAScript js 的核心
DOM 节点
- 节点分类
- 元素节点：每个 HTML元素
- 属性节点：HTML元素的属性
- 文本节点：HTML元素内的文本
- 注释节点：注释 <!---->
- 文档节点：整个文档document
- 节点类型 --- nodeType
- 元素节点：1
- 属性节点：2
- 文本节点：3
- 注释节点：8
- 文档节点：9
- 节点名称 --- nodeName
- 元素节点：与标签名相同
- 文本节点：为#text
- 注释节点：为#comment
- 文档节点：为#document
DOM关系
- childNodes 子节点
- children 子元素
- firstChild 第0个子节点
- firstElementChild 第0个子元素
- lastChild 最后一个子节点
- lastElementChild 最后一个子元素
- nextSibling 下一个兄弟节点
- nextElementSibling 下一个兄弟元素
- previousSibling 上一个兄弟节点
- previousElementSibling 上一个兄弟元素
- parentNode 父节点
- offsetParent 定位父级
DOM 属性操作 注意 . 和 [] 都是 ECMAScript 中，对象的属性操作，对象属性的值会被存在内存中, 想要直接获取存在 文档中属性，或者 想把一个属性设置在文档中我们需要使用DOM 的属性操作
- el.attributes 元素所有属性的集合
- el.getAttribute("attr") 获取属性
- el.setAttribute("attr","val") 设置属性
- el.removeAttribute("attr") 移出属性
- el.hasAttribute("attr") 判断是否有这个属性
- 只要操作了innerHTML 元素的所有子元素上，存在内存中的事件和相关的属性都会丢失。如果希望元素的某些属性在操作了父级的innerHTML 之后，还存在就把这个属性加在 DOM 中
data 自定义属性
- 在标签中定义data自定义属性：data-key="value";
- 在js操作该元素的 data 自定义属性：el.dataset
- 获取：el.dataset.key
- 设置: el.dataset.key = "value"
节点操作》创建节点 语法：element document.createElement("tagName"); 创建一个节点 参数：tagName 标签名称 返回值：创建好的节点
节点操作》向页面中添加节点
- el.appendChild(node) 在元素的末尾添加一个子级
- el.insertBefore(newNode,oldNode) 在 oldNode 前边添加入 newNode
- 在使用 appendChild 和 insertBefore时，如果添加是一个页面上已经存在的节点，会先从原位置删除，然后在添加到新的位置去。
节点操作》删除节点
- parent.removeChild(el) 删除掉某个子元素
节点操作》克隆节点
-
node.cloneNode(deep)
- deep: 默认为false
- deep 为 true, 克隆元素及属性，以及元素的内容和后代
- deep 为 false, 只克隆元素本身，及它的属性 元素的尺寸获取
-
offset
- offsetWidth 可视宽度
- offsetHeight 可视高度
- offsetLeft 距离定位父级的left坐标
- offsetTop 距离定位父级的top坐标
-
client
- clientWidth 可视宽度 - border
- clientHeight 可视高度 - border
- clientTop 上边框宽度
- clientLeft 左边框宽度
-
scroll
- scrollWidth 内容宽度
- scrollHeight 内容高度
- scrollLeft 左右滚动距离
- scrollTop 上下滚动距离
-
getBoundingClientRect()
- left 元素左侧距离可视区左侧距离
- top 元素顶部距离可视区顶部距离
- right 元素右侧距离可视区左侧距离
- bottom 元素底部距离可视区顶部距离
- width 可视宽度
- height 可视高度
BOM 下五大对象
window 对象
- innerWidth/innerHeight
- open 方法
window.open(URL,target,specs,replace)
-
URL 新窗口地址
-
target 属性 新窗口打开方式
- _blank
- _self
-
specs 新窗口规格
- width=pixels 窗口的宽度.最小.值为100
- height=pixels 窗口的高度。最小.值为100
- location=yes|no|1|0 是否显示地址字段.默认值是yes
- menubar=yes|no|1|0 是否显示菜单栏.默认值是yes
- resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes
- scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes
- status=yes|no|1|0 是否要添加一个状态栏.默认值是yes
- titlebar=yes|no|1|0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
- toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes
-
close 方法关闭窗口
-
scroll 事件
-
resize 事件
-
操作滚动条位置
- window.scrollX、window.scrollY、window.scrollTo()
- document.documentElment.scrollTop、document.documentElment.scrollLeft
-
window 下的各类弹窗
- alert()
- confirm('message')
- prompt([msg],[defaultText])
location 对象
- hostname
- port
- protocol
- href
- hash
- hashChange
- search
- reload()
- replace()
history 对象
- back()、
- forward()
- go()
- state
- pushState()
- popstate
- history 路由实现原理
navigator 对象
- userAgent
- appName
- appVersion
screen 对象 width 、height width 、height
