JS之-BOM模型-DOM模型
一、BOM浏览器对象模型
览器对象模型（BOM） Broswer object model（整合js和浏览器）
window对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
一些常用的Window方法：
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口 (只能关闭用 js 的window.open()打开的页面)
window的子对象
navigator对象：浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。
navigator.appName; // Web浏览器全称
navigator.appVersion; // Web浏览器厂商和版本的详细字符串
navigator.userAgent; // 客户端绝大部分信息
navigator.platform; // 浏览器运行所在的操作系统
screen对象：屏幕对象，不常用。
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度
history对象：浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。
history.forward(); // 前进一页，其实也是window的属性，window.history.forward()
history.back(); // 后退一页
location对象：window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
location.href; // 获取当前url
location.href="URL"; // 跳转到指定页面
location.reload(); //重新加载页面,就是刷新一下页面
弹出框
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框：警告框经常用于确保用户可以得到某些信息。
alert("警告！！？");
确认框：当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
点击确认，那么返回值为 true。点击取消，那么返回值为 false。
confirm("请确认？");
提示框：如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为默认值，就是第二个参数，如果没有默认值那么返回null。
prompt("请在下方输入","你的答案");
计时相关*
通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
setTimeout( )：一段时间后做一些事情
setTimeout('confirm("你好");',3000); // 3秒之后执行前面的js代码
setTimeout(confirm('xxx'),3000); // 如果写的不是字符串,会直接执行
setTimeout(function(){confirm('xxx')},3000); // 最好写成函数
var a = setTimeout(function(){console.log('xxx')},3000); // a是浏览器来记录计时器的一个随机数字
clearTimeout(a); // 清除计时器,通过这个数字可以清除
setInterval：计时器,每隔一段时间做某些事情
var a = setInterval(function(){console.log('xxx')},3000); // 每隔 3 秒打印一次xxx
clearInterval(a); // 清除计时器
二、DOM文档对象模型
文档对象模型（DOM） Document object model (整合js，css，html)
DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型
HTML DOM 模型被构造为对象的树。
JavaScript 可以通过DOM创建动态的 HTML：
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应（鼠标点击事件，鼠标移动事件等）
选择器
和css一样，你想操作某个标签需要先找到它
直接查找
document.getElementById // 根据ID获取一个标签
document.getElementsByClassName // 根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName // 根据标签名获取标签合集
// 示例：
var a = document.getElementById('d1'); // 获取id属性值为d1的标签 拿到的直接是标签对象
var a = document.getElementsByClassName('c1'); // 获取class值为c1的所有标签 拿到的是数组
var a = document.getElementsByTagName('div'); // 获取所有div标签 拿到的是数组
<div class="c1" id="d1">
Holle
</div>
<div class="c1" id="d2">
Word
</div>
间接查找
var a = document.getElementById('d1');
a.parentElement; // 获取a这个标签的父级标签
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
创建节点（创建标签）
var a = document.createElement('标签名称');
// 示例,创建a标签
var a = document.createElement('a');
添加节点
// 添加节点,添加到了最后
var a = document.createElement('a'); // 创建a标签
var dd = document.getElementById('dd'); // 找到 id=dd 的标签
dd.appendChild(a); // 将创建的a标签添加到dd这个div标签里面的最后.
// 在某个节点前面添加节点
父级标签.insertBefore(新标签,某个儿子标签)
// 示例:
var dd = document.getElementById('dd'); // 找到父级标签
var a = document.createElement('a'); // 创建一个新的a标签
var d2 = dd.children[1]; // 找到父级标签下的某个儿子标签
dd.insertBefore(a,d2); // 将a标签插入到上面这个儿子标签的前面.
删除节点
var dd = document.getElementById('dd'); // 父节点
dd.removeChild(d2); // 父级标签中删除子标签
替换节点
var dd = document.getElementById('dd'); // 找到父级标签
var a = document.createElement('a'); // 创建a标签
a.innerText = '百度'; // 给 a 标签添加文本内容
var d1 = dd.children[0]; // 找到要被替换的子标签
dd.replaceChild(a,d1); // 替换
文本操作
var d1 = document.getElementById('d1'); // 找到标签
d1.innerText; // 查看标签 d1 中的文本内容
// 设置文本内容
d1.innerText = "<a href=''>百度</a>";
d1.innerHTML = "<a href=''>百度</a>"; // 能够识别标签
属性操作
var d1 = document.getElementById('d1'); // 找到d1标签
d1.setAttribute('class','cc'); // 修改class属性
divEle.removeAttribute("class") // 删除属性
// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
imgEle.src
imgEle.src="..."
值操作
var inp = document.getElementById('username');
inp.value; // 查看值
inp.value = 'xiaoyang'; // 设置值
// 示例：选择框
<select name="city" id="city">
<option value="1">四川</option>
<option value="2">上海</option>
<option value="3">北京</option>
</select>
var inp = document.getElementById('city');
inp.value; // 查看值
inp.value = '1'; // 设置值
class的操作
var d = document.getElementById('dd'); // 找到标签
d.classList; // 获得这个标签的class属性的所有的值
d.classList.add('xx2'); // 添加class值
d.classList.remove('xx2'); // 删除class值
d.classList.contains('xx2'); // 判断是否有某个class值,有返回true,没有返回false
d.classList.toggle('xx2'); // 有就删除,没有就增加
css操作
var d = document.getElementById('dd'); // 找到标签
// 有横杠的css属性,写法要去掉横杠,并且横杠后面的单词首字母大写
d.style.backgroundColor = 'deeppink';
d.style.height = '1000px'
事件
当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
绑定事件的方式有两种：
方式1:
<div id="d1" class="c1" onclick="func();"></div> /* 当点击div标签就调用func方法 */
<script>
function func() {
var d = document.getElementById('d1'); // 找到id=d1的标签
d.style.backgroundColor = 'yellow'; // 并修改css背景颜色为黄色
}
</script>
方式2：
<div id="d1" class="c1"></div>
<script>
var d = document.getElementById('d1'); // 找到id=d1的标签
d.onclick = function () { // 当此标签触发点击调用匿名函数
d.style.backgroundColor = 'yellow'; // 函数修改css背景颜色为黄色
}
</script>
**事件里面的 this: **表示当前标签对象
方法一：
<div class="c1" id="d1" onclick="func(this);"></div> /* 触发点击div标签就调用func方法 */
<script>
function func(t){
t.style.backgroundColor = 'yellow'; // 不用查找要修改的标签，t 指带当前标签
}
</script>
方法二：
<div class="c1" id="d1"></div>
<script>
var d = document.getElementById('d1'); // 找到标签
d.onclick = function (){ // 触发点击调用匿名函数
this.style.backgroundColor = 'yellow'; // 表示当前标签修改css背景颜色
}
</script>
onblur 和 onfocus 事件
<div class="c1" id="d1"></div>
<input type="text" id="username">
<script>
// onfocus 获取光标时触发的事件
var inp = document.getElementById('username'); // 获取input标签
var d1 = document.getElementById('d1'); // 获取div标签
inp.onfocus = function (){ // input标签触发onfocus事件，调用匿名函数
d1.style.backgroundColor = 'yellow'; // 对div标签的css背景颜色进行改变
}
// onblur 失去光标时触发的事件
inp.onblur = function (){
d1.style.backgroundColor = 'red';
}
</script>
onchange 事件，域内容发生变化时触发
<select name="city" id="city">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">四川</option>
</select>
<script>
var city = document.getElementById('city');
city.onchange = function (){
console.log(this.options[this.selectedIndex].innerText) // 打印所选中的内容
// this.options ——>指select标签下的素有option标签
// this.selectedIndex——>指被选中的标签在所有标签中的索引值
}
</script>
本文来自博客园，作者：Mr-Yang`，转载请注明原文链接：https://www.cnblogs.com/XiaoYang-sir/articles/14850882.html
