页面交互（js与HTML，css的使用） - 服务器托管|北京服务器租用|机房托管租用|IDC托管租用|机房机柜带宽租用-价格及费用咨询

浏览器对象模型（Browser Object Model）/ BOM

BOM是由一系列相关对象构成，每个对象都提供了很多方法和属性。

在 BOM 里最重要的对象有 5 个，分别如下：

window（窗口）：window 是整个网页的框架，每个网页的内容都是装载在 window 里面
navigator（浏览器）：navigator 里面存储浏览器相关信息
history（历史）：我们知道每个网页可以前进后退，history 便拿来存储整个网页栈的
screen（显示屏幕）：screen 包含我们显示屏幕的信息，这个是硬件信息
location（地址）：location 包含当前访问的地址（网址）信息

screen 是整个电脑唯一的
navigator 是整个浏览器唯一的，如果有多个浏览器就会有多个 navigator
window 是每个网页唯一的，每个网页都有一个独立的 window
history，location 是每个网页的信息，当然也是网页唯一的

HTML 中嵌入 Javascript

window

window 对象表示一个浏览器窗口或一个 frame 框架，它处于对象层次的最顶端，它提供了处理浏览器窗口的方法和属性。
window 对象是浏览器对象中的默认对象，所以可以隐式地引用 window 对象的属性和方法。在浏览器环境中，添加到 window 对象中的方法、属性等，其作用域都是全局的。

Location/History

location其用来保存当前网页位置的信息。

Location 方法

—reload()方法

为了防止无限快速循环，我们设置一个定时器延迟调用 reload。

location.reload()方法用来刷新当前页面，就像刷新按钮一样。

setTimeout(function () {
  window.location.reload();
}, 3000);

跳转到新的地址

直接将网页地址赋值给 Location

可以直接修改location的值。

window.location = 'https://www.youkeda.com';

History

History允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录，由这个名称我们得知，History 会存储该窗口的历史记录。

在实际存储中用到的数据结构和数组特别类似，叫做栈。

History中方法

back()和forward()，分别对应到浏览器左上角的返回和前进按钮。

Navigator/Screen

Navigator表示用户代理的状态和标识，也就是浏览器基本信息，在这里面我们需要了解一个属性 —userAgent，代表当前浏览器的用户代理。

DOM

文档对象模型 (DOM) 可以将web 页面与脚本或编程语言连接起来.

重点

1. web 页面

这里的 web 页面，也就是之前我们用 HTML 和 CSS 绘制的页面，也称作为文档

2. 脚本或编程语言为什么这里不直接说将 Web 页面和 Javascript 语言连接起来，而要绕一下说脚本或编程语言呢？

因为 DOM 是一种规范，或者是一种约定，只要遵循这个规范，那么无论是Javascript，还是python，或者java都可以被连接起来。

访问DOM

获取DOCUENT

web 网页最终会映射为一棵 DOM 树，DOM 树连接网页和 Javascript 语言。

DOCUMENT 元素会存在全局变量 window 下面，可以直接访问：

window.document;

选择器查询

选择器查询方法—querySelector()

//基础筛选条件
'.subtitle';

//加强版本，加上父亲筛选， 筛选 main标签下面 -> class为core的节点下面 -> class为subtitle的节点
'main .core .subtitle';

document.querySelector('main .core .subtitle');

迭代查询

当我们得到 subtitle 元素后，我们还可以利用这个元素，继续筛选器内部元素，比如我们想筛选器内部的 a 标签。

let subtitle = document.querySelector('main .core .subtitle');
console.log(subtitle.querySelector('a'));

选择器全量查询

查询上面 HTML 中的所有input节点.

document.querySelectorAll('input');

查询返回的是一个类数组，我们可以直接通过索引访问。

类数组，顾名思义类似数组形式，（可以通过索引访问的对象我们都可以称之为类数组），从 JSConsole 中我们实际得到的是NodeList对象。

getElementById(): 根据id查询某个节点

getElementsByClassName(): 根据class查询多个节点

getElementsByTagName(): 根据标签名查询多个节点

querySelector 查询出来的元素是拷贝的原始数据，不会再随着页面 DOM 节点的改变而变化 get 系列方法查询出来的元素就是原始数据，所以会随着页面的 DOM 节点的改变而变化

DOM属性

DOM种类



  ……




  ……



免费靓号

DOM的类别

元素节点
特性节点
文本节点
…… 其他类别不重要。

