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对象.classListelement.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>
版权声明：本文为博主作者：墨鸦_Cormorant原创文章，版权归属原作者，如果侵权，请联系我们删除！
原文链接：https://blog.csdn.net/footless_bird/article/details/137219199
