目录
BOM
介绍
Window
案例(1)
Location
DOM
概念
标准模型
获取元素对象
案例(2)
原始代码
完整代码
JS对象
BOM
介绍
- 概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。
- 组成：
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象
Window
- 介绍：浏览器窗口对象。
- 获取：直接使用window，其中window.可以省略。window.alert("Hello Window"); alert("Hello Window");
- 属性
- history：对 History 对象的只读引用。请参阅History 对象。
- location：用于窗口或框架的 Location 对象。请参阅Location 对象。
- navigator：对 Navigator 对象的只读引用。请参阅Navigator 对象。
- 方法
- alert()：显示带有一段消息和一个确认按钮的警告框。
- confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
- setlnterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
- setTimeout()：在指定的毫秒数后调用函数或计算表达式。
案例(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对象-BOM</title>
</head>
<body>
</body>
<script>
//获取
window.alert("Hello BOM");
alert("Hello BOM Window");
//方法
// confirm - 对话框 - 确认：true， 取消：false
var flag = confirm("您确认删除该记录吗？");
console.log("flag: " + flag);
//定时器 - setInterval - 周期性的执行某一个函数
var i = 0;
setInterval(function(){
i++;
console.log("定位器执行了" + i + "次");
},2000);
//定时器 - setTimeout - 延迟指定时间执行一次
setTimeout(function(){
console.log('JS');
},10 * 1000);
</script>
</html>
Location
- 介绍：地址栏对象。
- 获取：使用window.location获取，其中 window.可以省略。
- window.location.属性；
- location.属性；
- 属性：
- href：设置或返回完整的URL。
- location.href = "https://www.baidu.com" ;
DOM
概念
- 概念：Document Object Model，文档对象模型。
- 将标记语言的各个组成部分封装为对应的对象：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- JavaScript 通过DOM，就能够对HTML进行操作：
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
<!DOCTYPE html>
<html lang="en">
<head>
<title>对象-DOM</title>
</head>
<body>
<h1>DOM对象标题</h1>
<a href="https://www.baidu.com">百度</a>
</body>
</html>
标准模型
- DOM是W3C（万维网联盟）的标准，定义了访问 HTML 和 XML 文档的标准，分为3个不同的部分：
- Core DOM - 所有文档类型的标准类型
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- XML DOM - XML文档的标准模型
- HTML DOM - HTML文档的标准模型
- Image：<img>
- Button：<input type='button'>
（一）innerHTML 属性
- 获取内容：使用
innerHTML获取元素内容时，会返回元素内部包含的所有 HTML 标记和文本内容。无论是元素标签、属性，还是文本节点，都会被包含在返回的结果中。 - 设置内容：当使用
innerHTML设置元素内容时，它会完全覆盖原有的内容。并且，如果设置的新内容中包含有效的 HTML 标记，浏览器会对这些标记进行解析和渲染，将其转换为对应的页面元素。
（二）innerText 属性
- 获取内容：通过
innerText获取元素内容时，只会返回元素内部的文本内容，会忽略所有的 HTML 标签，不会对标签进行解析。 - 设置内容：使用
innerText设置元素内容时，同样会覆盖原有的内容。并且，如果设置的内容中存在 HTML 标签，这些标签不会被浏览器解析为实际的 HTML 元素，而是会将这些标签作为普通的文本进行显示，即进行了转义处理。
获取元素对象
- HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
- Document对象中提供了以下获取Element元素对象的函数：
- 根据id属性值获取，返回单个Element对象
var h1 = document.getElementById('h1'); - 根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName('div'); - 根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName('hobby'); - 根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName('cls'); -
根据名称获取检索到的第一个选择器，返回单个Element对象
var a = document.querySelector("a"); - 根据名称获取检索到的第一个选择器，返回Element对象数组
var a = document.querySelectorAll("a");
案例(2)
通过DOM操作，完成如下效果实现。
- 点亮灯泡
- 将所有的div标签的标签体内容后面加上：very good
- 使所有的复选框呈现被选中的状态
原始代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对象-DOM-案例</title>
</head>
<body>
<img id="h1" src="img/off.gif"> <br><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"> 游戏
</body>
<script>
//1. 点亮灯泡
//2. 将所有div标签的内容后面加上
//3. 使所有的复选框呈现选中状态
</script>
</html>完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对象-DOM-案例</title>
</head>
<body>
<img id="h1" src="img/off.gif"> <br><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"> 游戏
</body>
<script>
//1. 点亮灯泡 : src 属性值
var img = document.getElementById('h1');
img.src = "img/on.gif";
//2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
const div = divs[i];
div.innerHTML += "<font color='red'>very good</font>";
}
//3. 使所有的复选框呈现选中状态
var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
const check = ins[i];
check.checked = true;//选中
}
</script>
</html>END
学习自：黑马程序员——JavaWeb课程
