DOM节点操作

最新推荐文章于 2021-08-31 14:55:16 发布
最新推荐文章于 2021-08-31 14:55:16 发布
阅读量601 收藏 7
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41340792/article/details/112394075
版权

DOM

概念

dom:docment object model 文档对象模型
DOM 都是由节点组成的
节点可以分为三大类：
元素节点 html标签
文本节点 标签中的文字（空格，换行）
属性节点 标签的属性
在这里插入图片描述

学习dom，就是学习对节点的操作
修改：修改DOM节点的内容。
遍历：遍历DOM节点下的子节点，方便下一步操作。
添加：在DOM节点下添加一个子节点。
删除：将该节点从HTML中删除。也相当于删除了它包含的所有内容以及所有子节点。

DOM可以做什么：
1.找对象（元素节点）
2.设置元素节点的属性值、
3。动态删除和创建节点。
4.事件的响应触发

获取节点方法

<body>
    <h1 id="title1">我是1级标题</h1>
    <h2 class="title2">我是2级标题</h2>
    <h3>我是3级标题</h3>
    <div class="box1 title2" id="box">我是div容器
        <p name="pp">我是p段落</p>
    </div>
</body>

1.getElementById

格式：node.getElementById(“ID”)，
功能：从node节点开始，通过ID查找节点。返回对拥有指定id的第一个对象的引用

<script>
        window.onload = function() {
        	//通过id获取元素节点
            var tmp = document.getElementById("title1");
        }
    </script>

在这里插入图片描述

2.getElementsByTagName

通过标签名查找节点，返回带有指定名称的对象的伪数组（集合）要获取指定类名对象通过下标获取
格式：node.getElementsByTagName(“标签名”);

window.onload = function() {
            var tmp1 = document.getElementsByTagName("div")[0];
            console.log(tmp1);
        }

在这里插入图片描述
【注意】getElementsByTagName/getElementsByClassName 获取到的是元素节点，元素节点中没有getElementById方法
document对象中是可以使用getElementById的。

 window.onload = function() {
            var tmp1 = document.getElementsByTagName("div")[0];
            var tmp2 = tmp1.getElementsByTagName("p");
            console.log(tmp3);
        }

在这里插入图片描述

3.getElementsByClassName

通过类名去查找节点，返回带有指定类名的对象的伪数组（集合）要获取指定类名对象通过下标获取
格式：node.getElementsByClassName(“类名”);

window.onload = function() {
            var tmp3 = document.getElementsByClassName("title2")[0];
            console.log(tmp3);
        }

在这里插入图片描述

4.getElementsByName()

通过name属性值去获取节点，返回带有指定属性名的对象的伪数组（集合）要获取指定类名对象通过下标获取
最常用在 表单元素中。
低版本的IE不支持。

5.querySelector()

格式：node.querySelector(css选择器)
返回值：
如果找到选择器匹配的元素，则返回第一个元素。
如果没找到，则返回null

<script>
        window.onload = function() {
            var bBox = document.querySelector(".box");
            var bBox = document.querySelector(".name");
            console.log(bBox);

        }
    </script>

在这里插入图片描述

6.querySelectorAll()

格式：node.querySelector(css选择器)
返回值：
如果找到选择器匹配的元素，则返回全部。
如果没找到，则返回null

<script>
        window.onload = function() {
            var bBox1 = document.querySelectorAll(".box");
            console.log(bBox1);

        }
    </script>

在这里插入图片描述
nodelist 伪数组 常规的数组方法对伪数组是无效的 length 【下标】
node 表示传入的节点，获取该节点的元素节点。

操作元素节点的属性

标签上的属性分类：
1.原生属性
2.自定义属性
3.H5 自定义属性

1.原生属性

语法：元素.属性名
修改/新增：
元素.属性名 = “值”

		window.onload = function() {
            var arr = document.getElementById("box");
            arr.id = "box2";            
            console.log(arr);
        }

在这里插入图片描述

获取：
元素.属性名

		window.onload = function() {
            var arr = document.getElementById("box");
            console.log(arr);
        }

在这里插入图片描述

