js入门获取其他元素的其他方法1 判断语句

最新推荐文章于 2023-12-10 20:05:23 发布

你有礼貌吗

最新推荐文章于 2023-12-10 20:05:23 发布

阅读量251

点赞数

文章标签： web前端 html css JavaScript js入门

本文链接：https://blog.csdn.net/weixin_44343557/article/details/98887502

版权

  <div id="box"></div>
    <div class="demo">123</div>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul> 
    <script>
    var box = document.getElementById('box'); //通过ID查找
    //通过标签名class查找ClassName  有兼容性问题 ie8及以下 不兼容
    var demo = document.getElementsByClassName('demo');
     //找到的是一个标签内容集合[]
     console.log(demo[0].innerHTML);  //HTMLCollection(2) 数组
    var list = document.getElementsByClassName('list')
    // 查找标签名 TagName
    var uli = list.getElementsByTagName('li');
    console.log(uli)
    // 其他方法
    var Demo = document.querySelector('#box');
    var Box = document.querySelector('.demo') //文档里面的第一个元素
    var ele = document.querySelector('li')

    var demos = document.querySelectorAll('#box') 
    //不管内容多少 找到的都是一个集合 nodelist
    var boxs = document.querySelectorAll('.demo');
    </script>

下面是用获取其他元素的方法实现li标签切换

<style>
    *{margin: 0; padding: 0; list-style: none;}
    div{width: 300px;border: 1px solid;margin: 0 auto; }
    ul{width: 300px;height: 100px;}
    ul li {float: left; width: 100px; height: 50px;text-align: center;
    line-height: 50px;border: none;}
    .aaa{border-bottom: 1px solid salmon}
    div p{display: none;}
    .bbb{display: block;}
 </style>
<div id="box">
    <ul id="oul">
        <li class="aaa">首页</li>
        <li>关于我们</li>
        <li>offcn</li>
    </ul>
    <p class="bbb">首页</p>
    <p>关于我们</p>
    <p>offcn</p>
</div>
<script>
var oul = document.getElementById('oul');
var oli = oul.getElementsByTagName('li');
var box = document.getElementById('box');
var op = box.getElementsByTagName('p');
oli[0].onclick = function(){
    oli[0].className = 'aaa';
    oli[1].className = '';
    oli[2].className = '';
    op[0].className = 'bbb';
    op[1].className = '';
    op[2].className = ''; 
}
oli[1].onclick = function(){
    oli[0].className = '';
    oli[1].className = 'aaa';
    oli[2].className = '';
    op[0].className = '';
    op[1].className = 'bbb';
    op[2].className = ''; 
}
oli[2].onclick = function(){
    oli[0].className = '';
    oli[1].className = '';
    oli[2].className = 'aaa';
    op[0].className = '';
    op[1].className = '';
    op[2].className = 'bbb'; 
}
</script>