【BOM与DOM】
1 BOM（Browser Object Model） 浏览器对象模型 2 它使 JavaScript 有能力与浏览器进行交互！！！ 3 4 ------------------------------------------------------ 5 Window对象的一些常用的方法： 6 window.innerHeight 浏览器窗口的内部高度 7 window.innerWidth 浏览器窗口的内部宽度 8 window.open() 新建一个窗口,并打开对应的网页 9 window.open('https://www.sogou.com/','','width=800px,height=400px') 10 window.close() 关闭当前浏览器窗口 11 12 13 14 ================================================== 15 DOM 16 17 DOM （Document Object Model）是指文档对象模型,通过它可以访问HTML文档的所有元素 18 可以和页面上任何一个标签做交互了 19 --------------------------------------- 20 既然DOM操作是通过js代码来操作标签, 所以我们需要先学习如何查找标签之后才能给标签绑定一些JS代码(DOM操作)
（window子对象）
1 下面都是 window的子对象 2 -------------------------- 3 navigator对象的一些常用的方法：（了解即可） 4 5 navigator.userAgent 标识自己是一个浏览器，显示客户端绝大部分信息！！！写爬虫会用 6 -------------------------- 7 history对象的一些常用的方法（了解即可） 8 9 history.forward() 前进一页 # 模拟浏览器页面的前进按键 10 history.back() 后退一页 # 模拟浏览器页面的后退按键 11 -------------------------- 12 location对象的一些常用的方法:(重点掌握的) 13 window.opener() # 父子页面通信 14 window.location.href # 获取当前页面所在的网址 15 # 前后端交互要用 16 window.open('https://www.baidu.com/','','height=500px,width=200px') # 打开新建窗口的的大小 17 window.location.href='https://www.lsmpx.com' # 也可以再加赋值符号和网址，让当前页面跳转到后面的网址去 18 window.close # 关闭浏览器窗口 19 window.location.reload() # 刷新当前页面
【子对象：浏览器对象】
【子对象history】
【location对象】
【弹出框】
1 alert /ə'lɝt/ 警报；警戒 2 prompt /prɑmpt/ n. 提示 3 弹出框 4 5 alert() # 警告框 6 7 confirm() # 确认框 用户点击确认或取消，能获取相应的true或false返回值 8 9 prompt() # 提示框 输入框里面输入相应的数据，按确认键就能获取该数据 按取消键返回null 10 prompt('什么网址？') 11 prompt('什么网址？','https://www.sogou.com/') # 也支持在默认框里面先放入默认数据
【计时器】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 </head> 8 <body> 9 <script> 10 function func1() { 11 alert('hello 你好啊') 12 } 13 14 setTimeout(func1, 3000) //毫秒为单位，3秒之后自动执行func1函数 15 let t = setTimeout(func1, 3000) //t是定时任务的标识 16 clearTimeout(t) //取消定时任务，如果想要清除定时任务，需要提前用变量指代定时任务 17 18 function func2() { 19 alert('hello') 20 } 21 22 function show() { 23 let t = setInterval(func2, 3000); //每3秒钟循环一次 24 function inner() { 25 clearInterval(t) //清除计数器 26 } 27 28 setTimeout(inner, 90000) //9秒之后触发 29 } 30 31 show() //弹出3次以后就再也不弹出来了 32 </script> 33 </body> 34 </html>
。
。
【DOM操作查找标签】
1 """ 2 1.js中变量名的命名风格推荐是驼峰体！！！ 3 2.js代码查找到的标签如果需要反复使用可以用变量接收 规律 xxxEle ！！！ 4 这样一看到xxxEle 就知道是个标签变量了！！！还是为了见名知义！！！ 5 """ 6 ----------------------------------------------------- 7 ------------------------------------------------------ 8 如果下面好多地方都要用到该标签，可以用个变量名把该标签接收一下！！ 9 这样变量divEle就指代该标签了！！！ 10 11 let divEle = document.getElementById('d1') # 通过id来查找标签，结果就是标签对象本身 12 ----------------------------------------------------- 13 document.getElementsByClassName('c1') # 通过类名查找标签 14 15 # 结果是数组里面含有多个标签对象！！！ 16 ------------------------------------------------------- 17 document.getElementsByTagName('span') # 通过标签名查找标签 18 19 # 结果也是数组里面含有多个标签对象！！！ 20 ------------------------------------------------------- 21 标签对象的方法： 22 23 parentElement 父节点标签元素 24 children 所有子标签 25 26 firstElementChild 第一个子标签元素 27 lastElementChild 最后一个子标签元素 28 29 nextElementSibling 下一个兄弟标签元素 30 previousElementSibling 上一个兄弟标签元素 31 ------------------------------------------------------
html代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 </head> 8 <body> 9 <span>span</span> 10 <span>span</span> 11 <div id="d1">div 12 <span>div>span</span> 13 <p class="c1">div>p 14 <span>div>p>span</span> 15 </p> 16 <span>div>span</span> 17 </div> 18 <span>span</span> 19 <span>span</span> 20 </body> 21 22 </html>
js代码
1 document.getElementById('d1') 2 let divEle = document.getElementById('d1') 3 divEle.parentElement # 找divEle标签的父标签，结果就是body标签！！！ 4 divEle.parentElement.parentElement # 结果就是html标签了！！！ 5 divEle.parentElement.parentElement.parentElement # 结果就是null了！！！ 6 7 divEle.children # 结果是 [span, p.c1, span] 表明有3个子标签！！！ 8 9 divEle.firstElementChild # 找divEle标签的第一个子标签 10 divEle.children[0] # 这样也能拿到divEle标签的第一个子标签 11 12 divEle.lastElementChild # 找divEle标签的最后一个子标签 13 14 15 divEle.previousElementSibling # 找divEle标签的上一个兄弟标签 16 divEle.lastElementSibling # 找divEle标签的下一个兄弟标签 17 18 ------------------------------------------------- 19 sibling 兄弟姊妹 20 previous 以前的；早先的 adj. 21 -------------------------------------------------
【节点操作】
节点操作（可以通过js来操作标签了 节点就是标签）
需求：
1.通过DOM操作动态的创建img标签，并且给标签添加属性，最后将标签添加到文本中
html代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 </head> 8 <body> 9 <div id="d1">div 10 <p id="d2">div>p</p> 11 <span>div>span</span> 12 </div> 13 </body> 14 </html>
需求二：创建a标签，设置属性，设置文本属性，添加到指定标签的上面
PS补充：
1 appendChild() 追加 2 3 removeChild() 移除 4 5 replaceChild() 替换 6 7 setAttribute() 设置 8 9 getAttribute() 获取属性 10 11 removeAttribute() 移除属性
需求三：验证innerText与innerHTML区别
。
。
【获取值操作】
需求，拿到内部文本和标签
html代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 </head> 8 <body> 9 <input type="text" id="d1"> 10 <input type="file" id="d3"> 11 <select name="" id="d2"> 12 <option value="111">哈哈哈</option> 13 <option value="222">嘿嘿嘿</option> 14 <option value="333">么么么</option> 15 </select> 16 </body> 17 </html>
。
。
【属性操作】
html代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 .c1{ 9 height: 400px; 10 width: 400px; 11 border-radius: 50%; 12 } 13 .bg_green{ 14 background-color: yellow; 15 } 16 .bg_red{ 17 background-color: red; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="d1" class="c1 bg_green bg_red" ></div> 23 <p>早上好啊 熊大</p> 24 </body> 25 </html>
1 let divEle=document.getElementById('d1') 2 3 divEle.classList # 获取标签所有的类属性 4 5 divEle.classList.remove('bg_red') # 移除某个类属性 6 7 divEle.classList.add('bg_red') # 添加某个类属性 8 9 divEle.classList.contains('c1') # 判断是否包含某个类属性 10 true 11 divEle.classList.contains('c2') 12 13 divEle.classList.toggle('bg_red') # 有某个属性则删除，无则添加 14 false 15 divEle.classList.toggle('bg_red') 16 true 17 18 19 ------------------------------------------------------ 20 css操作 21 22 let pEle=document.getElementsByTagName('p')[0] 23 24 pEle.style.color='red' 25 26 pEle.style.fontSize='28px' 27 28 pEle.style.background='yellow' 29 30 pEle.style.border='3px solid red'
。
。
【事件】
给标签绑定一些能力或功能！！！
1 事件可以简单的理解为通过js代码给html标签绑定一些自定义的功能 2 -------------------------------------------------------- 3 常见事件： 4 onclick 单击事件 当用户点击某个对象时调用的事件句柄 5 6 onfocus 元素获得焦点 input框获取焦点事件用 7 8 onblur 元素失去焦点 input框失去焦点事件用，鼠标移开的出现的事件 9 10 onchange 域的内容被改变 主要针对下拉框的 11 12 ...... 13 --------------------------------------------------------- 14 绑定事件的多种方式: 15 --------------------------------------------------------- 16 17 <!--绑定事件的方式1--> 18 <button onclick="showMsg()">快按我</button> 19 # 只有当按钮被鼠标单击后才会触发showMsg函数的运行 20 --------------------------------------------------------- 21 22 <!--绑定事件的方式2--> 23 <input type="button" value="快快快" id="d1"> 24 25 <script> 26 function showMsg() { 27 let msg = prompt('你确定要这样吗?'); 28 console.log(msg) 29 } 30 31 let inputEle = document.getElementById('d1'); 32 inputEle.onclick = function () { 33 alert('谁在那里点我!!!') 34 } 35 </script> 36 37 # 通过js代码查找到某个标签,然后给它绑定事件！！！
