📝前端原生和主流框架是如何dom的📝

前言

随着互联网技术的发展，前端技术也在不断地发展和更新。DOM（Document Object Model）是前端开发中非常重要的一个概念 ，可以理解为网页上的所有元素都是DOM节点，通过操作这些节点，可以实现网页的动态效果 和交互功能。本文将介绍JavaScript操作DOM、jQuery操作DOM、Vue操作DOM、React操作DOM、Uniapp操作DOM的区别。

一、JavaScript操作DOM

JavaScript是前端开发中最基础的语言 ，也是操作DOM最原始的方式。通过JavaScript可以获取和修改DOM节点的属性和内容，实现网页的动态效果 和交互功能。JavaScript操作DOM的主要方法有以下几种：

document.getElementById()：通过元素的id属性获取DOM节点。
document.getElementsByTagName()：通过元素的标签名获取DOM节点。
document.getElementsByClassName()：通过元素的class属性获取DOM节点。
document.createElement()：创建一个新的DOM节点。
element.appendChild()：将一个DOM节点添加到另一个DOM节点的子节点列表中。
element.removeChild()：从一个DOM节点的子节点列表中删除一个子节点。

javascript 复制代码

// 选择元素并修改内容
document.getElementById("myElement").innerHTML = "Hello, JavaScript!";

// 创建新元素并添加到文档中
var newElement = document.createElement("div");
newElement.textContent = "This is a new element";
document.body.appendChild(newElement);

// 添加事件监听器
document.getElementById("myButton").addEventListener("click", function() {
  alert("Button clicked!");
});

二、jQuery操作DOM

jQuery是一个非常流行的JavaScript库，它封装了许多常用的DOM操作方法，使得操作DOM更加简单和方便。jQuery操作DOM的主要方法有以下几种：

$(selector)：通过选择器获取DOM节点。
$(selector).html()：获取或设置DOM节点的HTML内容。
$(selector).text()：获取或设置DOM节点的文本内容。
$(selector).attr()：获取或设置DOM节点的属性值。
$(selector).addClass()：给DOM节点添加一个或多个类。
$(selector).removeClass()：从DOM节点中删除一个或多个类。

javascript 复制代码

// 选择元素并修改内容
$("#myElement").html("Hello, jQuery!");

// 创建新元素并添加到文档中
var newElement = $("<div>").text("This is a new element");
$("body").append(newElement);

// 添加事件监听器
$("#myButton").on("click", function() {
  alert("Button clicked!");
});

三、Vue操作DOM

Vue是一种流行的JavaScript框架，它提供了一种声明式 的方式来操作DOM。Vue操作DOM的主要方式是通过模板语法来描述DOM结构和数据绑定关系。Vue的模板语法类似于HTML，但是可以包含JavaScript表达式和指令，可以实现动态的DOM操作。Vue操作DOM的主要方式有以下几种：

{{ expression }}：在DOM中插入JavaScript表达式的结果。
v-bind:attribute="expression"：动态地绑定DOM节点的属性值。
v-if="expression"：根据表达式的值来插入或移除DOM节点。
v-for="item in list"：根据列表数据生成DOM节点。
v-on:event="handler"：绑定DOM事件处理函数。

javascript 复制代码

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue!"
    };
  },
  methods: {
    handleClick() {
      alert("Button clicked!");
    }
  }
};
</script>

四、React操作DOM

React是另一种流行的JavaScript框架，它提供了一种组件化的方式来操作DOM。React将DOM视为一组组件，每个组件都有自己的状态和属性，可以通过组合和嵌套来构建复杂的DOM结构。React操作DOM的主要方式是通过JSX语法来描述DOM结构和数据绑定关系。JSX语法类似于HTML，但是可以包含JavaScript表达式和组件，可以实现动态的DOM操作。React操作DOM的主要方式有以下几种：

{expression}：在DOM中插入JavaScript表达式的结果。
Component attribute={expression} ：动态地绑定DOM节点的属性值。
{condition ? trueNode : falseNode}：根据条件来插入或移除DOM节点。
{list.map(item => <Component key={item.id} {...item} />)}：根据列表数据生成DOM节点。
Component onClick={handler} ：绑定DOM事件处理函数。

javascript 复制代码

jsx
import React from "react";

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Hello, React!"
    };
  }

  handleClick() {
    alert("Button clicked!");
  }

  render() {
    return (
      <div>
        <p>{this.state.message}</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

export default MyComponent;

五、Uniapp操作DOM

Uniapp是一种跨平台的移动应用开发框架，它支持多种前端框架，包括Vue和React。Uniapp操作DOM的方式与Vue和React类似，主要是通过模板或JSX语法来描述DOM结构和数据绑定关系。Uniapp操作DOM的主要方式有以下几种：

{{ expression }}：在DOM中插入JavaScript表达式的结果。
:attribute="expression"：动态地绑定DOM节点的属性值。
v-if="expression"：根据表达式的值来插入或移除DOM节点。
v-for="item in list"：根据列表数据生成DOM节点。
@event="handler"：绑定DOM事件处理函数。

javascript 复制代码

<template>
  <view>
    <text>{{ message }}</text>
    <button @click="handleClick">Click me</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Uniapp!"
    };
  },
  methods: {
    handleClick() {
      uni.showToast({
        title: "Button clicked!",
        icon: "none"
      });
    }
  }
};
</script>

总结

以上就是JavaScript操作DOM、jQuery操作DOM、Vue操作DOM、React操作DOM、Uniapp操作DOM的区别。

JavaScript是最原始的操作DOM的方式，

jQuery封装了常用的DOM操作方法，

Vue和React提供了声明式和组件化的方式来操作DOM，

Uniapp支持多种前端框架，可以快速开发跨平台的移动应用，

不同的操作DOM方式有各自的优缺点。