js之DOM直接操作
<!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" style="color: wheat">这是一个带颜色的标签</a>
<a class="body" style="color: green">这是一个绿色的标签</a>
<span name="randomlee">sfnsdkvsdji</span>
<span name="randomlee">2345346456</span>
</body>
<script>
//获取单个便签 根据id
var tag=document.getElementById('i1')
//获取标签的文本内容
var content=tag.innerText
console.log(content)
//赋值操作
document.getElementById('i1').innerText="重新赋值"
</script>
<script>
//获取多个标签 根据标签名称
var tags=document.getElementsByTagName('div')
//获取到的内容是一个标签的列表
//通过for循环取出内容
for (var i=0 ;i < tags.length;i++){
console.log(tags[i].innerText)
//赋值操作
tags[i].innerText="leebaba"
}
</script>
<script>
//获取多个标签 根据classname
var tags=document.getElementsByClassName('body')
for (var i = 0 ;i < tags.length;i ++){
console.log(tags[i].innerText)
//修改标签
tags[i].style.color="red"
}
</script>
<script>
//获取多个标签 根据自定义属性name
var tags=document.getElementsByName('randomlee')
for (var i = 0 ;i<tags.length;i++){
console.log(tags[i].innerText)
//修改标签
tags[i].style.backgroundColor='yellow'
}
/*
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 /*
</script> </html>
