JavaScript节点操作

最新推荐文章于 2023-05-10 18:13:39 发布

原创最新推荐文章于 2023-05-10 18:13:39 发布

· 90 阅读

0 ·

版权

文章标签：

#javascript #html5 #html

这篇博客深入探讨了JavaScript中对DOM节点的各种操作，包括获取父级和子节点、第一个和最后一个子节点、元素节点以及相邻节点的方法。此外，还介绍了如何创建、添加、插入和删除节点，以及使用insertAdjacentElement进行精准定位。对于前端开发者来说，这些都是日常工作中不可或缺的知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript节点操作

   // 父级节点
    var par = li.parentNode
    // 所有儿子节点
    var all_child = li.children

    // 第一个(最后一个子节点)
    var fir = li.firstChild
    var las = li.lastChild

    // 第一个子元素(最后一个)节点
    var fir_element = li.firstElementChild
    var las_element = li.lastElementChild

    // 兄弟节点

    // 返回下一个列表选项的 HTML 内容：
    var bor = li.nextElementSibling
    // 返回上一个列表选项的 HTML 内容：
    var bor = li.previousElementSibling
    // 返回列表项的下一个同胞：
    var bor2 = li.nextSibling
    // 返回列表项的上一个同胞
    var bor2 = li.previousSibling

    // 创建节点

    var news = document.createElement('li')

    //添加节点

    // 添加节点到指定父节点的子节点列表末尾
    node.appendChild(child)

    // 添加节点到指定父节点的子节点列表前面
    node.insertBefore(child, 指定元素)

    // 插入节点

    li.insertAdjacentElement('位置', 元素)
    // beforeBegin: 插入到标签开始前
    // afterBegin: 插入到标签开始标记之后
    // beforeEnd: 插入到标签结束标记前
    // afterEnd: 插入到标签结束标记后

    // 删除节点

    li.parentNode.remove()   // 删除li的父级节点