<!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"><script src="demo7.js"></script><title>浏览器中的JS</title></head><body><!-- js的工作环节/宿主环境：浏览器和服务器node.js --><!-- 1.事件属性，写到元素的事件属性 --><button onclick="console.log('hello world');">按钮1</button><button onclick="setBg(this)">按钮2</button><!-- 获取dom元素 --><ul class="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li></ul><script>// TODDD 获取一组 querySelectorALL(css选择器)console.log(document);const items = document.querySelectorAll(".list > .item");console.log(items);console.log(document);for(let i = 0;i < items.length; i++){items[i].style.color = "red";}// TODDD 获取一个 querySelector(css选择器)const first = document.querySelector(".list > .item");console.log(first);first.style.backgroundColor = "yellow";const third = document.querySelector(".list > .item:nth-of-type(3)");console.log(third);third.style.backgroundColor = "yellow";</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