【注意】class属性是例外，不能直接通过属性名获取，而是用className
删除

		window.onload = function() {
            var arr = document.getElementById("box");
            arr.removeAttribute("id");
            console.log(arr);
        }

在这里插入图片描述

2.自定义属性

不能直接使用 元素. 这个语法来获取。
三个方法去操作：

获取 getAttribute("属性名");

返回值：字符串

		<body>
   			 <img src="img/1.jpg" alt="" class="desc">
		</body>
		<script>
        window.onload = function() {
            var arr1 = document.getElementsByClassName("desc")[0];
            var a = arr1.getAttribute("src");
            console.log(a);
        }
    </script>

在这里插入图片描述

设置 setAttribute("属性名","属性值");
		<body>
   			 <img src="img/1.jpg" alt="" class="desc">
		</body>
		<script>
        window.onload = function() {
            var arr1 = document.getElementsByClassName("desc")[0];
            var a = arr1.setAttribute("name", "index");
            console.log(a);
        }
    </script>

在这里插入图片描述
删除
removeAttribute(“属性名”)

		window.onload = function() {
            var arr1 = document.getElementsByClassName("desc")[0];
             arr1.className += " info"
            console.log(arr.className);
        }

在这里插入图片描述

【注意】这三个方法也可以操作原生属性

3.H5 自定义属性dataSet

每一个元素节点上都有一个属性：dataSet
里面包含了所有的H5自定义属性。
键值对结构： 例子;data-id =“idBox”
key：data-XXX xxx的内容。
value:属性值
获取：
元素.dataset.key

		window.onload = function() {
            var arr = document.getElementsByTagName("div")[0];
            console.log(arr.dataset.b);
        }

设置：
元素.dataset.key = “值”

		window.onload = function() {
            var arr = document.getElementsByTagName("div")[0];
            arr.dataset.b = "bb";
            console.log(arr);
        }

在这里插入图片描述

<body>
    <div></div>
    <script>
        var box = document.querySelector("div");
        box.dataset.index = "aa"
        console.log(box);
    </script>
</body>

在这里插入图片描述

删除
delete 元素.dataset.key

		window.onload = function() {
            var arr = document.getElementsByTagName("div")[0];
            delete arr.dataset.b;
            console.log(arr);
        }

在这里插入图片描述

操作元素的类名

1.按照原生属性的方式来操作

     获取：
         元素.className

	<body>
	    <div class="box">我是第1个div标签</div>
	</body>
	<script>
        window.onload = function() {
            var box = document.getElementsByClassName("box")[0];
            console.log(box.className);

        }
    </script>

在这里插入图片描述

     设置：

元素.className = “值”

	<body>
	    <div class="box">我是第1个div标签</div>
	</body>
	<script>
        window.onload = function() {
            var box = document.getElementsByClassName("box")[0];
             box.className = "aa"
            console.log(box);

        }
    </script>

在这里插入图片描述

追加：
元素.className += " 值";

	<body>
	    <div class="box">我是第1个div标签</div>
	</body>
	<script>
        window.onload = function() {
            var box = document.getElementsByClassName("box")[0];
            // 添加的新类名前一定要有一个空格
             box.className += " aa"
            console.log(box);

        }
    </script>

在这里插入图片描述

【注意】 追加时，值的前面要加一个空格。
删除：
1.重新设置一遍。
2.
2.1 获取classname属性值、
2.2 按照空格去分割字符串
2.3 遍历数组，将要删除的字符串删除
2.4 数组的join方法

2.H5标准给我们一个API
元素节点都有一个属性叫做：classList
里面包含了所有的class值。
获取：
元素.classList 获取class值的集合。
想要获取单个，使用下标。

	<body>
	    <div class="box">我是第1个div标签</div>
	</body>
	<script>
        window.onload = function() {
            var box = document.getElementsByClassName("box")[0];
            console.log( box.classList);
        }
    </script>

在这里插入图片描述

