收藏
PHPz批改状态：合格
老师批语：
<!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解析同步，等页面完成后执行JSasync:下载完成再执行，不等html解析完把JS写到文档最底部就是最安全的--></body></html>
<!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():集合中的第一个//匹配满足条件的集合的第一个元素，类似于 idconst 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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
