JS 学习笔记四(DOM) 悬停事件 获取节点

---

---

BOM 与 DOM

---

• 图解BOM与DOM的区别与联系

• JavaScript三个组成部分 ○ 核心(ECMAScript) 欧洲计算机制造商协会： ○ ○ ○ 描述了JS的语法和基本对象。 ○ 文档对象模型(DOM)： ○ ○ ○ 处理网页内容的方法和接口 ○ 浏览器对象模型(BOM)： ○ ○ ○ 与浏览器交互的方法和接口

---

---

DOM

---

• 什么是DOM和节点 ○ DOM 由节点组成 ○ DOM 操作就是操作节点 ○ DOM 树：

• 获取方法 ○ 直接获取 ○ 访问关系获取 ○ ○ ○ 节点的访问关系，是以属性的方式存在的。 ○ ○ ○ DOM 的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对他们进行访问。

• 节点的操作 ○ 节点的创建，添加，删除

---

---

获取节点

---

总共5种获取方式，但是一般只用前3种，后两种基本不用。

• document.getElementsById()
• document.getElementsByTagName()
• document.getElementsByClassName()
• document.getElementsByName()
• document.getElementsByTagNameaNS()

---

---

window.onload

---

• window.onload 一般用于 script 标签放在 head 标签的时候使用，用于等网页加载完成在回调。

  // 页面加载完毕的时候调用，加载完毕包括文本跟图片。 // 用途: // JS的加载是和HTML同步加载的。(如果使用元素在定义元素之间，容易报错) // 整个页面上所有元素加载完毕在执行JS内容 // window.onload可以预防使用标签在定义标签之前。 window.onload = function () { alert('加载完毕'); }

---

---

悬停事件

---

// 测试标签对象
var div = document.getElementById('box');
// 当鼠标 将要进入 标签触发
div.onmouseover = function () {
  console.log('onmouseover')
}
// 当鼠标 进入完成 标签触发
div.onmouseenter = function () {
  console.log('onmouseenter')
}
// 当鼠标 在标签中移动 触发
div.onmousemove = function () {
  console.log('onmousemove')
}
// 当鼠标 将要离开 标签触发
div.onmouseout = function () {
  console.log('onmouseout')
}
// 当鼠标 离开完成 标签触发
div.onmouseleave = function () {
  console.log('onmouseleave')
}
// 当鼠标 在标签身上按下 触发
div.onmousedown = function () {
  console.log('onmousedown')
}
// 当鼠标 在标签身上按下之后松开 触发
div.onmouseup = function () {
  console.log('onmouseup')
}

在 vue 中使用 @ 添加监听事件，需要去掉前面的 on： ```

{{ text }}

```

---

---

input

---

• 测试代码

• cursor：光标样式

---

var input = document.getElementById('box');

// 禁用
input.disabled = 'no';

// 启用
input.disabled = 0;

// 启用(推荐)
input.removeAttribute('disabled')

input.onfocus = function () {
  console.log('获取焦点');
}

input.onblur = function () {
  console.log('失去焦点');
}

input.oninput = function () {
  console.log('内容变动');
}

---

---