新增：
元素.classList.add(“新增的类名”)

	<body>
	    <div class="box">我是第1个div标签</div>
	</body>
	<script>
        window.onload = function() {
            var box = document.getElementsByClassName("box")[0];
             box.classList.add("desc");
            console.log(box);
        }
    </script>

在这里插入图片描述

删除：
元素.classList.remove(“删除的类名”)

	<body>
	    <div class="box">我是第1个div标签</div>
	</body>
	<script>
        window.onload = function() {
            var box = document.getElementsByClassName("box")[0];
             box.classList.remove("aa");
            console.log(box);
        }
    </script>

在这里插入图片描述
替换：
元素.classList.replace(“旧类名”,“新类名”) ;

	<body>
	    <div class="box">我是第1个div标签</div>
	</body>
	<script>
        window.onload = function() {
            var box = document.getElementsByClassName("box")[0];
            //第一个参数为要被替换的类名，第二个参数为新类名
            box.classList.replace("aa", "aaaa");
            console.log(box);
        }
    </script>

在这里插入图片描述

toggle() 切换
语法：元素.classList.toggle(类名)
当元素拥有这个类名时，将类名删除

	<body>
	    <div class="box">我是第1个div标签</div>
	</body>
	<script>
        window.onload = function() {
            var box = document.getElementsByClassName("box")[0];
           box.classList.toggle("aa");
            console.log(box);
        }
    </script>

在这里插入图片描述

当元素没有这个类名时，将类名添加

	<body>
	    <div class="box">我是第1个div标签</div>
	</body>
	<script>
        window.onload = function() {
            var box = document.getElementsByClassName("box")[0];
           box.classList.toggle("ccc");
            console.log(box);
        }
    </script>

在这里插入图片描述

操作元素节点中的内容

1.innerHTMl

   获取元素节点中除了本身的标签外，所有的HTML代码。
   获取：
       元素.innerHTML

	<body>
		   <div class="box index aa  bbb">我是第1个div标签</div>
	</body>
	<script>
        window.onload = function() {
            var box = document.getElementsByClassName("box")[0];
            console.log(box.innerHTML);
        }
    </script>

在这里插入图片描述

设置：
元素.innerHTMl = “新的内容”

	<body>
	   <div class="box index aa  bbb">我是第1个div标签</div>
	</body>
	<script>
        window.onload = function() {
            var box = document.getElementsByClassName("box")[0];
            box.innerHTML = "<h1>我是新内容！</h1>";
            console.log(box.innerHTML);
        }
    </script>

在这里插入图片描述
【注意】 innerHTML 会覆盖原有的内容，而且会解析其中的标签。

2.innerText
获取元素节点中的文本内容,会覆盖原有的内容，不会解析内容中的标签。
获取：
元素.innerText
设置：
元素.innerText = “新的内容”;
在这里插入图片描述

3.value
主要使用在表单元素中。
操作表单元素节点的value属性。
获取：
表单元素节点.value

		<body>
		   <input type="text" value="我是input标签！">
		</body>
		<script>
        	window.onload = function() {
           		var inp = document.querySelector("input");
            	console.log(inp.value);
        }
    </script>

设置：
表单元素节点.value = “值”

		<body>
		   <input type="text" value="我是input标签！">
		</body>
		<script>
        	window.onload = function() {
           		var inp = document.querySelector("input");
            	inp.value = "请输入";
        }
    </script>

在这里插入图片描述

操作元素节点的样式

元素节点的样式：
样式：
行内
内嵌
外链
行内样式：
原生属性的方式获取
元素.style.样式的属性名

	<style>
        .box {
            width: 200px;
            height: 200px;
            background-color: coral;
        }
    </style>
    <body>
    <div class="box ">我是第1个div标签</div>
	</body>
    <script>
        window.onload = function() {
            var box = document.getElementsByClassName("box")[0];
        }
    </script>

【注意】如果属性名是多个单词，第二个单词首字母大写，删除中划线。
该方法只能获取行内。
设置样式
语法：元素.style.样式名 = “值”;

	<style>
        .box {
            width: 200px;
            height: 200px;
            background-color: coral;
        }
    </style>
    <body>
    <div class="box ">我是第1个div标签</div>
	</body>
    <script>
        window.onload = function() {
            var box = document.getElementsByClassName("box")[0];
            box.style.backgroundColor = "red";
            box.style.width = "100px";
        }
    </script>

