一，BOM与DOM简介：
BOM（Brow Object Model）：就是指浏览器对象模型，可以让JavaScript有能力与浏览器进行交互。
DOM（Document Object Model）： 是指文档对象模型，通过可以访问HTML文档的所有元素。
二，BOM操作：
所有浏览器都支持windows对象，表示的浏览器的窗口。
常用方法：
查看浏览器窗口的内部高度：window.innerHeight
查看浏览器窗口的内部宽度：windows.innerwidth
打开新的窗口：windows,open()
关闭当前窗口：windows.close()
windows.appName
web浏览器全称：navigator.appName
web浏览器厂商和版本的详细字符串：navigator.appVersion
客户端绝大部分信息：navigator.userAgent
浏览器运行所在的操作系统：navigator.plaform
windows.history
前进一页：history.forward()
后退一页：history.back()
windows.location(重点)
获取URL：location.href
跳转到指定页面：location.href = 'URL'
重新加载页面：location.reload()
弹出框
警告框（alert）
确认框（confrim）
提示框（prompt）
计时器相关（重点）
setTimeout 与 clearTimeout(设置单次定时触发，清除)
setinterval 与 clearinterval(循坏触发，清除)
案例：
function f1() { alert(123); } function clear() { var t = setInterval(f1,3000); //以3秒为周期不停的调用f1函数。 function inner() { clearInterval(t); //clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作 } setTimeout(inner,9000) // setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 } clear();
三：
五，节点操作
案例一：
ps：在该标签设置自定义属性的时候不能用点的方式，setAttribute方法既可以设置自定义属性，也可以设置自带的属性。
// 创建标签。 var imgEle = document.createElement('img'); // 设置自定义属性。 imgEle.setAttribute('id','i1') // 设置固有的属性。 imgEle.src = 'longzhu.png' // 添加到DOM树中，让浏览器展示出来。 var d1Ele = document.getElementById('d1') d1Ele.appendChild(imgEle)
案例二：
// 创建一个a标签 var aEle = document.createElement("a") // 添加固有属性 aEle.href = 'https:www.baidu.com' // 添加文本属性 aEle.innerText = 'clicked me' // 获取参考点标签 var d3Ele = document.getElementById('d3') var s1Ele = document.getElementById('s1') // 在d3标签内部，s1标签上方添加创建的a标签 d3Ele.insertBefore(aEle,s1Ele)
ps：innerText 和 innerHTML的区别在于：innerText 不能识别html标签，而innerHTML可以。
获取值操作：对象.value
设置值操作：对象.value = 需要设置的值
class操作：
ps：通过class获取到的数据是一个数组，需要通过索引拿到单个对象。
// 根据class找到相应的标签对象 var c1Ele = document.getElementsByClassName('c1')[0] // 获取该标签对象的class属性列表并移除背景红色 c1Ele.classList.remove('bg-red') // 添加属性 c1Ele.classList.add('bg-green') // 判断是否存在 c1Ele.classList.contains('bg-green') c1Ele.classList.contains('bg-red') // 有则删除，无则添加 c1Ele.classList.toggle('bg-green')
style样式操作：
// 修改高度样式 d1Ele.style.height = '200px' // 修改宽度样式 d1Ele.style.width = '200px' // 修改背景色样式 d1Ele.style.backgroundColor = 'blue'
六：时间绑定
两种绑定时间的方法：
标签内直接调用相应事件函数。
js代码自动查找标签并绑定事件。
案例一：
<div class="bg-red " id="d1"></div> //为button添加一个点击事件。 <button id='b1' onclick='change();'>开关1</button> <button id='b2'>开关2</button> <script> // 标签直接绑定事件 function change(){ var d1Ele = document.getElementById('d1'); // 为元素切换类 d1Ele.classLict.toggle('bg-green'); } // 通过JS代码绑定事件 var b2Ele = document.getElementById('b2'); b2Ele.onclick = ()=>{ change(); }
案例二：
<input type="text" value="苹果手机" id="i1"> var i1Ele = document.getElementById('i1'); // 赋值一个焦点函数（鼠标点中触发），（ev）事件参数 i1Ele.onfocus = function (ev) { i1Ele.value = ''; // 也可以直接用this this.value = '' }; // 时间在失去焦点时触发。 i1Ele.onblur = function (ev) { i1Ele.value = '苹果电脑'; // 也可以直接用this this.value = '苹果电脑' }
案例三：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="d1"> <button id="b1">开始</button> <button id="b2">结束</button> <script> // 定义一个存储定时器的全局变量 var flag; // 先获取代码中需要用到的一些固定标签对象 var b1Ele = document.getElementById('b1'); var iEle = document.getElementById('d1'); var b2Ele = document.getElementById('b2'); // 定义一个展示时间的函数 var showTime = function(){ // 获取当前时间 var cTime = new Date(); iEle.value = cTime.toLocaleString() }; // 给b1标签绑定点击事件 b1Ele.onclick = function () { // 先判断flag是否已经指代了一个定时器 if (!flag){ flag = setInterval(showTime,1000) } }; b2Ele.onclick = function () { // 取消定时器 clearInterval(flag); // 将标志位手动置为布尔值为false的值即可 flag = null; } </script> </body> </html>
案例四：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="" id="d1"> </select> <select name="" id="d2"> </select> <script> // 先获取需要操作的标签对象 let proEle = document.getElementById('d1'); let cityEle = document.getElementById('d2'); let data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}; // 将所有的省渲染到proEle标签内部 for循环获取所有的省 for (let pro in data){ // 创建option标签 let opEle = document.createElement('option'); // 给option标签设置文本值 opEle.innerText = pro; // 将生成的option标签添加到proEle中 proEle.appendChild(opEle) } //onchange 当用户改变输入框内容时运行的代码 proEle.onchange = function () { // 先清空cityEle标签内所有的内容 cityEle.innerHTML = ''; // 获取用户选择的省 根据省拿到对应的市 let choice_pro = proEle.value; let cityList = data[choice_pro]; // for循环创建option标签添加到cityEle标签内 for (let i=0;i<cityList.length;i++){ // 创建option标签并添加文本 let cEle = document.createElement('option'); // 给option标签设置文本值 cEle.innerText = cityList[i]; // 将生成的option标签添加到proEle中 cityEle.appendChild(cEle) } } </script> </body> </html>