前端基础学习（4） BOM DOM 节点操作事件

一、今日内容

BOM (Browser Object Model)
DOM (Documentaty Object Model)
事件

二、BOM

BOM，即浏览器对象模型，顾名思义，就是利用 JavaScript 实现一些对浏览器对象的操作；主要包含 window 对象、计时器、弹出框等，以及 window 对象的子对象 navigator 对象、screen 对象、history 对象、location 对象；

window 对象

当我们在浏览器控制台声明一个新变量var name = 'hello world';，我们可以发现通过window.name获取到与name相同的结果，这是因为其实我们在控制台声明的所有变量，其实都是在 window 对象下声明的，下面介绍的其他对象，也都是 window 对象的子对象；window 对象表示浏览器窗口，它具备如下一些方法：
```
window.innerHeight  // 浏览器窗口的内部高度
window.innerWidth  // 浏览器窗口的内部宽度
window.open();  // 打开新窗口
window.open();  // 关闭当前窗口（只能关闭由window.open()打开的页面）
```

navigator 对象

navigator 对象指的是浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

navigator.appName  // Web浏览器全称
navigator.appVersion  // Web浏览器厂商和版本的详细字符表
navigator.userAgent  // 客户端绝大部分信息
navigator.platform  // 浏览器运行所在的操作系统

screen 对象

screen 对象代表屏幕对象。

screen.availWidth  // 可用的屏幕亮度
screen.availHeight  // 可用的屏幕高度

history 对象

history 对象包含浏览器的历史，通过浏览历史对象，我们无法查看具体的URL，只能简单的用来前进或者后退一个页面。
```
history.forward()  // 前进一页
history.back()  // 后退一页
```

location 对象

location 对象可以获取当前页面的URL，并且把浏览器重新定向到新的页面。

location.href  // 获取URL
location.href = "URL";  // 跳转到指定页面
location.reload();  // 重新加载页面，就是刷新一下页面

弹出框

可以通过 JavaScript 创建三种消息框：警告框、确认框、提示框；
- 警告框
```
alert("这是一个警告框");
```
- 确认框
  
  如果点击确认，返回值为 true，如果点击取消，返回值为 false；
```
confirm("这是一个确认框");
```
- 提示框
  
  如果点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为默认值，就是第二个参数，如果没有默认值返回 null；
```
prompt("这是一个提示框", '默认返回值');
```
- 计时相关
  
  在 JavaScript 中，我们可以设定一个时间计时对象，来实现一定时间间隔后执行部分代码，而不是函数被调用后立即执行，我么称之为计时事件；
  - setTimeout 一段时间后执行
```
var t = setTimeout("console.log('hello world');", 1000);  // 第一个参数为执行语句，第二个参数为延迟时间，以ms为单位
// 注意：第一个参数js语句最好是写一个函数，不然一般的js语句到这里就会直接执行，先用函数封装一下，返回的为id值
setTimeout(confirm(), 3000);  // 会立即执行
setTimeout("confirm();", 3000);  // 延迟后执行
setTimeout(confirm, 3000);  // 延迟执行
setTimeout(function () {confirm();}, 3000);  // 推荐使用方式，与上面的那种等价（无参数情况下）
```
    利用 clearTimeout 清除计时事件：
```
var a = setTimeout(confirm, 3000);
clearTimeout(a);
```
  - setInterval 每隔一段时间执行
    
    用法与 setTimeout 相同，同样利用 clearInterval 可以清除计时事件；

三、DOM

DOM，即文档对象模型是一套对文档的内容进行抽象和概念化的方法。当网页被加载时，浏览器会创建页面的文档对象模型，DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

节点层次

DOM 可以将任何 HTML 文件描绘成一个由多层节点构成的结构。节点可以分为几种不同的类型，每种类型分别表示文档中不同的信息及标记，每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。下面以一个 HTML 为例：
```
<html>
    <head>
    	<title>Sample Page</title>
    </head>
	<body>
        <p>hello world!</p>
    </body>
<html>
```
可以将这个简单的 HTML 文档表示为一个层次结构：

查找标签

DOM 支持通过节点层级结构寻找节点的操作，同时也可以根据节点的位置寻找关联的节点；