整个 HTML 中，无论是标签，标签属性，还是纯文本字符串都是Element, 不同的地方在于nodeType分别为1, 2, 3。
HTML 标签都是元素节点，可以用nodeName获取标签名称
纯文本都是文本节点，可以用nodeValue获取文本内容
标签的每个属性都是特性节点，可以用nodeName取得属性 Key，用nodeValue取得属性 Value
attributes可以获取元素节点的所有属性，得到的结果是一个字典，通过属性 Key 获取对应的特性节点。

DOM内容

属性		总结
outerHTML		整个 DOM 的 HTML 代码
innerHTML		DOM 内部 HTML 代码
innerText		DOM 内部纯文本内容

DOM亲属

let divDom = document.querySelector('div#test');
console.log(divDom.firstChild, divDom.lastChild);
console.log('-----');
console.log(divDom.childNodes);
console.log('-----');
console.log(divDom.parentNode);

属性	值	总结
firstChild		指定节点的第一个子节点
lastChild		指定节点的最后一个子节点
childNodes		指定节点的子节点的集合
parentNode		指定节点在 DOM 树中的父节点

lastChild 的值为text实际上就是换行符。

DOM样式

属性	类型	值	总结
classList	`DOMTokenList`类数组	`['test']`	classList 数组方式存储所有的 class 名称
style	`CSSStyleDeclaration`	`color`属性为`rgb(255, 51, 0)`	对象或字典的方法存储 CSSStyle

DOM数据属性

HTML 提供一种数据属性的标准，利用data-*允许我们在标准内于 HTML 元素中存储额外的信息。

有一些数据，，不一定是直接展示的，有可能字数是某种特效才展示，分类数据是动态更新时需要用到，可以利用data-*来存储。

数据的获取：

const article = document.querySelector('article');
console服务器托管网.log(article.dataset);

dataset是个 Map 对象，它是data-*这个*的Key-Value集合。

DOM操作

1. 创建标签节点

document.createElement(tagName)

此方法用于创建一个由标签名称 tagName 指定的 HTML 元素，也就是上节课提到的元素（标签）节点。

如果想创建一个div标签，我们可以使用：

const div = document.createElement('div');

创建文本方法**document.createTextNode(),

这个div标签内部，添加纯文本内容

把txt添加到div中，把div添加到body中

const div = document.createElement('div');
const txt = document.createTextNode('优课达-学的比别人好一点');
div.appendChild(txt);
document.body.appendChild(div);

2. 添加新节点

appendChild(newNode)

inserBefore(newNode， referenceNode)

此方法和appendChild()刚好相反，appendChild是在所有儿子节点之后添加，inserBefore是在某个目标儿子节点之前添加。

insertBefore(newNode, referenceNode)，需要两个参数，newNode表示新节点，referenceNode表示目标节点，也就是新节点插入到目标节点之前。

3. 设置样式、属性

img.setAttribute('style', 'width: 100%; height: 100%;');

单独设置某些属性，如下代码：

dom.style.color = 'xxxx';

**setAttribute()**不仅仅可以设置style之外，所有 HTML 属性都能用他设置，比如id,src,type,disabled, etc…

classList

classList能获取到 DOM 上所有的类,所以我们也可以把样式写成css，然后再添加或删除class。

4. innerHTML

使用innerHTML = ''清空select节点所有的后代内容。

也可以利用innerHTML给某个元素添加内容。

function createDisease(txt) {
  const dom = document.createElement('li');

  // 我们可以直接用innerHTML设置其纯文本
  dom.innerHTML = txt;
  return dom;
}

DOM事件

DOM 绑定事件

// 监听Input输入事件
dom.addEventListener("input", function () {});

// 监听鼠标放置，移动事件
dom.addEventListener("mouseover", function () {});

// etc...

DOM 可以通过addEventListener(eventName, callback)绑定eventName事件。

事件

焦点事件

focus: 表单组件（Input, Textarea, etc..）获取焦点事件blur: 表单组件（Input, Textarea, etc..）失去焦点事件

鼠标事件

click: 点击事件dblclick: 双击事件mousedown: 在元素上按下任意鼠标按钮。mouseenter: 指针移到有事件监听的元素内。mouseleave: 指针移出元素范围外（不冒泡）。mousemove: 指针在元素内移动时持续触发。mouseover: 指针移到有事件监听的元素或者它的子元素内。mouseout: 指针移出元素，或者移到它的子元素上。mouseup: 在元服务器托管网素上释放任意鼠标按键。

