js中访问节点和创建节点的方法都有什么?

在JavaScript中,你可以使用一系列方法来访问已存在的DOM节点以及创建新的DOM节点。下面是常用的访问和创建DOM节点的方法:

访问已存在的节点

  1. getElementById(id):通过元素的id属性获取对应的DOM节点。

    var element = document.getElementById('myElement');

  2. getElementsByClassName(className):通过元素的class属性获取所有具有相同类名的DOM节点,返回一个HTMLCollection对象。

    var elements = document.getElementsByClassName('myClass');

  3. getElementsByTagName(tagName):通过元素的标签名获取所有具有相同标签名的DOM节点,返回一个HTMLCollection对象。

    var elements = document.getElementsByTagName('div');

  4. querySelector(selector):通过CSS选择器选择一个满足条件的DOM节点,返回第一个匹配的元素。

    var element = document.querySelector('.myClass');

  5. querySelectorAll(selector):通过CSS选择器选择所有满足条件的DOM节点,返回一个NodeList对象。

    var elements = document.querySelectorAll('div.myClass');

  6. parentNodechildNodes:通过节点的 parentNode 属性可以访问其父节点,通过 childNodes 属性可以访问其子节点列表。

  7. nextSiblingpreviousSibling:通过节点的 nextSibling 属性可以访问下一个兄弟节点,通过 previousSibling 属性可以访问前一个兄弟节点。

创建新的节点

  1. createElement(tagName):创建一个新的HTML元素节点。

    var newElement = document.createElement('div');

  2. createTextNode(text):创建一个包含文本内容的文本节点。

    var textNode = document.createTextNode('Hello, World!');

  3. appendChild(node):将一个已创建的节点作为子节点添加到另一个节点的子节点列表中。

    parentElement.appendChild(newElement);

  4. insertBefore(newNode, referenceNode):将一个已创建的节点插入到另一个节点的子节点列表中的指定位置之前。

    parentElement.insertBefore(newElement, referenceElement);

  5. replaceChild(newNode, oldNode):用一个已创建的节点替换另一个节点的子节点。

    parentElement.replaceChild(newElement, oldElement);

  6. removeChild(node):从父节点中移除指定的子节点。

    parentElement.removeChild(childElement);

这些方法允许你在JavaScript中操作和修改DOM树,以实现动态的网页交互和内容更新。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值