JavaScript 入门指南(三)BOM 对象和 DOM 对象
墨鸦_Cormorant 2024-08-24 16:35:01 阅读 76
BOM 对象
BOM 简介
BOM(browser Object Model)即浏览器对象模型BOM 由一系列对象组成,是访问、控制、修改浏览器的属性的方法BOM 没有统一的标准(每种客户端都可以自定标准)。BOM 的顶层是 window 对象
window 对象
window 对象表示浏览器中打开的窗口。
使用 window 对象中的属性和方法,可以省略对象名,直接写方法名和对象名
属性:
location :当前 URL 的信息history :客户访问过的 URL 的信息screen :客户端的屏幕信息navigator :浏览器基本信息document :文档对象
函数:
弹框
<code>// 提示框(显示带有一段消息和一个确认按钮的警告框)
alert(提示信息);
// 确认框(显示带有一段消息以及确认按钮和取消按钮的对话框)。点击确定,返回true;点击取消,返回false
confirm(提示信息);
// 输入框(显示可提示用户输入的对话框)。点击确定,返回输入的内容;点击取消,返回null
prompt(提示信息);
浏览器窗口
// 打开一个新的浏览器窗口或查找一个已命名的窗口
open(网址)
// 关闭浏览器窗口
close()
定时器
// 执行一次的定时器
setTimeout(函数, 毫秒值);
// 反复执行的定时器
setInterval(函数, 毫秒值);
// 参数:
// 函数:定义一个有名函数,传递函数名字,或者使用匿名函数
// 毫秒值:设置定时器的时间,在指定的时间结束之后,会执行传递的函数
// 返回值:返回的是定时器的 id 值,可以用于取消定时器使用
// 取消执行一次的定时器
clearTimeout(定时器的id值);
// 取消反复执行的定时器
clearInterval(定时器的id值);
示例:
var timeId = setTimeout(function () {
alert("c4爆炸了!");
}, 5000);
//alert(timeId);// 2
function butOnclick() {
// 取消执行一次的定时器
cl
}
location 对象
Location 对象包含有关当前 URL(浏览器的地址)的信息。
属性:
href :获取当前浏览器的url地址
href = “新的url地址” : 跳转页面,相当于在浏览器地址栏中输入了地址,并且敲击回车(打开页面)
hostname :主机名
port :端口名host :主机名+端口名
方法:
reload() :重新加载当前文档。 刷新页面
web 存储
HTML5 为 JS 增加了两个可以存储数据的对象
localStorage :本地存储,永久存储数据,作用域:所有页面永久访问sessionStorage :会话存储,临时存储数据,作用域:一次会话(连续跳转的几个页面)
不管是 localStorage,还是 sessionStorage,可使用的 API 都相同
常用函数(以 localStorage 为例):
setItem(key, value) :存储一个数据getItem(key) :获取一个数据removeItem(key) :删除一个数据clear() :清除所有数据
history 对象
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
函数:
back() :后退到前一个页面(加载 history 列表中的前一个 URL)forward() :前进到后一个页面(加载 history 列表中的下一个 URL)go(n) :直接前进到第 n 个页面
go(-n) :直接后退到第 n 个页面
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<title>history对象</title>
<script>
//创建鼠标点击事件的响应函数
function goBack() {
window.history.back();
}
function goForward() {
window.history.forward();
}
</script>
</head>
<body>
<input type="button" value="上一步" onclick="goBack()"/>code>
<input type="button" value="下一步" onclick="goForward()"/>code>
<a href="04_history对象.html">跳转到04_history对象.html</a>code>
</body>
</html>
screen 对象
Screen 对象包含有关客户端显示屏幕的信息。
screen 对象中的属性,可以通过 screen.属性名 直接使用
属性:
height :返回显示屏幕的高度(像素)width :返回显示器屏幕的宽度(像素)
navigator 对象
navigator 对象包含有关浏览器的信息。
navigator 对象中的属性,可以通过 navigator.属性名 直接使用
属性:
appName :返回浏览器的名称appVersion :返回浏览器的平台和版本信息userAgent :浏览器类型
超链接与表单的跳转控制
超链接和表单都可以进行跳转。跳转属于它们的默认功能。
一般在它们触发的一个事件中,可以通过返回 false,来阻止他们的跳转!
<br />function fun5(){
alert('超链接被点击了!');
return false;
}
function f() {
alert("阻止表单提交");
return false;
}
<a href="https://www.baidu.com" onclick="return fun5()">超链接</a>code>
//阻止提交
<a href="javascript:void(0)">我是超链接</a>code>
<form action="http://www.baidu.com" onsubmit="return f()">code>
<input type="submit">code>
</form>
DOM 对象
DOM 是 document object model,也就是文档对象模型。
可以将 HTML 页面看做一个文档,在 js 眼中就是一个 document 对象。
这个 document 对象中就包含了页面中的所有元素。
DOM 中的节点分类:
元素节点(element node)属性节点(attribute node)文本节点(text node)
dom 获取元素
方式1:es6 提供了强大的根据 CSS 选择器获取元素的接口(推荐)
<code>// 根据css选择器获取一个元素
document.querySelector(CSS选择器)
// 根据css选择器获取元素对象数组集合
document.querySelectorAll(CSS选择器)
方式2:es5 提供的获取元素的接口
// 根据 id 获取一个元素:
document.getElementById(ID) // 等价于es6的 querySelector(#ID)
// 根据 class 获取多个元素:
document.getElementsByClassName(class) // 等价于es6的 querySelectorAll(.class)
// 根据标签名称获取多个元素:
document.getElementsByTagName(标签名称)// 等价于es6的 querySelectorAll(标签)
// 根据 name 属性获取多个元素:
document.getElementsByName('name值') // 等价于es6的 querySelectorAll(元素名称[name=name值])
小总结:
es6 接口获取元素功能非常强大,而且接口非常易用es5 接口功能非常局限,而且接口使用复杂
间接根据层次关系获取节点:
父节点:parentNode:表示该元素的父节点孩子节点:
childNodes:表示该元素的所有子节点的集合,数组对象firstElementChild:第一个儿子节点lastElementChild:最后一个儿子节点 兄弟节点:
nextElementSibling:该元素后一个兄弟元素节点previousElementSibling:该元素前一个兄弟元素节点
dom 操作内容
常用函数
// 向body中追加html内容
document.write(html内容)
// 获取或者修改元素的纯文本内容(从元素内部起始位置到终止位置的文本内容, 不包含内部的Html标签)
element对象.innerText;
// 获取或者修改元素的html内容(从元素内部的起始位置到终止位置的全部内容, 包括其内部的Html标签)
element对象.innerHTML;
// 获取或者修改包含自身的html内容
element对象.outerHTML;
示例
<!DOCTYPE html>
<html lang="zh">code>
<head>
<meta charset="UTF-8">code>
<title>dom操作内容</title>
</head>
<body>
<div id="d1">我是d1<br/></div>code>
<div id="d2">我是d2</div>code>
<div id="d3">我是d3</div>code>
<script>
// 向body中追加html内容
document.write("<h1>我是h1标题标签</h1>");
// 获取元素的纯文本,html内容对比
var d1Ele = document.querySelector("#d1");// 获取id是d1的元素 <div id="d1">我是d1<br/></div>code>
console.log(d1Ele.innerText);//我是d1 ==>标签中的文本
console.log(d1Ele.innerHTML);//我是d1<br> ==>标签体
console.log(d1Ele.outerHTML);//<div id="d1">我是d1<br></div> ==>整个标签code>
// 修改元素的纯文本,html内容对比
var d2Ele = document.querySelector("#d2"); //获取id是d2的元素 <div id="d2">我是d2</div>code>
//d2Ele.innerText = "<h2>我是h2标签体标签</h2>";//显示纯文本
d2Ele.innerHTML = "<h2>我是h2标签体标签</h2>";//显示标签
// 获取或修改包含元素自身的html内容(了解)
var d3Ele = document.querySelector("#d3");//获取id是d3的元素 <div id="d3">我是d3</div>code>
console.log(d3Ele.outerHTML);//<div id="d3">我是d3</div>code>
d3Ele.outerHTML = "<h3>我是h3标签体标签</h3>";//把d3的div整个替换为了h3标签
</script>
</body>
</html>
dom 操作属性
方法1:
// 获取元素的一个属性的值。注意:只能获取标签上属性的值,获取不用用户输入的内容
element对象.getAttribute(属性名)
// 给元素设置一个属性,可以设置原生和自定义
element对象.setAttribute(属性名, 属性值)
// 移除元素的一个属性
element对象.removeAttribute(属性名)
方法2:
// 获取或修改一个属性的值
element对象.属性名
注:
方法1 可以对自定义属性进行操作;但是 方法2 只能对标准属性进行操作。文本输入框标签:通过对象名.value 属性,可以获取到页面中用户输入的内容。复选框|单选框标签:
通过 对象名.checked 属性可以获取到选中状态。选中:true;未选中:false通过 对象名.getAttribute() 函数获取属性值:有 checked 属性,值就是 checked;没有 checked 属性,值就是 null
dom 操作元素
常用方法
// 获取或者设置标签的html内容
element对象.innerHTML
// 移除元素
element对象.outerHTML=""code>
// 创造一个节点,返回一个element对象
document.createElement("标签名称)
// 给父标签添加一个子标签
parentElement对象.appendChild(newNode)
// 在指定节点前插入新节点
parentElement对象.insertBefore(newNode,beforeNode)
// 替换节点的方法
parentElement对象.replaceChild(newNode, oldNode)
// 删除节点的方法
parentElement对象.removeChild(childNode)
示例:
<!DOCTYPE html>
<html lang="zh">code>
<head>
<meta charset="UTF-8">code>
<title>dom操作元素</title>
</head>
<body>
<div id="container">code>
<input id="smoke" type="checkbox" name="hobby" value="抽烟">code>
<label for="smoke">抽烟 </label>code>
<!-- <input id="drink" type="checkbox" name="hobby" value="喝酒">-->code>
<!-- <label for="drink">喝酒 </label>-->code>
<!-- <input id="perm" type="checkbox" name="hobby" value="烫头">-->code>
<!-- <label for="perm">烫头 </label>-->code>
</div>
<script >
//获取div标签对象
var divEle = document.querySelector("#container");
// 添加喝酒 innerHTML
console.log(divEle.innerHTML);
divEle.innerHTML += "<input id='drink' type='checkbox' name='hobby' value='喝酒'>"code>
+ "<label for='drink'>喝酒 </label>";code>
// 添加烫头
// 创建input标签,使用document对象中方法createElement("标签名称")
var inputEle = document.createElement("input");
console.log(inputEle);//<input>
// <input id="perm" type="checkbox" name="hobby" value="烫头">code>
inputEle.setAttribute("id","perm");
console.log(inputEle);//<input id="perm">code>
inputEle.setAttribute("type","checkbox");
inputEle.setAttribute("name","hobby");
inputEle.setAttribute("value","烫头");
console.log(inputEle);//<input type="checkbox" id="perm" name="hobby" value="烫头">code>
// <label for="perm">烫头 </label>code>
// 创建标签
var lableEle = document.createElement("lable");
// 添加属性
lableEle.setAttribute("for","perm");
console.log(lableEle);//<lable for="perm">code>
// 添加标签体
lableEle.innerHTML="烫头 ";code>
console.log(lableEle);//<label for="perm">烫头 </label>code>
// 使用父标签div中的方法appendChild(子标签);添加子标签
divEle.appendChild(inputEle);
divEle.appendChild(lableEle);
// 移除元素(了解) outerHTML
//lableEle.outerHTML = "";//删除label标签
</script>
</body>
</html>
dom 操作样式
通过 style 对象
// 获取或者修改一个样式
element对象.style.css样式
// 设置多个css样式
element对象.style.cssText = "样式键值对;样式键值对..."
注意:
style 对象,只能获取行内样式(写在一行中),不能获取内嵌的样式(写在 head 的 style 中)和外链的样式(写在css文件中)
style 是对象。typeof 的结果是 Object
值是字符串,没有设置值是空字符串""
命名规则:驼峰命名
DOM 中的 style 对象并不等同 html 标签中 style 属性,在 JS 中,横杠 - 是不能作为标识符的
比如:背景色样式在 DOM 中是 backgroundColor,而在 CSS 中是 background-color
style 对象的常用属性:backgroundColor(背景色)、backgroundImage(背景图片)、color(颜色)、width(宽像素)、height(高像素)、border(边框)、opacity(设置透明度,IE8 以前是 filter: alpha(opacity=xx))
通过 className 属性
节点的 className 属性对应于 css 中的类选择器
// 获取或者修改class属性值(样式)
element对象.className
// 获取class属性值集合,返回一个classList对象(es6特别提供的操作元素class的接口)
element对象.classList
element.classList 的常用方法:
add("class样式名称") // 添加一个class样式
remove("class样式名称") // 移除一个class样式
contains("class样式名称") // 判断是否包含某一个样式,包含返回true,不包含返回false
toggle("class样式名称") // 切换一个class样式。有则删除,无则添加
添加事件:通过对象名.事件属性名 给元素添加事件
示例:
<!DOCTYPE html>
<html lang="zh">code>
<head>
<meta charset="UTF-8">code>
<title>dom操作样式</title>
</head>
<body>
<style>
#p1{ background-color: red}
.mp{ color:green}
.mpp{ background-color: lightgray;}
</style>
<p id="p1">1. 设置一个css样式</p>code>
<p id="p2">2. 批量设置css样式</p>code>
<p id="p3" class="mpp">3. 通过class设置样式</p>code>
<p id="p4">4. 切换class样式</p>code>
<input type="button" value="切换样式" id="b1" />code>
<script >
let p1 = document.querySelector("#p1");//获取段落标签
let p2 = document.querySelector("#p2");//获取段落标签
let p3 = document.querySelector("#p3");//获取段落标签
let p4 = document.querySelector("#p4");//获取段落标签
// 内嵌式的样式,通过style对象获取不了
console.log("p1 backgroundColor: " + p1.style.backgroundColor);//""
// 给p1设置css样式
// 白色字体
p1.style.color = "white";
// 黑色背景
p1.style.backgroundColor = "black";
// 获取p1的样式名
console.log(p1.style.backgroundColor);//black
console.log(p1.style.color);//white
// 隐藏不显示
//p1.style.display = "none";
// 显示
//p1.style.display = "block";
// 给p2批量设置css样式
p2.style.cssText = "color: red;font-family: '楷体';border: 1px solid green";
// 给p3通过class设置样式
// a.给元素添加class属性的方式添加样式
//p3.setAttribute("class","mp mpp");
// b.使用className属性添加(两种方式)
//p3.className= "mp mpp";
p3.className = p3.className + " mp";// mpp + " mp"==>mpp mp
console.log("p3 className: " + p3.className);//mp mpp
// 切换class样式
// 获取p4的class样式集合
var p4List = p4.classList;
// 添加一个class样式
p4List.add("mpp");
// 判断某一个样式是否存在
console.log(p4List.contains("mpp"));//true
console.log(p4List.contains("mp"));//false
// 添加一个class样式
p4List.add("mp");
console.log(p4List);
// 移除一个class样式
p4List.remove("mp");
// 获取id是b1的按钮
var b1Ele = document.querySelector("#b1");
// 通过对象名.事件属性名,给元素添加事件
b1Ele.onclick = function () {
//切换,无则添加,有则删除
p4List.toggle("mp");
}
</script>
</body>
</html>
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。