操作DOM对象
发布日期:2021-05-14 16:20:49 浏览次数:26 分类:精选文章

本文共 780 字,大约阅读时间需要 2 分钟。

DOM 是网页的树形结构。每个网页都可以看作是一个 DOM 树。操作 DOM 对于开发网页来说是非常重要的技能。

核心操作

操作 DOM 节点包括:

  • 更新:可以通过修改节点属性或内容来实现
  • 遍历:可以使用 querySelectorqueryAll 等方法获取节点列表
  • 删除:可以使用 remove() 方法移除节点
  • 添加:可以使用 appendChildinsertBefore 方法来添加新节点
  • 要操作 DOM 节点,首先要获得对应的节点。下面将介绍几种常用的获取节点方法。

    获取 DOM 节点

  • 通过 getElementsByClassName 获取类名节点

    var p2 = document.getElementsByClassName('p2');

    返回指定类名的所有节点,结果为 HTMLCollect ,可以用数组方式操作。

  • 通过 getElementById 获取 Id 节点

    var p1 = document.getElementById('p1');

    返回唯一的一个拥有指定 id 的节点。

  • 通过 getElementsByTagName 获取标签节点

    var h1 = document.getElementsByTagName('h1');

    返回页面中所有的 h1 标签节点。

  • 获取父节点的子节点

    var father = document.getElementById('father');var children = father.children;

    如果父节点 father 有子节点,可以直接通过 children 获取。也有 father.firstChild 获取第一个子节点,father.lastChild 获取最后一个子节点。

  • 通过以上方法,我们可以方便地获取 DOM 节点,之后可以根据需求进行操作。

    上一篇:更新DOM节点
    下一篇:BOM对象

    发表评论

    最新留言

    逛到本站,mark一下
    [***.202.152.39]2025年05月14日 01时54分11秒