BOM和DOM
基础介绍
js的三部分组成
ECMAScript、BOM(浏览器对象模型，就是js操作浏览器)、DOM(文档对象模型，js操作html文档、css样式等)
BOM：大部分内容作为了解
DOM：需要熟练掌握
window对象常用方法
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口
# navigator对象（了解即可）
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
# history对象（了解即可）
history.forward() // 前进一页
history.back() // 后退一页
# location对象------------------->掌握重要
location.href 获取URL
location.href="URL" // 跳转到指定页面，在pycharm写就会直接跳转至写入的界面
location.reload() 重新加载页面
# 弹出框
alert("你看到了吗？");
confirm("你确定吗？")
prompt("请在下方输入","你的答案")
function f1(){ console.log(123+Math.random()); }
清除定时器
clearTimeout(t1);
setInterval多次循环
function f1(){ console.log(100+Math.random()) } var t2 = setInterval(f1,3000)
闭包定时器（执行3次alert）
function f2(){ alert(12345); } function show(){ let t = setInterval(f2,3000); function inner(){ clearInterval(t) } setTimeout(inner,9000); } show()
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
● 文档节点(document对象)：代表整个文档
● 元素节点(element 对象)：代表一个元素（标签）
● 文本节点(text对象)：代表元素（标签）中的文本
● 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
● 注释是注释节点(comment对象)
JavaScript 可以通过DOM创建动态的 HTML：
● JavaScript 能够改变页面中的所有 HTML 元素
● JavaScript 能够改变页面中的所有 HTML 属性
● JavaScript 能够改变页面中的所有 CSS 样式
● JavaScript 能够对页面中的所有事件做出反应
查找标签：
<div id="d1" class="c1">div</div> <div id="d2" class="c1">div</div> <div id="d3" class="c1">div</div> <input type="text" name="username">
以下例子按上述代码查找
直接查找：
用（id）getElementById查找
var div = document.getElementById('d1') console.log(div); var div1 = document.getElementById('d2') console.log(div1) var div2 = document.getElementById('d3') console.log(div2)
用（class）getElementsByClassName查找
var div = document.getElementsByClassName('c1') console.log(div)
结果：
索引取值
var div = document.getElementsByClassName('c1')[0] console.log(div)
用标签取值（getElementsByTagName），也可索引取值，同class
var div = document.getElementsByTagName('div'); console.log(div);
通过定义属性查找
var div3 = document.getElementsByName('username'); // 通过input的name属性获取 console.log(div3);
间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素 （相当于children的索引0.）
lastElementChild 最后一个子标签元素 （children的最后一个值）
nextElementSibling 下一个兄弟标签元素 （同级标签的下面一个）
previousElementSibling 上一个兄弟标签元素 （同级标签的上面一个）
当用class查找的时候要索引，否则无法准确到取的具体值，但是id取值不用索引。
children也需要索引
<div class="div5">
<ul class="u1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
var div = document.getElementsByClassName('div5')[0];
console.log(div)
var ul = div.children[0];
console.log(ul)
var img = document.createElement('img'); //找到要放入div的位置 var div = document.getElementById('d1'); // 给img标签设置src属性 img.src = '1234.png'; img.alt='xixixi'; //给标签设置属性的时候，只能给标签自带的属性添加，自定义属性不能通过点形式设置 //img.username = 's1'//这个方式是不可以的 //设置自定义属性用 img.setAttribute('username','s1'); console.log(img.getAttribute('username'));//取定义的username的值 //移除username img.removeAttribute('username'); console.log(img); //将img标签放到div里 div.appendChild(img);
创建a链接出来
// 1. 常见出来a标签 var a = document.createElement('a'); // <a></a> // 2. 设置属性 a.href = 'http://www.baidu.com'; // // <a href='http://www.baidu.com'></a> a.title = '这是a'; // 3. 给a标签设置文本内容 // a.innerText = '<h1>点我看美女</h1>'; // <a href='http://www.baidu.com'>点我看美女</a> a.innerHTML = '<h1>点我看美女</h1>' // 识别html标签 console.log(a); // 4. 把a放到div里面取 var div = document.getElementById('d1'); div.appendChild(a);
获取值操作
class的操作：
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
例子：下拉框，选择城市
<select name="" id="city">
<option value="shanghai" selected>shanghai</option>
<option value="beijing" >beijing</option>
</select>
<script>
var select = document.getElementById('city');
console.log(select.value);
</script>
div中增加class属性 【classList.add】【console.log】
<div id="d1" class="">div</div>
<script>
var div = document.getElementById('d1');
div.classList.add('c1');
div.classList.add('c2');
// div.classList.remove('c2');
console.log(div)
</script>
<div id="d1" class="">div</div>
<script>
var div = document.getElementById('d1'); //先找到id是div
var res = div.classList.contains('c3') //查看div里是否包含c3
console.log(res); //false
// 无则添加、有则删除
div.classList.toggle('c3'); //true
div.classList.toggle('c3'); //false
div.classList.toggle('c3'); //true
div.classList.toggle('c3'); //false
</script>
颜色边框大小，指定方向的边框颜色大小等操作
<div id="d1" class="">div</div>
<script>
var div = document.getElementById('d1');
div.style.color = 'red'; //div的颜色
div.style.border = '1px solid red'; //div的大小边框颜色
div.style.backgroundColor = 'green'; //背景颜色
div.style.borderLeftColor = 'red'; //左边边框的颜色
div.style.borderLeftStyle = 'dashed'; //左边边框虚线
div.style.borderLeftWidth = '5px'; //左边边框大小
div.style.borderLeft = '5px dashed red'; //将上面的统一
</script>
事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
绑定事件
绑定事件方法一：
直接绑定给标签
<script>
function f() {
alert(123);
}
</script>
</head>
<body>
<button class="btn" onclick="f();">按钮点我</button>
绑定方法二：
写闭包函数进行绑定事件
当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。
window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。
注意：.onload()函数存在覆盖现象。
<script> window.onload = function () { //给网页绑定一个页面加载完成事件 var btn = document.getElementsByClassName('btn')[0]; //根据class找到对应对象 btn.onclick = function () { //给btn绑定事件点击 alert(1234); //弹窗 } } </script> </head> <body> <button class="btn">按钮点我</button>
ps（关于ps）：
his是实参，表示触发事件的当前元素。
函数定义过程中的ths为形参。
事件案例：
变色（开灯关灯效果）
<style> /*设置变色的尺寸和颜色 */ #d1 { height: 50px; width: 50px; border-radius: 50%; } .bg_1 { background-color: black; } .bg_2 { background-color: hotpink; } </style> </head> <body> <div id="d1" class="bg_1 bg_2"></div> <button id="d2" >点击变色</button> <script> <!-- 这里绑定事件--> // 找到要写入的标签位置 let btn_start = document.getElementById('d2') let change = document.getElementById('d1') //需要用到这里面的变色 btn_start.onclick =function (){ change.classList.toggle('bg_2') } </script>
input，焦点和失焦案例
<body> <input type="text" value="李梦琦是美女" id = 'd1'> <script> let get = document.getElementById('d1'); //获取焦点 get.onfocus = function (){ this.value = '' //这里可以用this来代表这里的get } //失去焦点 get.onblur = function (){ //移开后再给标签赋值 get.value = '假的' } </script> </body>
定时器
<body> <input type="text" id="i1"> <button id="b1">开始</button> <button id="b2">结束</button> <script> var t; function showtime(){ var find = document.getElementById('i1'); var time = new Date(); find.value = time.toLocaleString(); } showtime(); var find1 = document.getElementById('b1'); find1.onclick = function (ev){ if (!t) { t = setInterval(showtime,1000); } } var find2 = document.getElementById('b2'); find2.onclick = function (ev){ clearInterval(t); t = undefined } </script>
省市联动
<body> <!--设置下拉框--> <select name="" id="province"> </select> <!--设置初始下拉框--> <select name="" id="city"> <option value="">廊坊</option> <option value="">邯郸</option> </select> <script> var pro = document.getElementById('province'); var city = document.getElementById('city'); var data = { "河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"] }; // 1. 先循环data对象 for (var i in data) { // i--------------------->河北省、北京、山东 // 1.1 先创建option标签 var option = document.createElement('option'); // 1.2 设置option的value值 option.value = i; // 1.3 设置文本内容 option.innerText = i; pro.appendChild(option); } // 2. 给省的下拉框绑定change事件 pro.onchange = function () { // 2.1 先知道当前选的下拉框的值是什么 // var current_pro = pro.value; var current_pro = this.value; // 河北省 北京 山东 // 2.2 根据选择的当前省查询对应的市列表 var current_city_list = data[current_pro]; // ["朝阳区", "海淀区"], //2.3 循环市列表 city.innerText = ''; for (var i = 0; i < current_city_list.length; i++) { // 1.1 先创建option标签 var option = document.createElement('option'); // 1.2 设置option的value值 option.value = current_city_list[i]; // 1.3 设置文本内容 option.innerText = current_city_list[i]; // <option value='朝阳区'>朝阳区</option> // <option value='海淀区'>海淀区</option> // 1.4 就把新生成的option标签调价到市的select去 city.appendChild(option); } } </script> </body>
