浏览器中的JS和获取Dom元素*重点掌握
1.浏览器中的JS
<!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>浏览器中的JS</title> </head> <body> <!-- CSS 类型 1. 行内样式：Style 属性，当前元素 2. 文档样式：style 标签，当前文档 3. 外部样式：link 标签，引用文档 --> <!-- JS 类型 1. 行内样式：事件属性，当前元素 2. 文档样式：script 标签，当前文档 3. 外部样式：script.src 属性，引用文档 --> <!--1. 行内脚本：事件属性--> <button onclick="alert('登录成功！')">登录</button> <!--2. 文档脚本：script--> <script> document.body.style.backgroundColor = 'wheat'; </script> <!--3.外部脚本：script.src--> <button onclick="like(this)">点赞+<span>100</span></button> <script src="js/func.js"></script> <!-- 外部JS相比内部JS，多了一个下载过程 当执行JS时，HTML停止解析，为了防止卡住 defer:下载与HTML解析同步，等页面完成后执行JS async:下载完成再执行，不等html解析完 把JS写到文档最底部就是最安全的 --> </body></html>
2.获取Dom元素
<!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> <ul class="list"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> </ul> <script> // document.getElementById // document.getElementsByClassName // 以上过时了，用以下代码 /** * * 1. 一组：querySelectorAll() * * 2. 一个：querySelector() * * 参数：CSS 选择器 */ // 1. querySelectorAll:集合 const items = document.querySelectorAll('.list > *'); console.log(items); //items是类数组（对象） items.forEach((item) => (item.style.color = 'red')); //第一个item => blue //items[0].style.color='blue' // 2. querySelector():集合中的第一个 //匹配满足条件的集合的第一个元素，类似于 id const item = document.querySelector('.list > *') console.log(item) //以上两个API，也可以在元素上面调用 const list = document.querySelector('.list') console.log(list) const lis = list.querySelectorAll('li') lis.forEach(li => (li.style.border='1px solid')) </script> </body></html>
