document.querySelector
document.querySelectorAll
<body>
<ul>
<li>例1</li>
<li>例2</li>
<li>例3</li>
</ul>
<script>
// querySelector 获取第一个元素
const b = document.querySelector('ul li')
// querySelector 获取全部元素
const a = document.querySelectorAll('ul li')
// 使 li 中文字变为蓝色
for (let i = 0; i < a.length; i++) {
a[i].style.color = 'blue'
}
</script>
</body>
innerHTML 修改文字内容的同时还可解析标签
innerHTML 得不到表单的内容
一定要在类名前加 "." !!! 如下面的 .box
<body>
<div class="box">内容</div>
<script>
const a = document.querySelector('.box')
// 输出为加粗的 abc
a.innerHTML = '<strong>abc</strong>'
</script>
</body>
通过 classlist 修改样式
<style>
.example {
width: 100px;
height: 100px;
background-color: pink;
}
.new {
color: blue;
}
</style>
<body>
<div class="example">内容</div>
<script>
//一定要在类名前加 "."
const a = document.querySelector('.example')
// 将"内容"两字变为蓝色
a.classList.add('new')
//删除 new类
// a.classList.remove('new')
</script>
</body>
定时器setInterval
let 变量名 = setInterval (函数,间隔时间)
clearInterval (变量名)
setInterval 中的函数不可以加括号
//写法1
<script>
function fn() {
console.log('内容')
}
//不能写为let time = setInterval(fn(), 1000)
//否则计时器无法循环
let time = setInterval(fn, 1000)
clearInterval(time)
</script>
//写法2
<script>
let time = setInterval(function () {
console.log('内容')
}, 1000)
clearInterval(time)
</script>
client 和 offset 获取元素宽高
client 获取元素可见部分宽高(不包含边框 , margin , 滚动条等)
offset 内容+padding+border
client 和 offset 以带有定位的父级为准 , 若没有则以文档左上角为准
初学者,见解不足,如有错误请指出