js之DOM间接操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div>c1</div>
        <div>c2</div>
        <div>c3</div>
        <div>c4</div>
    </div>
    <div>
        <div >bnkjgjguigi
           <div id="i1">
               b1
           </div>
        </div>
    </div>
    <div>
        <div>
            <div>a1</div>
        </div>
    </div>
</body>
<script>
    //获取标签的父级标签
    var tag=document.getElementById('i1');
    //找到父级标签
    var father=tag.parentNode;
    //添加一个class
    father.className='c2';
    //添加一个class
    father.classList.add('c3');
    console.log(father);

    //移除一个class
    // father.classList.remove('c3');
    // console.log(father);

    /*
    //W3C标准
    parentNode          // 父节点
    childNodes          // 所有子节点
    firstChild          // 第一个子节点
    lastChild           // 最后一个子节点
    nextSibling         // 下一个兄弟节点
    previousSibling     // 上一个兄弟节点

    //只支持IE
    parentElement           // 父节点标签元素
    children                // 所有子标签
    firstElementChild       // 第一个子标签元素
    lastElementChild        // 最后一个子标签元素
    nextElementtSibling     // 下一个兄弟标签元素
    previousElementSibling  // 上一个兄弟标签元素
     */
</script>
</html>

  

猜你喜欢

转载自www.cnblogs.com/randomlee/p/9721380.html