BOM 对象
BOM 简介
- BOM(browser Object Model)即浏览器对象模型
- BOM 由一系列对象组成,是访问、控制、修改浏览器的属性的方法
- BOM 没有统一的标准(每种客户端都可以自定标准)。
- BOM 的顶层是 window 对象
window 对象
window 对象表示浏览器中打开的窗口。
使用 window 对象中的属性和方法,可以省略对象名,直接写方法名和对象名
-
属性:
- location :当前 URL 的信息
- history :客户访问过的 URL 的信息
- screen :客户端的屏幕信息
- navigator :浏览器基本信息
- document :文档对象
-
函数:
弹框
// 提示框(显示带有一段消息和一个确认按钮的警告框) 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">
<head>
<meta charset="UTF-8">
<title>history对象</title>
<script>
//创建鼠标点击事件的响应函数
function goBack() {
window.history.back();
}
function goForward() {
window.history.forward();
}
</script>
</head>
<body>
<input type="button" value="上一步" onclick="goBack()"/>
<input type="button" value="下一步" onclick="goForward()"/>
<a href="04_history对象.html">跳转到04_history对象.html</a>
</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> //阻止提交 <a href="javascript:void(0)">我是超链接</a> <form action="http://www.baidu.com" onsubmit="return f()"> <input type="submit"> </form>
DOM 对象
DOM 是 document object model,也就是文档对象模型。
可以将 HTML 页面看做一个文档,在 js 眼中就是一个 document 对象。
这个 document 对象中就包含了页面中的所有元素。
DOM 中的节点分类:
- 元素节点(element node)
- 属性节点(attribute node)
- 文本节点(text node)
dom 获取元素
-
方式1:es6 提供了强大的根据 CSS 选择器获取元素的接口(推荐)
// 根据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"> <head> <meta charset="UTF-8"> <title>dom操作内容</title> </head> <body> <div id="d1">我是d1<br/></div> <div id="d2">我是d2</div> <div id="d3">我是d3</div> <script> // 向body中追加html内容 document.write("<h1>我是h1标题标签</h1>"); // 获取元素的纯文本,html内容对比 var d1Ele = document.querySelector("#d1"); // 获取id是d1的元素 <div id="d1">我是d1<br/></div> console.log(d1Ele.innerText); //我是d1 ==>标签中的文本 console.log(d1Ele.innerHTML); //我是d1<br> ==>标签体 console.log(d1Ele.outerHTML); //<div id="d1">我是d1<br></div> ==>整个标签 // 修改元素的纯文本,html内容对比 var d2Ele = document.querySelector("#d2"); //获取id是d2的元素 <div id="d2">我是d2</div> //d2Ele.innerText = "<h2>我是h2标签体标签</h2>"; //显示纯文本 d2Ele.innerHTML = "<h2>我是h2标签体标签</h2>"; //显示标签 // 获取或修改包含元素自身的html内容(了解) var d3Ele = document.querySelector("#d3"); //获取id是d3的元素 <div id="d3">我是d3</div> console.log(d3Ele.outerHTML); //<div id="d3">我是d3</div> 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="" // 创造一个节点,返回一个element对象 document.createElement("标签名称) // 给父标签添加一个子标签 parentElement对象.appendChild(newNode) // 在指定节点前插入新节点 parentElement对象.insertBefore(newNode,beforeNode) // 替换节点的方法 parentElement对象.replaceChild(newNode, oldNode) // 删除节点的方法 parentElement对象.removeChild(childNode)
-
示例:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>dom操作元素</title> </head> <body> <div id="container"> <input id="smoke" type="checkbox" name="hobby" value="抽烟"> <label for="smoke">抽烟 </label> <!-- <input id="drink" type="checkbox" name="hobby" value="喝酒">--> <!-- <label for="drink">喝酒 </label>--> <!-- <input id="perm" type="checkbox" name="hobby" value="烫头">--> <!-- <label for="perm">烫头 </label>--> </div> <script > //获取div标签对象 var divEle = document.querySelector("#container"); // 添加喝酒 innerHTML console.log(divEle.innerHTML); divEle.innerHTML += "<input id='drink' type='checkbox' name='hobby' value='喝酒'>" + "<label for='drink'>喝酒 </label>"; // 添加烫头 // 创建input标签,使用document对象中方法createElement("标签名称") var inputEle = document.createElement("input"); console.log(inputEle); //<input> // <input id="perm" type="checkbox" name="hobby" value="烫头"> inputEle.setAttribute("id","perm"); console.log(inputEle); //<input id="perm"> inputEle.setAttribute("type","checkbox"); inputEle.setAttribute("name","hobby"); inputEle.setAttribute("value","烫头"); console.log(inputEle); //<input type="checkbox" id="perm" name="hobby" value="烫头"> // <label for="perm">烫头 </label> // 创建标签 var lableEle = document.createElement("lable"); // 添加属性 lableEle.setAttribute("for","perm"); console.log(lableEle); //<lable for="perm"> // 添加标签体 lableEle.innerHTML="烫头 "; console.log(lableEle); //<label for="perm">烫头 </label> // 使用父标签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"> <head> <meta charset="UTF-8"> <title>dom操作样式</title> </head> <body> <style> #p1{background-color: red} .mp{color:green} .mpp{background-color: lightgray;} </style> <p id="p1">1. 设置一个css样式</p> <p id="p2">2. 批量设置css样式</p> <p id="p3" class="mpp">3. 通过class设置样式</p> <p id="p4">4. 切换class样式</p> <input type="button" value="切换样式" id="b1" /> <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>