「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。
.querySelector 与 .querySelectorAll 区别
.querySelector 的特点
获取的是满足条件的第一个 一定只有一个
获取的是dom元素，可以直接操作
如果没有获取到，就返回null
常忽略导致报错（Cannot read properties of null (reading 'style'):不能使用null读取属性style）
<body>
<div>
<span>span</span>
<span>我也是span</span>
<a href="" class="mya">我是a</a>
<h2 id="myh2">我是h2</h2>
</div>
<script>
//获取span元素，
let doms = document.querySelector('span')
//设置颜色为红色
doms.style.color = 'red'
</script>
</body>
这会打开页面就会发现变红色的只有满足条件的第一个span标签 ，验证.querySelector获取的特点
.querySelectorAll 的特点
获取的是满足条件的所有(多个)DOM对象 返回的是一个集合-NodeList--伪数组，没有取到时返回的也是一个空的伪数组
获取的是伪数组，无法直接操作,必须通过下标才能操作，所以我们对伪数组进行遍历, 用：for forEach
<body>
<div>
<span>span</span>
<span>我也是span</span>
<a href="" class="mya">我是a <span>程序员中心</span></a>
<h2 id="myh2">我是h2</h2>
</div>
<span>我还是span</span>
<script>
// 获取span元素
let mya2 = document.querySelectorAll('span')
console.log(mya2);
// 遍历伪数组mya2
for (let i = 0; i < mya2.length; i++) {
// 打印伪数组
console.log(mya2[i]);
//给遍历的每个元素设置为红色
mya2[i].style.color = 'red'
}
</script>
</body>
显示结果
************************************************************************************************************
随机点名并渲染在页面某个位置
分析：首先获取需要的元素，（每次获取的时候可以log 一下，看一下有没有获取到自己需要的元素），按钮点击开始开始点名并在页面显示出名字
<style>
span {
display: block;
width: 100px;
margin-top: 100px;
padding: 10px 20px;
border: solid #f00 1px;
text-align: center;
}
</style>
</head>
<body>
<button>随机抽取</button>
<span>这是渲染位置</span>
<script>
//获取span元素
let span = document.querySelector('span')
//名字放在数组里
let names = ['小明', '隔壁老王', '大爷', '牛牛', '懒洋洋']
//获取button元素
let btn = document.querySelector('button')
// 单击按钮之后的业务处理
btn.addEventListener('click', function () {
//获取随机数
let ran = parseInt(Math.random() * names.length);
//打印在控制台看一下是否获得合适names数组的随机 索引 数字
console.log(ran);
let name = names[ran]
//修改span元素内容为随机的名字
span.innerText = name
})
</script>
</body>
注意随机数要取整数，还有范围刚好是数组的索引
获取内容时用 .innerText 还是 .innerHTML
设置、修改DOM元素内容的3种方式
document.write()
元素.innerText 属性
元素.innerHTML 属性
三者的区别是
<body>
<div>
<p>我是p元素</p>
<span>我是span元素</span>
<h1>我是h1</h1>
</div>
<script>
// 如果innerText或者innerHTML没有赋值，那么就是取值
let div = document.querySelector('div')
// innerText:获取标签之间的文本内容，标签会被忽略
console.log(div.innerText)
console.log('-----------------------------------')
// innerHTML：获取标签之间的完整结构
console.log(div.innerHTML)
</script>
</body>
下图虚线上是.innerText;虚线下是.innerHTML