直接查找

document.getElementsById('id');  // 根据ID获取一个标签，返回标签对象
document.getElementsByClassName('className');  // 根据class属性获取(获取多个值以列表形式返回)
document.getElementByTagName('tagName');  // 根据标签名获取（获取多个值以列表形式返回）

间接查找

var a = document.getElementById('ID');
a.parentElement;  // 父节点标签元素
a.children;  // 所有子标签
a.firstElementChild;  // 第一个子标签元素
a.lastElementChild;  // 最后一个子标签元素
a.nextElementSibling;  // 下一个兄弟标签元素
a.previousElementSibling;  // 上一个兄弟标签元素

节点操作

创建节点（即创建标签）

// 后插法
var a = document.createElement('a');
var dd = document.getElementById('dd');
dd.appendChild(a);  // 将创建的a标签添加到dd标签的最后

// 前插法
var d = document.getElementById('div');  // 父级标签
var a = document.createElement('a');  // 创建一个新的a标签
var d2 = d.children[0];  // 找到父级标签的某个儿子标签
d.insertBefore(a, d2);  // 将a标签插入到d2儿子标签的前面

// 删除节点
d.remove(a);

// 儿子替换
d.replaceChild(a, d2);  // 用a替换d2节点

文本操作

// 修改节点内文本
d.innerText = "hello world";
// 中间添加html内容
d.innerHTML = "<a href='https://www.baidu.com'>百度</a>";

属性值操作

var d = document.getElementById('div');
d.setAttribute('href', 'http://www.baidu.com');  // 设置属性值
d.getAttribute('href');  // 获取属性值
d.removeAttribute('href');  // 移除属性

class 属性操作

var d = document.getElementById('div');
d.classList;  // 获取d的class属性
d.classList.add('cls_demo');  // 增加对应的class值
d.classList.remove('cls_demo');  // 删除对应的class值
d.classList.contains('cls_demo');  // 判别有无该class值，返回boolean值
d.classList.toggle('cls_demo');  // 如果有对应class值就删除，如果没有就添加

CSS 操作

var d = document.getElementById('div');
d.style.backgroundColor = 'deeppink';  // 有横杠的CSS属性，写法改为骆驼法；
d.style.height = '1000px';

四、事件

JavaScript 和 HTML 之间的交互是通过事件来实现的，事件处理程序（事件侦听器）即相应某个时间的函数，他们都以 on 开头，如 onclick 是处理 click 时间的事件处理程序：

<!--绑定事件方式1-->
<div id="d1" class="c1" onclick="f1();"></div>
<script>
	function f1() {
        var d = document.getElemetnById('d1');
        d.style.backgroundColor = 'yellow';
    }
</script>

<!--绑定事件方式2-->
<div id="d1" class="c1"></div>
<script>
    var d = document.getElemetnById('d1');
	d.onclick = function f1() {
        d.style.backgroundColor = 'yellow';
    }
</script>

<!--绑定的函数还可以传参-->
<div id="d1" class="c1" onclick="f1(this);"></div>
<script>
    function f1(ths){
        // var d = document.getElementById('d1');
        ths.style.backgroundColor = 'yellow';
    }
</script>

除了 onclick 外，事件处理程序还包括：

// onclick事件，单击某个对象触发
// ondblclick事件，双击某个对象触发
// onfocus事件，获取光标触发
// onblur事件，失去光标触发
// onchange事件，内容发生变化时触发的事件
// onkeydown 某个键盘按键被按下
// onkeypress 某个键盘按键被按下并松开
// onkeyup 某个键盘按键被松开
// onload 一张页面或者一副图像完成加载
// onmousedown 鼠标按钮被按下
// onmousemove 鼠标被移动
// onmouseout 鼠标从某元素移开
// onmouseover 鼠标移动到某元素上
// onselect 在文本框中的文本被选中
// onsubmit 确认按钮被点击

posted @ 2020-11-12 11:07 Raigor 阅读(112) 评论(0) 编辑收藏举报

刷新页面返回顶部

Raigor's Blog

前端基础学习（4） BOM DOM 节点操作事件