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

简介: 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树,以实现动态的网页交互和内容更新。

目录
相关文章
|
19天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
21天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
18 0
|
22天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
22天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
19天前
|
JavaScript 前端开发 索引
JavaScript中与字符串相关的方法
JavaScript中与字符串相关的方法
|
1天前
|
JavaScript 前端开发
11.JavaScript 事件的概念以及绑定方法
11.JavaScript 事件的概念以及绑定方法
|
5天前
|
JavaScript 前端开发
js 操作数组的方法
js 操作数组的方法
15 4
|
12天前
|
JavaScript 前端开发
JavaScript Dom方法
JavaScript Dom方法
36 2
|
12天前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
js 垃圾回收机制的方法
|
12天前
|
JavaScript 前端开发
JavaScript中绑定事件的方法
JavaScript中绑定事件的方法