在这里插入图片描述

获取元素的有效样式
标准浏览器：
getComputedStyle(要获取样式的元素)
IE低版本：（IE8以下）
元素.currentStyle.样式属性名 box.currentStyle.width

属性节点

属性节点：
获取元素节点的属性节点
元素.attributes

	<body>
	    <div id=" aa" class="index bb"></div>
	</body>
	 <script>
        window.onload = function() {
            var box = document.getElementsByClassName("bb")[0];
            var item = box.attributes;
            console.log(item);

        }
    </script>

在这里插入图片描述

单个属性节点：
元素.attributes.getNamedItem(“属性名”)；

	<body>
	    <div id=" aa" class="index bb"></div>
	</body>
	 <script>
        window.onload = function() {
            var box = document.getElementsByClassName("bb")[0];
            var item = box.attributes.getNamedItem("class");
            console.log(item);

        }
    </script>

在这里插入图片描述

通过节点关系获取节点

DOM节点不是孤立存在，我们可以通过节点之间的关系去获取他们。
节点的关系，是以属性的方式存在的。

获取父节点。
节点.parentNode

<body>
    <div id="box">
        <div class="index "></div>
        <p class="bbb"></p>
        <div class="aa"></div>
    </div>
</body>
<script>
        window.onload = function() {
            var item = document.querySelector(".index");
            console.log(item.parentNode);

        }
    </script>

在这里插入图片描述

获取兄弟节点
1.下一个节点
node.nextSibling
对于标准浏览器，标签，空文档，换行都属于节点。
IE低版本：指下一个元素节点。

<body>
    <div id="box">
        <div class="index "></div>
        <p class="bbb"></p>
        <div class="aa"></div>
    </div>
</body>
<script>
        window.onload = function() {
            var item = document.querySelector(".index");
            console.log(item.nextSibling);

        }
    </script>

在这里插入图片描述

2.下一个元素节点
node.nextElementSibling

<body>
    <div id="box">
        <div class="index "></div>
        <p class="bbb"></p>
        <div class="aa"></div>
    </div>
</body>
<script>
        window.onload = function() {
            var item = document.querySelector(".index");
            console.log(item.nextElementSibling);

        }
    </script>

在这里插入图片描述

兼容写法：
下一个兄弟节点 = 节点.nextElementSibling||节点.nextSibling

3.上一个节点
node.previousSibling

<body>
    <div id="box">
        <div class="index "></div>
        <p class="bbb"></p>
        <div class="aa"></div>
    </div>
</body>
<script>
        window.onload = function() {
            var item = document.querySelector(".index");
            console.log(item.previousSibling);

        }
    </script>

在这里插入图片描述

4.上一个元素节点
node.previousElementSibling

<body>
    <div id="box">
        <div class="index "></div>
        <p class="bbb"></p>
        <div class="aa"></div>
    </div>
</body>
<script>
        window.onload = function() {
            var item = document.querySelector(".index");
            console.log(item.previousElementSibling);

        }
    </script>

在这里插入图片描述

获取单个子节点
1.第一个子节点
node.firstChild

<body>
    <div id="box">
        <div class="index "></div>
        <p class="bbb"></p>
        <div class="aa"></div>
    </div>
</body>
<script>
        window.onload = function() {
            var item = document.querySelector("#id");
            console.log(item.firstChild);

        }
    </script>

在这里插入图片描述

2.获取第一个元素节点
node.firstElementChild

<body>
    <div id="box">
        <div class="index "></div>
        <p class="bbb"></p>
        <div class="aa"></div>
    </div>
</body>
<script>
        window.onload = function() {
            var item = document.querySelector("#box");
            console.log(item.firstElementChild);

        }
    </script>

在这里插入图片描述

3.获取最后一个子节点
node.lastChild

<body>
    <div id="box">
        <div class="index "></div>
        <p class="bbb"></p>
        <div class="aa"></div>
    </div>
