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>

  

posted @ 2018-09-28 21:53  random_lee  阅读(371)  评论(0编辑  收藏  举报