键盘事件

keydown: 键盘按下事件keyup: 键盘释放事件

视图事件

scroll: 文档滚动事件resize: 窗口放缩事件

资源

load：资源加载成功的事件

点击事件

// 默认是未点击喜欢
let hasLike = false;

const likeBtn = document.querySelector(".like-btn");
likeBtn.addEventListener("click", function () {
  // 点击事件
  hasLike = !hasLike;
  console.log(hasLike);
});

冒泡

1.点击事件触发监听事件

2.冒泡找到其父亲节点，触发父亲节点的监听事件

3.依次冒泡直到html根元素为止。

阻止冒泡-e.stopPropagation();

// ......省略
likeBtn.addEventListener('click', function(e) {
  // 点击事件
  e.stopPropagation()

捕获

捕获和冒泡是完全相反的，冒泡是从当前元素沿着祖先节点往上冒泡，而捕获是从根 HTML 节点开始依次移动到当前元素。

我们上面使用的addEventListener是在冒泡阶段监听事件，如果想在捕获阶段监听事件，我们需要传递第三个参数为true，代码如下

dom.addEventListener('click', function() {}, true);

委托

在大量子元素中单击任何一个都可以运行一段代码，可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个子节点单独设置事件监听器。

将

const box = document.querySelector('.box');
const imgArr = box.children;

for (let i = 0; i

修改为

const box = document.querySelector('.box');

box.addEventListener('click', function(e) {
  // 注意box区域比img大，如果点击在空白间隔区域，那么返回的节点将不会是IMG，需要特殊处理一下
  if (e.target.nodeName === 'IMG') {
    document.body.style.backgroundImage = `url(${e.target.src})`;
  }
});

移动事件

鼠标移动事件

mouseenter: 指针移到有事件监听的元素内。

mouseleave: 指针移出元素范围外（不冒泡）。

mousemove: 指针在元素内移动时持续触发。

mouseover: 指针移到有事件监听的元素或者它的子元素内。

mouseout: 指针移出元素，或者移到它的子元素上。

1. mousemove

这个是鼠标移动事件，比较简单

2. mouseenter/mouseleave

这个是鼠标进入和离开事件，但是仅仅只作用于当前 DOM 节点，不会作用于其后代节点

3. mouseover/mouseout

这个也是鼠标进入和离开事件，但和enter/leave不同的是：此事件除了作用于当前 DOM 节点，也会同时作用于其后代节点

表单元素事件

焦点事件

获取焦点和失去焦点两个事件 —focus和blur。

内容值变化

监听元素内容变化 —input和change。

const nick = document.querySelector('input.nick');
nick.addEventListener('input', function() {
  console.log('-----input');
  console.log(nick.value);
});

nick.addEventListener('change', function() {
  console.log('-----change');
  console.log(nick.value);
});

事件	介绍	案例
`change`	当用户提交对元素值的更改时触发； change 事件不一定会对元素值的每次更改触发	1. checkbox 值修改以后 2. select 选择后 3. input 内容修改并失去焦点
`input`	只要 value 值修改就会触发

滚动事件

1. 无尽滚动

网页每次滚动到底部，会加载新内容，再次滚动到底部，又会加载新内容。

2. 动态效果

滚动一般用于展示一些动态效果，比如知乎头部

滚动事件，事件名称为 —scroll。

键盘事件

keyboardEvent

KeyboardEvent对象描述了用户与键盘的交互。每个事件都描述了用户与一个按键（或一个按键和修饰键的组合）的单个交互。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

浏览器对象模型（Browser Object Model）/ BOM

HTML 中嵌入 Javascript

window

Location/History

Location 方法

跳转到新的地址

History

History中方法

Navigator/Screen

DOM

访问DOM

获取DOCUENT

选择器查询

选择器全量查询

DOM属性

DOM种类

DOM的类别

DOM内容

DOM亲属

DOM样式

DOM数据属性

DOM操作

1. 创建标签节点

2. 添加新节点

3. 设置样式、属性

classList

4. innerHTML

DOM事件

DOM 绑定事件

事件

焦点事件

鼠标事件

键盘事件

视图事件

资源

点击事件

冒泡

阻止冒泡-e.stopPropagation();

捕获

委托

移动事件

鼠标移动事件

表单元素事件

焦点事件

内容值变化

滚动事件

1. 无尽滚动

键盘事件

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用