zoukankan      html  css  js  c++  java
  • 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>

      

  • 相关阅读:
    关于TileBrush中Viewbox,Viewport以及Stretch,AlignmentX/Y的详细研究
    ListBox数据绑定无效
    WPF---Effect效果
    wpf 画刷的分类
    LinearGradientBrush,RadialGradientBrush的样式说明
    改变ListBoxItem选中的颜色
    自定义的 ListBoxItem 自适应ListBox的宽度
    WPF ListBox数据绑定
    ItemsPanelTemplate的用法
    svn报错Item is not readable svn解决方案
  • 原文地址:https://www.cnblogs.com/randomlee/p/9721164.html
Copyright © 2011-2022 走看看