</body>
<script>
        window.onload = function() {
            var item = document.querySelector("#id");
            console.log(item.firstElementChild);

        }
    </script>

在这里插入图片描述

4.获取最后一个元素节点
node.lastElementChild

<body>
    <div id="box">
        <div class="index "></div>
        <p class="bbb"></p>
        <div class="aa"></div>
    </div>
</body>
<script>
        window.onload = function() {
            var item = document.querySelector("#id");
            console.log(item.firstElementChild);

        }
    </script>

在这里插入图片描述

获取所有子节点
1.获取所有子节点
语法：node.childNodes
返回的是子节点的伪数组（元素节点，文本节点，注释节点）

<body>
    <div id="box">
        <div class="index "></div>
        <p class="bbb"></p>
        <div class="aa"></div>
    </div>
</body>
<script>
        window.onload = function() {
            var item = document.querySelector("#id");
            console.log(item.childNodes);

        }
    </script>

在这里插入图片描述

2.获取所有的元素子节点
语法：node.children
返回元素节点。使用最多的方法。

<body>
    <div id="box">
        <div class="index "></div>
        <p class="bbb"></p>
        <div class="aa"></div>
    </div>
</body>
<script>
        window.onload = function() {
            var item = document.querySelector("#id");
            console.log(item.children);

        }
    </script>

在这里插入图片描述

节点的属性
属性：事物的特征
nodeName: 节点名称
注释节点： #comment
文本节点： #text
元素节点： 大写的标签名
属性节点： 属性名

nodeType：节点类型
注释节点：8
文本节点：3
元素节点：1
属性节点：2

nodeValue：节点的值
注释节点：注释内容
文本节点：文本内容
元素节点：null
属性节点：属性值
创建节点
元素节点：document.createElement(“标签名”);
返回值：新的元素节点
创建完成后，需要插入到页面中才能看到

节点操作

创建节点
元素节点：document.createElement(“标签名”);
返回值：新的元素节点
创建完成后，需要插入到页面中才能看到

<body>

</body>
<script>
        window.onload = function() {
            var box = document.createElement("div");
            document.body.appendChild(box)

        }
    </script>

在这里插入图片描述

文本节点
document.createTextNode(内容);

<body>
	<div id="box"></div>
</body>
<script>
        window.onload = function() {
            var box = document.getElementById("box");
            var text = document.createTextNode("我是通过JS添加的内容");
            box.appendChild(text);

        }
    </script>

在这里插入图片描述

插入节点
node.appendChild
在父节点的最后添加一个新的子节点。
node.insertBefore(新节点，参考节点)
在父节点的参考节点前添加一个新的子节点。
如果参考节点为null，则在父节点的最后添加新的子节点

<body>
	<div id="box">
        <p class="aa"></p>
        <div class="index"></div>
    </div>
</body>
<script>
        window.onload = function() {
            var box = document.getElementById("box");
            var index = document.querySelector(".index");
            var add = document.createElement("div");
             var add2 = document.createElement("div");
            box.insertBefore(add, index);
            box.insertBefore(add2, null);

        }
    </script>

在这里插入图片描述

删除节点
父节点.removeChild(子节点);
在父节点中移除该子节点
node.remove();
在父节点中移除自身。

<body>
	<div id="box">
        <p class="aa"></p>
        <div class="index"></div>
    </div>
</body>
<script>
        window.onload = function() {
            var box = document.getElementById("box");
            var index = document.querySelector(".index");
            box.removeChild(index);

        }
    </script>

在这里插入图片描述

替换节点：
用一个节点去替换另外一个节点
父节点.replaceChild(新节点,旧节点);

<body>
	<div id="box">
        <p class="aa"></p>
        <div class="index"></div>
    </div>
</body>
<script>
        window.onload = function() {
            var box = document.getElementById("box");
            var aa = document.querySelector(".aa");
            var add = document.createElement("div");
             box.replaceChild(add, index);


        }
    </script>

在这里插入图片描述

复制节点
node.cloneNode([true]);
复制节点，克隆节点
如果参数为true，则将其所有子节点也克隆。

