Vue 开发的基础，前端的必备

最新推荐文章于 2024-11-06 20:20:40 发布

公诚士

最新推荐文章于 2024-11-06 20:20:40 发布

阅读量246

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_47200160/article/details/129604022

版权

首先

vue 和React 框架应用广泛，封装了 DOM 操作
但是 DOM 操作一直都是前端工程师的基础、必备知识
只会 Vue 而不懂 DOM 操作的前端程序员，不会长久

`DOM` 是哪种数据结构？

这个dom树有一个根节点<html>标签，由这个根，你的每一个<meta>标签，<p>标签，<title>,<h1>等等，以及他们的文本内容，在上面生长，我们可以很轻松的在这颗树上定位到他们的位置！
在这里插入图片描述
DOM 节点的操作：

`DOM` 操作的常用`API`

获取`DOM` 节点

无需查找的元素
不需要查找，就可直接获得的元素/对象有 4个；
（1）根节点对象：document
（2）html元素节点对象：document.documentElement
（3）head元素节点对象：document.head
（4）body元素节点对象：document.body
按节点间关系查找
.
按 HTML 特征查找

document.getElementById("id名") 返回带有指定 ID 的元素。
document.getElementsByTagName("标签名") 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
document.getElementsByClassName("class名" 返回包含带有指定类名的所有元素的节点列表。
document.getElementsByName("name名") 返回类数组对象如果没找到，返回空类数组对象: {length:0}。

4.CSS 选择器查找

var 一个元素对象 = 任意父元素.querySelector("选择器")
var 类数组对象 = 任意父元素.querySelectorAll("选择器");

`attribute` 和 `property` 的区别？

property 是通过 js 的操作样式或者class属性的形式

如:

const pList = document.querySelectorAll('p')
cosnt p = pList[0];

console.log(p.style.width)  // 获取样式
p.style.width = '100px';  // 修改样式

console.log(p.className)  // 获取class
p.className = 'p1'  // 修改class

console.log(p.nodeName)  // 获取节点名称
console.log(p.nodeType)  // 获取节点类型

attribute 是 css 操作

如 :

const pList = document.querySelectorAll('p')
cosnt p = pList[0];

p.getAttribute('name')
p.setAttribute('name','data-demo')  // 修改的标签name属性 值为 data-demo

p.getAttribute('style')
p.setAttribute('style','font-size:30px')  // 修改的标签style属性 值为 font-size:30px