关于javascript把元素赋值给变量的问题——DOM里元素的独一无二

最新推荐文章于 2022-10-03 10:13:53 发布

进击的火锅少女

最新推荐文章于 2022-10-03 10:13:53 发布

阅读量1.2k

点赞数 1

分类专栏：前端学习笔记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/acmit_yfr/article/details/106399927

版权

前端学习笔记专栏收录该内容

9 篇文章

订阅专栏

这篇博客探讨了在JavaScript中，通过DOM操作HTML元素时遇到的问题。作者指出，与C++不同，JS中对DOM元素的赋值实际上是引用而非复制。当多个变量指向同一个DOM元素时，更改其中一个会影响所有变量所指的元素。这一特性在处理HTML集合如HTMLCollection时显得尤为重要，特别是在排序和重新插入元素到DOM时。总结中强调，在JS的DOM操作中，理解元素的独一无二性和引用赋值的概念至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

这个问题困扰了我超级久，因为写c++好几年了所以学js情不自禁拿他和c++类比学习，真的难受==所以为什么要拿脚本语言和编程语言对比，可能我对c++爱的深沉，我想如果让我写一篇c++和js有什么区别我一定能侃侃而谈
对于js的学习路线：先看视频入门——>再看文档深入——>做大纲图+对难点做笔记看视频确实费时间，但是直观，跟着写写代码再看文档深入就比较容易。接下来react，mobx,redux的学习我大概都是这个路线。

关于js

最近学js，总得理解通过DOM操控html元素，通过BOM和浏览器打交道。
这两个其实简单来说就是用已经实现的document这个对象的各种属性和方法对html元素做一系列操作
window这个全局对象已经实现的属性方法提供一些帮助

在学习DOM的时候，网上一个demo真的让我钻了好几天牛角尖，实际上写在这里的也是我浅显的理解，不一定对。当然我觉得他是对的，我就打算这么理解，直到有更好的理解出现。

描述问题

let lis=document.getElementsByTagName("li");//应该hTMLCollection
let btn=document.getElementById("mybtn");
let arr=[];
btn.onclick=function(){
   for(let i=0;i<lis.length;i++){
      arr[i]=lis[i];
      arr[i].innerHTML+="   三国  ";
   }
}

简单描述一下用lis这个对象获取了所有的li标签，这些东西装在HTMLCollection这个结构里，不是数组，有点类似数组。
现在要对他们排序，第一步是先把他们放在数组里，用数组已经实现的sort方法去排序，然后再用appendChild这个方法把他们放回自己的父节点里也就是ul。这就需要数组里装的这些就是我们的li标签。我当时自己实现用的push，一个空数组里push进去元素，肯定还是这些元素。
其实在c++里，不论你是push还是赋值这些都是生成了新的变量（值相同，开辟另一块内存），所以他们只有值还有关系，这个时候改这个另一个不会动，包括值传递参数，这些都是隐式的（进行赋值，新的变量，进去）
其实js里的编程思想也是一样的，经过代码测试，正常的情况下同c++，你改你的，不会动我的，比如

 let a=[10,12,14];
 let b=[];
 for(let i=0;i<3;i++) {
     b.push(a[i]);
 }
 b[0]=100;
 console.log(a);
 console.log(b);

结果

10 12 14
100 12 14

这两个互不相干！这真的很自然！！！但是DOM不是这样的，因为html元素很重要，独一无二。一个是赋值一个是引用！这是最大的区别
拿最开始的代码来说

let lis=document.getElementsByTagName("li");//应该hTMLCollection
let btn=document.getElementById("mybtn");
let arr=[];
btn.onclick=function(){
   for(let i=0;i<lis.length;i++){
      arr[i]=lis[i];
      arr[i].innerHTML+="   三国  ";
   }
}

结果：所有的li真的加上了三国这两个字

这个地方装的是元素，所以给变量赋值，其实就是多个变量都装着这个元素。在dom里装元素的变量是真的容器，一定要理解！所以多几个容器装，还都这个东西，通过哪个变量操控这个元素，都还是这个元素。所以改他的innerHTML确实变了！这就是DOM！！！

总结

这个和平时的编程思维真的容易混（可能我已经太定式了）。总之正常写js我们该怎么写怎么写，和c++其实还是有很多相似之处的，起码这些编程思维是一样的，赋值就是赋值，我们值一样，但是不同的变量，各走各的
但是在DOM里一定记住元素的独一无二，这个时候用变量去装元素，就是容器，多少个装也只有这个元素，所以改变就是牵一发而动全身，分角度去看！