一.获取元素-querySelector
// 获取满足条件的第一个元素
// 选择器：以前怎么写现在也怎么写：id,类，标签，属性选择，伪类选择器.....
// let 元素对象 = document.querySelector('选择器')
// 1.只能获取满足条件的第一个元素
// 2.如果能够获取到则返回当前元素对象,这个对象可以直接进行dom对象,如果没有获取成功则返回null
二.获取元素-querySelectorAll
// 获取页面中的所有的元素
// querySelectorAll：可以获取满足条件的所有元素，返回一个伪数组
// 这种伪数组不能做为dom元素直接操作
// 伪数组中的每一个成员都是dom元素
// 所有伪数组一般需要先遍历再使用
// 如果获取失败，返回一个空的伪数组
三.获取元素补充说明
<body>
<ul class="nav">
<li>我的首页</li>
<li>产品介绍</li>
<li>联系方式</li>
</ul>
<ul class="nav2">
<li>我的首页2</li>
<li>产品介绍3</li>
<li>联系方式4</li>
</ul>
<script>
// 获取nav2下面的所有的li元素
// let lis = document.querySelectorAll('.nav2 li')
// console.log(lis)
// 先获取nav2元素，再获取它的li元素
let nav2 = document.querySelector('.nav2')
console.log(nav2)
// 结论：也可以通过某个dom元素对象调用query....方法
let lis = nav2.querySelectorAll('li')
console.log(lis)
</script>
</body>
四.其它获取元素的api
<body>
<span class="mya">span</span>
<span>我也是span</span>
<a href="" class="mya">我是a</a>
<a href="" class="mya">我也是a</a>
<h2 id="myh2">我是h2</h2>
<h2 id="myh2">我也是h2</h2>
<input type="text" value="内容" />
<script>
// 获取所有拥有类样式名称为mya的元素 了解一下就好啦
let allA = document.getElementsByClassName('mya')
console.log(allA)
let allSpan = document.getElementsByTagName('span')
console.log(allSpan)
// 如果id重复也只能获取到第一个
let myh2 = document.getElementById('myh2')
console.log(myh2)
</script>
</body>
五.元素的内容的获取
button.addEventListener('click', function () {
// 修改内容，设置内容和删除内容都是相同的操作
// span.innerHTML = ''
// 获取标签之间的内容
// 在js中，对于属性的使用，没有赋值就是取值
// innerText在获取标签之间的内容时，只能获取到文本内容，过滤掉标签结构
console.log(h2.innerText)
// innerHTML在获取标签之间内容的时候，可以获取到完整的html结构
console.log(h2.innerHTML)
})
innerText在获取标签之间的内容时，只能获取到文本内容，过滤掉标签结构; innerHTML在获取标签之间内容的时候，可以获取到完整的html结构
六.元素的属性赋值
// 获取元素
let button = document.querySelector('button')
let p = document.querySelector('p')
let img = document.querySelector('img')
let input = document.querySelector('input')
button.addEventListener('click', function() { //核心
// 元素.属性的操作方式只适用于 内置属性
// 内置属性:元素本身拥有的属性
// p.idd = '我是p元素'
// img.src = './images/1.jpg'
input.value = '这是默认值'
})
七.单击显示不同的图片
<body>
<button>单击随机显示图片</button>
<img src="" alt="" />
<script>
// 1.获取元素
let button = document.querySelector('button')
let img = document.querySelector('img')
// 2.为按钮绑定单击事件
button.addEventListener('click', function () {
// 每次单击按钮,都要重新生成随机数,生成一个 1-4之间的随机数,包含1也包含4
let index = parseInt(Math.random() * 4) + 1
img.src = `./images/${index}.jpg`
})
</script>
</body>
八.元素的样式操作-style
<body>
<button>加啊</button>
<p>我是p元素,我可以动态添加样式</p>
<script>
let button = document.querySelector('button')
let p = document.querySelector('p')
// 为按钮绑定单击事件
button.addEventListener('click', function () {
// 元素的style是用于设置行内样式
// 我们可以设置多个样式属性
// style是所有样式集合,它是一个对象,所以我们是为style对象中的某个样式属性进行赋值
// 语法: 元素.style.样式属性 = '样式值 '
// console.log(p.style)
p.style.color = 'red'
// 如果样式属性值需要单位,那么在设置的时候也要带单位
// p.style.fontSize = '40px' //妥
p.style['font-size'] = '40px' //不妥
p.style.textDecoration = 'line-through'
})
</script>
