本文详细介绍了JavaScript中的浏览器对象模型(BOM)、DOM以及事件监听的基础概念和操作，包括Window对象、History对象、Location对象的功能，以及如何通过DOM操作元素和事件绑定。
一.全局对象
1.BOM
BOM:浏览器对象模型。将浏览器的各个组成部分封装为对象。
我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。比如：我现在想将浏览器地址栏的地址改为 https://www.itheima.com 就可以通过使用BOM中定义的 Location 对象的href属性，代码： location.href = "https://www.baidu.com";
BOM包含了如下对象：
Window:浏览器窗口对象Navigator:浏览器对象Screen:屏幕对象History:历史记录对象Location:历史记录对象
1.2.Window对象
window 对象是 JavaScript 对浏览器的窗口进行封装的对象。
1.2.1获取Window对象
该对象不需要创建直接使用 window ，其中 window. 可以省略。比如我们之前使用的 alert() 函数，
其实就是 window 对象的函数，在调用是可以写成如下两种
- 显示调用
window对象
window.alert("abc")
- 隐式调用
window对象
alert("abc")
1.2.2 window对象可以获取其他的BOM组成对象的属性
historylocationNavigatorScreen
这些在后续讲解
1.2.3 window对象函数
alert():显示提示框confirm():显示带有确认，取消按钮的提示框setInterval():按照指定周期来调用函数或者表达式setTimeout():在指定毫秒数后调用函数或者表达式
setInterval(function,毫秒值):在一定时间间隔后执行function,只执行一次
setTimeout(function,毫秒值):在一定的时间间隔内循环执行一个function,循环执行
setInterval(function(){
alert("哈哈")
},3000)//当打开浏览器，在三秒后输出哈哈，只执行一次
setTimeout(function(){
alert("你好")
},3000)//当打开浏览器，每隔三秒都会输出你好
1.2.4 prompt
输入框
let mes=prompt(message,default)
message:页面上的提示内容
,default:默认输入内容，可有可无
2.5 清除任务
clearTimeout(index)
setInterval()会返回一个index,将特定的index带入，就可以清除
setTimeout()是一样的
1.3.History对象
History对象是JS对历史记录进行封装
1.3.1 History对象的获取
使用window.history获取，而window.可以省略
1.3.2 history对象的函数
back():返回前一个URL(前进)forword():加载下一个URL(后退)history.go:刷新页面history.go(2):前进两个页面history.go(-2):后退两个页面
1.4 Location对象
对地址栏进行封装
1.4.1Location对象的获取
window.location,window.可以省略
1.4.2 属性
location.href:获取现在的URLlocation.href="新的URL":去新的URL页面location.host:获取域名
2.DOM
DOM：Document Object Model 文档对象模型。也就是JavaScript将 HTML 文档的各个组成部分封装为对象。
DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而HTML文档是浏览器解析。封装的对象分为:
-
Document：整个文档对象 -
Element：元素对象 -
Attribute：属性对象 -
Text：文本对象 -
Comment：注释对象
2.1 获取Element对象
HTML 中的Element对象可以通过Document对象获取，而 Document 对象是通过window对象获取。
-
Document对象中提供了以下获取Element元素对象的函数 -
getElementById("box")：根据idSSgetElementsByTagName()：根据标签名称获取，返回Element对象数组 -
getElementsByName()：根据name属性值获取，返回Element对象数组 -
getElementsByClassName("")：根据class属性值获取，返回Element对象数组 -
document.querySelector("#box"):根据选择器选中一个元素 -
document.querySelectorAll(".box"):获取多个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br>
<div class="cls">云创动力</div> <br>
<div class="cls">开发喵</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>
//在此处书写js代码
</script>
</body>
</html>
根据 id 属性值获取上面的 img 元素对象，返回单个对象
var img = document.getElementById("light");
alert(img);
根据标签名称获取所有的 div 元素对象
var divs = document.getElementsByTagName("div");// 返回一个数组，数组中存储的
是 div 元素对象
// alert(divs.length); //输出 数组的长度
//遍历数组
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
}
获取所有的满足 name = 'hobby' 条件的元素对象
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
alert(hobbys[i]);
}
获取所有的满足class='cls'条件的元素对象
var clss = document.getElementsByClassName("cls");
for (let i = 0; i < clss.length; i++) {
alert(clss[i]);
}
2.2Element对象的使用
2.2.1 获取HTML的值
元素.innerText :获取元素的文本内容
元素.innerHTML: 获取元素的网页内容与标签一起获取到
元素.属性: 获取到HTML元素的属性值
元素.getAttribute('属性名'): 获取元素某个属性的值
元素.style.样式: 获取HTML元素的行内样式
元素.style['属性'] :获取到元素的行内样式
我们通过style属性设置的样式都是行内样式
如果CSS的样式名中含有-，这种名称在JS中是不合法的，需要将这种样式名修改为驼峰命名
法，去掉-，将字母大写，
2.2.2 改变HTML的值
元素.innerText = 新文本内容 修改元素的文本内容
元素.innerHTML = 新HTML内容 修改元素的HTML内容
元素.属性 = 新的属性 修改元素的属性值
元素.setAttribute(新属性,属性值) : 修改HTML元素的属性
元素.style.样式 = 新的样式 修改HTML的行内样式
元素.style['属性'] = 新的样式 修改HTML的行内样式
元素.append('内容') 追加文本
2.2.3 修改HTML元素
document.createElement(element)
创建 HTML 元素。创建的元素在内存中，网页中不会显示
document.createAttribute(attribute) 创建HTML属性。
document.createTextNode(text) 创建 HTML 文本。
元素.removeChild(element) 删除 HTML 元素。
元素.appendChild(element) 添加 HTML 元素。
元素.clonenode() 克隆一个HTML元素
元素.replaceChild(element) 替换HTML元素。
元素.insertBefore(element) 在指定的子节点前面插入新的子节点。
2.2.4 查找HTML的父与子
元素节点.parentNode 返回元素的父节点。
元素节点.parentElement 返回元素的父元素。
元素节点.childNodes 返回元素的一个子节点的数组（包含空白文本Text节点）。
元素节点.children
返回元素的一个子元素的集合（不包含空白文本Text节点）。
元素节点.firstChild 返回元素的第一个子节点（包含空白文本Text节点）。
元素节点.firstElementChild 返回元素的第一个子元素（不包含空白文本Text节点）。
元素节点.lastChild 返回元素的最后一个子节点（包含空白文本Text节点）。
元素节点.lastElementChild
返回元素的最后一个子元素（不包含空白文本Text节点）。
元素节点.previousSibling
返回某个元素紧接之前节点（包含空白文本Text节点）。
元素节点.previousElementSibling
返回指定元素的前一个兄弟元素（相同节点树层中的前
一个元素节点）。
元素节点.nextSibling
返回某个元素紧接之后节点（包含空白文本Text节点）。
元素节点.nextElementSibling 返回指定元素的后一个兄弟元素（相同节点树层中的下一个元素
节点）。
3. JS中操作CSS样式
classlist() 获取到一个集合
className 直接获取到class的值
元素.className = "className" 。className +" 新名字";
元素.classList.add('新class')
元素.classList.remove('class') 可以删除某个class
二.事件监听
事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码。例如下图当我们点击 开灯 按钮，就需
要通过js代码实现替换图片
1.事件绑定
- 方式一：通过
HTML标签中的事件属性进行绑定
如下面代码，有一个按钮元素，我们是在该标签上定义 事件属性 ，在事件属性中绑定函数。onclick 就是 单击事件 的事件属性。onclick='on()' 表示该点击事件绑定了一个名为on()的函数
<input type="button" onclick='on()’> 1
下面是点击事件绑定的 on() 函数
function on(){
alert("我被点了");
}
- 方式二:通过
DOM元素属性绑定
如下面代码是按钮标签，在该标签上我们并没有使用 事件属性 ，绑定事件的操作需要在js代码中实现
<input type="button" id="btn"> 1
下面js代码是获取了id='btn'的元素对象，然后将 onclick 作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行
document.getElementById("btn").onclick = function (){
alert("我被点了");
}
2.常见事件
onfocus获得焦点事件onblur失去焦点事件onmouseout:鼠标移出事件onmouseover:鼠标移入事件
扫一扫
5247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