<body>
	<div id="box">
        <p class="aa">我是p段落</p>
        <div class="index">我是div标签</div>
    </div>
</body>
<script>
        window.onload = function() {
            var box = document.getElementById("box");
            var aa = document.querySelector(".aa");
            var add = index.cloneNode();
            var add2 = index.cloneNode(true);
            box.appendChild(add);
            box.appendChild(add2);


        }
    </script>

在这里插入图片描述

半塘潮汐
关注
专栏目录
html dom节点操作(获取/修改/添加或删除)
09-04
它将网页内容视为一棵由节点组成的树形结构，每个部分都有对应...在实际应用中，DOM节点操作是构建交互式网页和Web应用程序的关键技术之一。通过熟练掌握DOM操作，开发者可以创建更丰富的用户界面和更高效的网页脚本。
虚拟dom和直接操作dom_如何正确地进行dom操作
weixin_26717681的博客
08-25 894
虚拟dom和直接操作domMost of the time, we are using javascript techniques inside angular. we almost forget about the Framework’s features. Let's utilize them. 大多数时候，我们在angular中使用javascript技术。 我们几乎忘记了框架的功能。 让我...
DOM操作
chuzhan6181的博客
07-14 132
更新DOM： 通过innerHTML可以设置或修改节点的文本内容，改变节点内部结构。 p.innerHTML = "ABC" 通过innerText和textContent来设置文本，但无法设置任何HTML标签。两者区别在于innerText不返回隐藏元素的文本，而textCon...
虚拟dom和直接操作dom_DOM操作入门指南
weixin_26738395的博客
08-26 909
虚拟dom和直接操作domDOM Manipulation can make web applications customizable and the data of the webpage can be updated without refreshing the page. By DOM manipulation we can add, change and remove any HTML ...
DOM元素操作
m0_56232007的博客
06-10 1270
01 什么是DOM？ 1、 DOM：document object model 文档对象模型。 DOM是由节点组成的。 2、节点的类型： 元素节点：HTML标签 文本节点：标签中的文字（包含空格和换行。） 属性节点：标签的属性 3、DOM可以做什么？ （1）可以操作HTML元素（增删改查） 增：添加，在一个DOM节点下添加一个子节点，相当于动态新增了一个HTML标签。 删：删除。将一个节点从HTML中删除，相当于删除了该节点的所有内容以及它包含的子节点。 改：改变。改变DOM节点中的内容，包含HTML
为什么要减少DOM操作
silentCoder的博客
03-05 3703
今天，在这学习vue，突然想到一个问题，我jQuery用的这么爽，看到什么元素，想操作dom就直接选中进行变化，好像没什么不方便的啊？那为啥我用的jQuery操作dom的构建页面的方法就这么被淘汰了呢？那就问百度吧。结果基本一面倒的都在说需要减少dom层的操作，原因，就是因为操作dom慢。至于为啥慢，就涉及到浏览器渲染页面。浏览器分为：渲染引擎和js引擎。渲染引擎工作：解析HTML代码，生产DOM...
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】
12-11
总之，理解并熟练掌握DOM节点操作对于任何JavaScript开发者来说都是至关重要的，无论是在简单的页面交互还是复杂的Web应用程序中，这些基本操作都是构建动态用户界面的基础。通过DOM，我们可以实现诸如响应式设计、...
JQuery 选择器、DOM节点操作练习实例
10-19
根据所提供的文件内容，我们可以提炼出关于JQuery选择器、DOM节点操作练习实例的相关知识点，下面详细说明： 一、JQuery选择器基本概念和操作 JQuery选择器是JQuery的核心功能之一，它允许开发者通过特定的表达式...
JS中DOM元素的操作
热门推荐
不想写代码的一天
05-23 4万+
一、DOM元素的获取 1）document.getElementsByClassName ( “class”) 返回集 htmlcollection ,用法和数组一致 说明: class为DOM元素上class属性的值 2）document.getElementById( “id” ) 功能:返回对拥有指定ID的第一个对象的引用 返回值: DOM对象 说明: id为DOM元素上id属性的值 3)...
Vue中直接操作DOM元素操作
web修理工
05-29 1957
传统document 操作 <div id="oid" class="cla"></div> <input type='input' name='age'> <script> var odiv=document.getElementsByTagName('div') //获取div标签的伪数组 var oinput=document.getElementsByName('age') // 获取 name属性伪数组(系统自带也可以人为添加) var o.
高效的使用DOM操作
水痕
06-28 1826
一、DOM操作影响性能的原因 前端性能优化主要是DOM操作的优化，DOM优化的总原则是减少DOM的操作。造成DOM影响性能的主要原因1、DOM的实现和ECMAScipt的实现是分离的，通过Javascript代码调用DOM接口实际上相当两个独立的模块之间的交互。 2、对DOM的操作会影响浏览器的重绘和重排。 增加、删除和修改可见的DOM元素 页面初始化的渲染 移动DOM元素 修改CSS样式，改
直接操作DOM一定比虚拟DOM操作耗时，diff算法，key值，虚拟 DOM的定义
感恩、奋进、自信
03-13 2997
直接操作DOM一定比虚拟DOM操作耗时吗？ 或者一次直接DOM操作一定比一次虚拟DOM操作耗时吗？ 1）虚拟DOM的本质就是一个JS对象，虚拟DOM减少了真实DOM的操作，当修改数据的时候，就是修改虚拟DOM产生全新的虚拟DOM， 新旧虚拟DOM使用diff算法，得到patch(也就是需要修改的部分)，然后将这个patch打到浏览器的DOM上 （减少重绘和回流，从而达到性能优化的目的...
vue3中直接操作dom
qq_18470967的博客
08-31 1万+
注意：本文所使用的vue3版本为3.2.6 在vue2的时候我们操作dom是这样子使用的 <template> <div class="box"> <div ref="drag" class="box_drag">我会被拖动</div> </div> </template> <script> export default { mounted() { console.log(this.$refs.drag
Vue学习笔记（二十）——Vue为什么不推荐直接操作dom
讨厌走开啦
07-10 7473
Vue不推荐开发者直接操作dom（当然这并不表示不能这么做），有以下几个原因： 破坏了代码模块化结构导致代码腐化： 组件原本可以控制哪些dom操作可以对外暴露（即对应methods中的方法），但直接操作dom跳过了这个控制，这会导致不可预料的后果。 例如组件A中有一个输入框，且组件A没有暴露可以删除输入框的方法，此时组件A会认为输入框是必定存在的，可以放心获取输入框的信息，但在其他组件中通过直...
CSS中添加背景图+盒子边框样式
qq_41340792的博客
12-15 5654
background-image *设置图片为背景。* background-image:url("图片路径")； background-size :设置背景图片的大小 属性值：px 单词 单词： 都会让图片等比例缩放。 cover 将盒子铺满背景图，但是不保证图片的完整显示。 contain 将图片完整的显示，不保证铺满盒子。 background-repeat 设置背景图片是否重复以及如何重复，默认为平铺满。 属性值： repeat:平铺 默认值 no-repeat:不平铺 repeat-x
JSON字符串、存储方式
qq_41340792的博客
01-21 5133
json json字符串 json格式的字符串 “abc123truelkgsjhgo” 普通字符串 “hgahgo” html格式字符串 键值对格式 键和值都需要用双引号去包括 ‘“name”:“yasuo”’ json用途： 在网络传输时使用。 比如前后端交互。 不能够传输对象和数组的。 只能通过字符串形式去传输数据。 所以说我们如果要传输对象和数组，我们需要将其转换为字符串。 json格式就是满足对象和数组数据结构的一种字符串 json的使用方法： JSON.parse() 把json格式的字符串
颠覆传统：API重塑HTML DOM节点操作
本文主要探讨了使用API进行HTML DOM节点操作，强调了敏捷开发的重要性，并分享了一种提高JavaScript代码重用性的方法，特别是在前端JS开发中的应用。作者通过学习jQuery来提升自己的技能，并创建了一个名为“无限...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值