js之DOM直接操作
生活随笔
收集整理的這篇文章主要介紹了
js之DOM直接操作
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1" >helloworld</div>
<div >random_lee</div>
<a class="body">這是一個帶顏色的標(biāo)簽</a>
<a class="body">這是一個綠色的標(biāo)簽</a>
<span name="randomlee">sfnsdkvsdji</span>
<span name="randomlee">2345346456</span>
</body>
<script>
//獲取單個便簽 根據(jù)id
var tag=document.getElementById('i1')
//獲取標(biāo)簽的文本內(nèi)容
var content=tag.innerText
console.log(content)
//賦值操作
document.getElementById('i1').innerText="重新賦值"
</script>
<script>
//獲取多個標(biāo)簽 根據(jù)標(biāo)簽名稱
var tags=document.getElementsByTagName('div')
//獲取到的內(nèi)容是一個標(biāo)簽的列表
//通過for循環(huán)取出內(nèi)容
for (var i=0 ;i < tags.length;i++){
console.log(tags[i].innerText)
//賦值操作
tags[i].innerText="leebaba"
}
</script>
<script>
//獲取多個標(biāo)簽 根據(jù)classname
var tags=document.getElementsByClassName('body')
for (var i = 0 ;i < tags.length;i ++){
console.log(tags[i].innerText)
//修改標(biāo)簽
tags[i].style.color="red"
}
</script>
<script>
//獲取多個標(biāo)簽 根據(jù)自定義屬性name
var tags=document.getElementsByName('randomlee')
for (var i = 0 ;i<tags.length;i++){
console.log(tags[i].innerText)
//修改標(biāo)簽
tags[i].style.backgroundColor='yellow'
}
/*
document.getElementById 根據(jù)ID獲取一個標(biāo)簽
document.getElementsByName 根據(jù)name屬性獲取標(biāo)簽集合
document.getElementsByClassName 根據(jù)class屬性獲取標(biāo)簽集合
document.getElementsByTagName 根據(jù)標(biāo)簽名獲取標(biāo)簽集合
/*
</script> </html>
總結(jié)
以上是生活随笔為你收集整理的js之DOM直接操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2023 年微软商城最佳应用榜单出炉：火
- 下一篇： 苹果耳机a1602是国行么(苹果官网报价