获取ul里面各个li里面的class名分别为a和b的元素，用原生js

每个li里面有两个块级元素，一个类名是a另一个类名是b，我用js怎么去获取动态的时候当前li下面的这两个类名分别去操作，解决不了睡不着

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<ul id="ul">
    <li>
        <span class="a">a</span>
        <span class="b">b</span>
    </li>
    <li>
        <span class="a">a</span>
        <span class="b">b</span>
    </li>
</ul>

<script type="text/javascript">

var oul = document.getElementById('ul'),            //获取到ul
    oli = oul.getElementsByTagName('li');            //获取到所有li

var arr_a = [],                                        //存放所有 .a
    arr_b = [];                                    //存放所有 .b

for (var i = 0; i < oli.length; i++) {
    arr_a.push(oli[i].getElementsByClassName('a')[0]);
    arr_b.push(oli[i].getElementsByClassName('b')[0]);
};

console.log(arr_a)
console.log(arr_b)

</script>
    
</body>
</html>

假设你拿到了li的dom元素对象，那接下来可以这么写

var $a = $li.querySelector('.a');

b也可以以此类推

【热门文章】