1. 獲取元素
1.1.? 獲取第一個元素，一個HTMLElement對象，可以修改
?document.querySelector('css選擇器')? ?
1.2. 獲取多個元素，一個HTMLElement對象，不可以修改，得到的是偽數(shù)組
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:偽數(shù)組
console.log(lis)
// document.getElementById() // 不常用
// document.getElementsByTagName() // 不常用
// document.getElementsByClassName() // 不常用
</script>2.?操作元素內(nèi)容
2.1. 元素.innerText? ? ? 只顯示純文本，不解析標簽?
2.2. 元素.innerHTML? ?能顯示純文本，解析標簽
<body>
<div class="box">文字內(nèi)容</div>
<script>
const box = document.querySelector('.box')
// 元素.innerText 顯示純文本，不解析標簽
console.log(box.innerText) //獲取文字內(nèi)容
box.innerText = '我是盒子' //修改文字內(nèi)容
//元素.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對象.屬性名
設(shè)置：DOM對象.屬性名 = 新值
<body>
<!--<input type="text" value="電腦">-->
<input type="checkbox">
<button>點擊</button>
<script>
// 獲取元素
// const uname = document.querySelector("input")
// 獲取表單元素的值用 表單.value
// 設(shè)置表單的值
// 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-"開頭文章來源：http://www.zghlxwxcb.cn/news/detail-605619.html
獲?。涸贒OM對象上以dataset對象方式獲取文章來源地址http://www.zghlxwxcb.cn/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>隨機函數(shù)：
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1) + N)
}到了這里，關(guān)于JavaScript---獲取、修改DOM元素的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
