js之DOM直接操作

最新推荐文章于 2024-04-30 23:33:01 发布

weixin_30906671

最新推荐文章于 2024-04-30 23:33:01 发布

阅读量58

点赞数

原文链接：http://www.cnblogs.com/randomlee/p/9721164.html

版权

<!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>

转载于:https://www.cnblogs.com/randomlee/p/9721164.html

weixin_30906671

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js之DOM直接操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="i1" >helloworld&l...
复制链接

扫一扫