1. 获取元素
1.1. 获取第一个元素，一个HTMLElement对象，可以修改
document.querySelector('css选择器')
1.2. 获取多个元素，一个HTMLElement对象，不可以修改，得到的是伪数组
document.querySelectorAll('css选择器')
<body>
<div>123</div>
<div class="box"></div>
<p id="nav">p</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
const div = document.querySelector('div')
const box = document.querySelector('.box')
const nav = document.querySelector('#nav')
const li = document.querySelector('ul li:nth-child(1)') // 第一个li
console.dir(div) //dom对象
console.log(div
const lis = document.querySelectorAll('.ul li') // lis:伪数组
console.log(lis)
// document.getElementById() // 不常用
// document.getElementsByTagName() // 不常用
// document.getElementsByClassName() // 不常用
</script>2. 操作元素内容
2.1. 元素.innerText 只显示纯文本，不解析标签
2.2. 元素.innerHTML 能显示纯文本，解析标签
<body>
<div class="box">文字内容</div>
<script>
const box = document.querySelector('.box')
// 元素.innerText 显示纯文本，不解析标签
console.log(box.innerText) //获取文字内容
box.innerText = '我是盒子' //修改文字内容
//元素.innerHTML 解析标签
box.innerHTML = '<strong>我是大盒子</strong>'
</script>
</body>x.innerHTML = '<strong>我是大盒子</strong>'3. 操作元素属性 对象.属性=值
3.1 修改元素常见属性
3.2 通过style修改元素样式属性
3.3 通过className修改元素样式属性 // 会覆盖前面的类名
3.4 通过classList修改元素样式属性 // 最常用，h5新增的
<body>
<img src="./images/1.jpg" alt="">
<div class="box">文字</div>
<!--<div class="nav"></div>-->
<script>
// 修改元素常见属性
// const img = document.querySelector("img")
// img.src = "./images/1.jpg"
// img.title = '图片'
// 随机图片---小案例
// function getRandom(N, M) {
// return Math.floor(Math.random() * (M - N + 1) + N)
// }
// const img = document.querySelector("img")
// const random = getRandom(1, 3)
// img.src = `./images/${random}.jpg`
// 通过style修改元素样式属性
// const box = document.querySelector(".box")
// box.style.width = "400px"
// box.style.backgroundColor="skyblue"
// box.style.border = "2px solid lightpink"
// box.style.borderTop = "2px solid yellow"
// 随机更换背景图片--------通过style修改元素样式属性
// console.log(document.body)
// function getRandom(N, M){
// return Math.floor(Math.random() * (M - N + 1)) + N
// }
// const random = getRandom(1,3)
// document.body.style.backgroundImage = `url(./images/${random}.jpg)`
// 通过className修改元素样式属性
// const div = document.querySelector("div")
// div.className = "box"
// 通过classList修改元素样式属性 最常用，h5新增的
const box = document.querySelector(".box")
// 追加类
box.classList.add("active")
// 删除类
box.classList.remove("box")
// 切换类
box.classList.toggle("active")
</script>4. 操作表单元素属性
注意：获取表单元素的值用 表单.value
获取： DOM对象.属性名
设置：DOM对象.属性名 = 新值
<body>
<!--<input type="text" value="电脑">-->
<input type="checkbox">
<button>点击</button>
<script>
// 获取元素
// const uname = document.querySelector("input")
// 获取表单元素的值用 表单.value
// 设置表单的值
// uname.value = "买电脑"
// uname.type = "password"
const ipt = document.querySelector("input")
console.log(ipt.checked) // false
ipt.checked = true
console.log(ipt.checked) // true
const btn = document.querySelector("button")
btn.disabled = false //默认false，不禁用
btn.disabled = true //禁用
</script>
</body>5. 自定义属性
命名：在标签上以"data-"开头文章来源：https://www.toymoban.com/news/detail-605619.html
获取：在DOM对象上以dataset对象方式获取文章来源地址https://www.toymoban.com/news/detail-605619.html
<body>
<div data-id="1" data-spa="1_1">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<script>
const one = document.querySelector("div") // 获取第一个
console.log(one.dataset.id) // 1
console.log(one.dataset.spa) // 1_1
</script>
</body>随机函数：
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1) + N)
}到了这里，关于JavaScript---获取、修改DOM元素的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
