一、简单了解怎么操作（获取）网页中的任意元素？
1）Dom对象
- 浏览器提供的一套专门用来 【操作网页内容/文档界面元素】 的功能。
- dom对象包含很多操作方法
- ducument对象是dom提供是一个对象
2）常规渲染动态效果的做法
使用 document.write() 输出在网页上
缺点：
- 网页所有内容都在document里面，容易造成代码混乱，且通过值得字符串拼接的方式，将代码输出
- 因为script标签有阻塞页面代码执行（一出错就无法往下执行），只能写在body标签最下面，故无法在页面中任意位置书写 案例：
// 1.模拟数据，注意添加数据
let list = [
{ id: 1, name: 'jack', age: 20 },
{ id: 2, name: 'rose', age: 18 },
{ id: 3, name: '张三', age: 19 }
]
// 2.渲染：将数据生成动态结构的过程
// 2.1 说到渲染，必须会有 数据 + 静态结构 的参与
// 2.2 固定套路：现在的做法： 循环遍历数据源 ，拼接字符串 ，填充到页面中
let htmlStr = '<ul>'
for (let i = 0; i < list.length; i++) {
htmlStr += `<li>
<span>${list[i].name}</span>
<span>${list[i].age}</span>
</li>`
}
htmlStr += '</ul>'
// 3.将生成的结构输出
document.write(htmlStr)
document.querySelector('.myul').innerText = htmlStr
</script>
1）ducument对象有哪些获取网页元素的方法？
第1种：document.querySelector('选择器')
优点：给元素添加动态效果时，不受位置限制
- 作用：querySelector：获取满足条件的第一个元素
- 返回值：querySelector：返回一个元素，如果没有获取到元素（选择器写错），返回null
- 操作方式：querySelector：返回元素直接操作
常见报错
<script>
// 语法：document.querySelector('选择器'),如果没有获取成功，就返回null
let myh2 = document.querySelector('#myh3')
console.log(myh2); // numll 选择器写错
myh2.style.color = 'red' // 报错
</script>
- 不能够 使用 null 读取 style 读取 属性, 一般是因为元素对象获取不成功，返回了null,此时就得考虑是否选择器写错了
<body>
<div>
<span>span</span>
</div>
<script>
// 语法：document.querySelector('选择器'),如果没有获取成功，就返回null
let span1 = document.querySelector(span)
span1.style.color = 'red' // 报错
</script>
</body>
- span is not defined span没有定义，一般是因为span这个变量你真的没有定义，或者选择器没有添加引号
第2种：document.querySelectorALL('选择器')
优点：给元素添加动态效果时，不受位置限制
- 作用：querySelectorAll：获取满足条件的所有元素
- 返回值：querySelectorAll：返回伪数组，如果没有获取到元素（选择器写错等），返回空伪数组
- 哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
- 操作方式：querySelectorAll：返回伪数组，并不是一个真正意义上的数组，不能直接调用数组的api方法 案例：
<body>
<div>
<span>span</span>
<span>我也是span</span>
<a href="" class="mya">我是a <span>广州黑马程序员中心</span></a>
</div>
<span>我还是span</span>
<script>
// 获取所有span
// 语法：document.querySelectorAll('选择器')：获取获取满足条件的所有元素，返回一个list数组
let spans = document.querySelectorAll('span')
console.log(spans) // [span, span, span, span]
// 获取到的是一个伪数组，并不是一个真正意义上的数组，不能直接调用数组的api[方法]
// spans.push('a') // push is not a function
// console.log(spans.style) // undefined
// console.log(spans.style.color) // Cannot read properties of undefined (reading 'color')
// spans.style.color = 'red'
// 伪数组的操作需要遍历 -- 重点核心
for (let i = 0; i < spans.length; i++) {
console.log(spans[i])
spans[i].style.color = 'red'
}
</script>
- 获取到的是一个伪数组，并不是一个真正意义上的数组，不能直接调用数组的api方法
- 访问一个对象不存在的属性，返回undefined
- 不能读取undefined里的style属性
- 【spans.style.color = 'red'】Cannot set properties of undefined (setting 'color'):不能使用undefined设置属性color
补充说明：
关于多个选择器的书写，与css中多个选择器写法一样
// 选择类.nav2的后代选择器li
let lis = document.querySelectorAll('.nav2 > li')
第3种：其它获取DOM对象元素的方法（了解）
需要注意的是用这种方法获取的伪数组不能采用foreach遍历，只能用for循环，不然会报错
- 因为通过getElementsBy获取的对象是HTMLCollection()的结构，没有foreach的方法
- querySelectorAll获取的对象是NodeList()的结构，可以用for 或 foreach的方法遍历
