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

简介: JS中访问节点和创建节点的方法都有什么?

在JavaScript中,访问节点和创建节点的方法非常丰富。以下是对这两种操作的详细方法归纳:

访问节点的方法

  1. 通过ID访问
  • getElementById(id):通过元素的ID属性获取对应的DOM节点。
  1. 通过类名访问
  • getElementsByClassName(className):通过元素的class属性获取所有具有相同类名的DOM节点,返回一个HTMLCollection对象。
  1. 通过标签名访问
  • getElementsByTagName(tagName):通过元素的标签名获取所有具有相同标签名的DOM节点,返回一个HTMLCollection对象。

通过CSS选择器访问

  • querySelector(selector):通过CSS选择器选择一个满足条件的DOM节点,返回第一个匹配的元素。
  • querySelectorAll(selector):通过CSS选择器选择所有满足条件的DOM节点,返回一个NodeList对象。
  1. 通过节点关系访问
  • parentNode:返回当前节点的父节点。
  • childNodes:返回当前节点的所有子节点的节点列表(一个NodeList对象)。
  • firstChild:返回当前节点的首个子节点。
  • lastChild:返回当前节点的最后一个子节点。
  • nextSibling:返回当前节点之后相邻的同级节点。
  • previousSibling:返回当前节点之前相邻的同级节点。

创建节点的方法

  1. 创建元素节点
  • createElement(tagName):创建一个新的HTML元素节点。例如,document.createElement("div")会创建一个新的<div>元素。
  1. 创建文本节点
  • createTextNode(text):创建一个包含文本内容的文本节点。这个文本节点可以被添加到元素节点中作为其内容。
  1. 创建属性节点(虽然参考文章中未直接提及,但这也是一种常见的节点类型):
  • 可以通过setAttribute()方法为元素节点添加属性,但这不是直接创建属性节点的方法。如果需要单独操作属性节点,通常是通过元素的attributes属性进行访问和修改。
  1. 将新节点添加到DOM中
  • 一旦创建了新的节点,可以使用appendChild()insertBefore()replaceChild()等方法将其添加到现有的DOM结构中。

以上就是在JavaScript中访问节点和创建节点的主要方法。通过这些方法,可以方便地操作DOM树,实现动态的网页内容更新和交互效果。

相关文章
|
6天前
|
JavaScript API
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
js【最佳实践】遍历数组的八种方法(含数组遍历 API 的对比)for,forEach,for of,map,filter,reduce,every,some
21 1
|
8天前
|
JavaScript 前端开发
JavaScript中exec()方法详解
在这个示例中,exec()方法会找到两个匹配项,并打印出它们在字符串中的位置。
7 1
|
7天前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
|
7天前
|
JavaScript
JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
|
7天前
|
JavaScript
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
Js,定义数组的方法,let 数组名 = [数据1,数据2,........,数据n],取值方法,数组名[x],arr[0],let sum sum = sum + arr[0],求和的写法,平均值
|
8天前
|
JavaScript
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
13 0
|
8天前
|
JavaScript
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
10 0
|
9月前
|
前端开发 JavaScript
探索JavaScript元素节点的属性和方法
探索JavaScript元素节点的属性和方法
21 0
|
2月前
|
前端开发 JavaScript
探索JavaScript元素节点的属性和方法
探索JavaScript元素节点的属性和方法
17 0
|
JavaScript 前端开发
前端祖传三件套JavaScript的DOM之节点层次、类型、属性
随着互联网的不断发展,前端技术也在不断地更新迭代。但是,无论怎么更新变化,JavaScript、DOM、CSS 三件套的重要性始终不可替代。其中,JavaScript 的作用尤为关键。本文将聚焦于 JavaScript 中的 DOM,讨论节点层次、类型和属性等概念。
124 0