Js进阶31-DOM 操作专题

1. JavaScript 的组成部分:

  • ECMAScript:简称 ES,它是欧洲计算机协会,大概每年的六月中旬定制语法规范。
  • DOM:全称 Document Object Model,即为文档对象类型。
  • BOM:全称 Browser Object Model,即为浏览器对象类型。

2. 节点树

节点即为标签,节点之间的这种关系,我们称之为“节点树”,因为很像一棵大树。

DOM:文档对象类型,可以理解为是整个节点树最外层“根元素”。DOM 其实就是 JS 语言中内置的引用类型 document 对象,DOM 对象经常用来操作节点,也就是标签。比如节点样式、属性、文本等等。

<script type="text/javascript">// DOM:其实就是内置的 document 对象,引用类型数据console.log(document);  // #documentconsole.log(typeof document); // object
</script>

3. DOM 属性

DOM 在 JS 中,是引用类型数据,官方给我们提供了很多属性进行操作 DOM。

  • documentElement:获取节点树的 html 标签
  • head:获取节点树的 head 标签
  • title:获取节点 title 标签的文本
  • body:获取节点树的 body 标签
<script type="text/javascript">// DOM 常用属性// documentElement:获取节点树的 html 标签console.log(document.documentElement); // <html>...</html>// head:获取节点树的 head 标签console.log(document.head); // <head>...</head>// title:获取节点 title 标签的文本console.log(document.title); // 节点树认知// body:获取节点树的 body 标签console.log(document.body); // <body>...</body>
</script>

4. DOM 方法

官方也给我们提供了很多方法用来操作节点树上的标签,返回获取到的节点对象(单个)。

<!DOCTYPE html>
<html lang="en">
<head><meta id="cur" charset="UTF-8"><title>Title</title><style type="text/css">* {margin: 0;padding: 0;}#box {color: red;text-indent: 3em;background-color: cyan;}</style>
</head>
<body><div id="box">我爱你我的祖国</div><ul><li>1</li><li id="me">2</li><li class="green">3</li><li>4</li><li class="green">5</li></ul><input type="checkbox" name="hobby" /> 读书<input type="checkbox" name="hobby" /> 游泳<input type="checkbox" name="hobby" /> 画画
</body>
</html>

(1) getElementById

getElementById 方法是 document 对象的方法,可以通过标签的 Id 属性,在节点树中获取节点。

// getElementById 方法:可以根据 id 获取到节点树上的任意节点。需要给标签添加 id 属性,通过 id 选择器获取
const element = document.getElementById('box');
const eleCur = document.getElementById('cur');
const eleMe = document.getElementById('me');
console.log(element); // <div id="box">...</div>
console.log(eleCur); // <meta id="cur" charset="UTF-8">
console.log(eleMe); // <li id="me">2</li>
console.log(typeof element); // object
  • getElementById 方法可以通过标签 ID 选择器获取对应节点。
  • 一般我们将 script 标签放在程序最底部。
  • 不管节点(标签)在网页中嵌套关系如何复杂,都可以通过这个方法获取。
  • 注意:节点(标签)在 JS 中属于引用类型数据。

(2) getElementsByName

getElementsByName 方法可以根据 name 属性获取到节点树上的节点,返回获取到的所有节点(多个)。

// getElementsByName 方法:可以根据 name 获取到节点树上的任意节点。需要给标签添加 name 属性,通过 name 选择器获取
const eleHobbies = document.getElementsByName('hobby');
console.log(eleHobbies); // NodeList(3) [input, input, input]

这个方法在实际应用中有些限制,它通常用于获取带有 name 属性的表单元素,如 input、button、select 标签等。 

(3) getElementsByTagName

getElementsByTagName 方法可以根据标签名获取到节点树上的节点,返回获取到的所有节点(多个)。

// getElementsByTagName 方法:可以根据标签名获取到节点树上的任意节点。
const eleDivs = document.getElementsByTagName('div');
const eleLis = document.getElementsByTagName('li');
console.log(eleDivs); // HTMLCollection(1) [div#box]
console.log(eleLis); // HTMLCollection(5) [li, li#me, li.green, li, li.green]

(4) getElementsByClassName

getElementsByClassName 方法可以根据类名获取到节点树上的节点,返回获取到的所有节点(多个)。

// getElementsByClassName 方法:可以根据类名获取到节点树上的任意节点,需要给标签添加 class 属性,通过类选择器获取
const eleGreens = document.getElementsByClassName('green');
console.log(eleGreens); // HTMLCollection(2) [li.green, li.green]

(5) querySelector

querySelector 方法可以根据 css 选择器获取到节点树上的节点,返回第一个匹配的节点(单个)。

// querySelector 方法:可以根据 css 选择器获取到节点树上的任意节点
const eleBox = document.querySelector('#box');
const eleLi = document.querySelector('li');
const eleGreen = document.querySelector('.green');
console.log(eleBox); // <div id="box">...</div>
console.log(eleLi); // <li>1</li>
console.log(eleGreen); // <li class="green">3</li>

(6) querySelectorAll

querySelectorAll 方法可以根据 css 选择器获取到节点树上的节点,返回所有匹配的节点(多个)。

// querySelectorAll 方法:可以根据 css 选择器获取到节点树上的任意节点
const eleLisAll = document.querySelectorAll('li');
console.log(eleLisAll); // NodeList(5) [li, li#me, li.green, li, li.green]

上面这些用于获取 DOM 节点的方法可以从任意的父节点调用,而不仅仅是从 document 对象。这意味着我们可以从任何特定的 DOM 元素开始搜索,以获取其子元素或者与之相关的元素。

1 通过 id 获取元素
从任何节点调用 getElementById 并不常见,因为 id 应该是唯一的,所以 document.getElementById 已足够。但理论上,从某个较大的节点开始调用此方法,它仍然会在整个文档范围内查找该 id。

2 通过类名获取一组元素

var elements = parentNode.getElementsByClassName('className');

这里,parentNode 可以是任何 DOM 节点,它将返回该节点下所有具有指定类名的子元素。

3 通过标签名获取一组元素

var elements = parentNode.getElementsByTagName('tagName');

类似地,parentNode 是想要开始搜索的节点,它将返回该节点下所有具有指定标签名的子元素。

4 通过 CSS 选择器获取一个元素

var element = parentNode.querySelector('.className');

在这里,parentNode.querySelector 将返回第一个匹配 CSS 选择器的子元素。

5 通过 CSS 选择器获取一组元素

var elements = parentNode.querySelectorAll('.className');

这将返回 parentNode 下所有匹配 CSS 选择器的子元素。

在使用这些方法时,只要确保 parentNode 是一个有效的 DOM 节点即可。这种方法的优势在于它允许我们更具体地定位搜索范围,从而在大型文档中更有效率地找到需要的元素。

getElementsByName 实际上是一个定义在 document 对象上的方法。这意味着它不能从任意父节点调用,而只能从 document 调用。

例如,document.getElementsByName('nameValue') 是有效的,但如果尝试从非 document 节点调用此方法,则会导致错误。

5. 操作 DOM 节点

我们可以通过 DOM 方法获取到节点树上的任意节点(标签),经常通过点语法来操作节点的属性、文本、样式等。

(1) 操作节点属性

我们可以通过 DOM 方法获取节点,进而操作节点属性。

通过 节点对象.属性名,可以获取节点某一个属性的属性值,当然也可以通过 JS 来动态设置新的属性值。

<div id="box" class="cur">我是祖国的未来</div>
<div><input type="text" id="box1">
</div>
// JS 当中经常通过 DOM 获取节点,经常用来操作节点属性
const div = document.getElementById('box');
const input = document.getElementById('box1');// 获取节点属性值
console.log(div.id); // box
console.log(div.className); // cur
console.log(input.type); // text// 设置节点属性值
div.id = 'memeda';
div.className = 'hahaha';
input.type = 'password';

也可以通过节点对象的 getAttribute 方法和 setAttribute 方法来操作节点属性。

// 获取节点属性
console.log(div.getAttribute('id')); // box
console.log(input.getAttribute('type')); // text// 设置节点属性
div.setAttribute('id', 'memeda');
input.setAttribute('type', 'password');

(2) 操作节点文本

我们可以通过 DOM 对象提供的方法获取对应的节点,我们也可以通过点语法操作节点文本。

节点开始标签和结束标签之间的内容就称为节点的文本。

<p>段落文本</p>

上面的“段落文本”就是 p 标签的文本。

<p id="cur">我最近想学习 web 前端</p>
<p><input type="text" id="container" value="我是默认的文本,需通过 value 属性获取和设置">
</p>

操作节点文本分为两种情况:

  • 操作表单元素文本,需要通过 value 属性进行操作。
// 表单元素:input、select、textarea、button 这些元素
// 表单元素操作文本,需要使用 value 属性
const input = document.getElementById('container');
// 获取文本
console.log(input.value); // 我是默认的文本,需通过 value 属性获取和设置
// 设置文本
input.value = '通过 JS 给表单元素重新设置新的文本';
  • 操作非表单元素,需要通过 innerHTML 属性和 InnerText 属性进行操作。
// 非表单元素:不是 input、select、textarea、button 这些元素,如 div、span、a、img 等
// 非表单元素操作文本,需要使用 innerHTML 属性和 innerText 属性
const p = document.getElementById('cur');
// 获取文本
p.innerHTML = '我最近想学习 <span style="color: red;">web 前端</span>';
p.innerText = '我是中国最帅的帅大哥';
// 设置文本
p.innerHTML = '我是中国最帅的帅大哥';

(3) 操作节点样式

我们可以通过 DOM 方法获取节点,可以操作节点的行内样式。

<p id="box" style="width: 100px; height: 100px; color: red; background-color: cyan">我是大帅哥</p>
// 获取节点
const p = document.getElementById('box');// 获取节点的行内样式
console.log(p.style); // CSSStyleDeclaration {0: "width", 1: "height", 2: "color", 3: "background-color", width: "100px", height: "100px", color: "red", backgroundColor: "cyan", length: 4}
console.log(p.style.width); // 100px
console.log(p.style['color']); // red// 设置节点的行内样式
p.style.width = '200px';
p.style.height = '200px';
p.style['color'] = 'cyan';
p.style.backgroundColor = 'red'; // 驼峰
  • 在 JS 中点语法操作行内样式。
  • 通过 JS 代码,可以获取行内样式(内部样式和外部样式不可以),当然也可以设置行内样式。
  • 节点样式 background-color、font-size 等中间带有横杠的样式,样式名需变为驼峰写法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/610002.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

给自己创建的GPTs添加Action(查天气)

前言 在这篇文章中&#xff0c;我将分享如何利用ChatGPT 4.0辅助论文写作的技巧&#xff0c;并根据网上的资料和最新的研究补充更多好用的咒语技巧。 GPT4的官方售价是每月20美元&#xff0c;很多人并不是天天用GPT&#xff0c;只是偶尔用一下。 如果调用官方的GPT4接口&…

WebGL兼容性检查

引入文件WebGL.js class WebGL {static isWebGLAvailable () {try {const canvas document.createElement(canvas);return !!(window.WebGLRenderingContext && (canvas.getContext(webgl) || canvas.getContext(experimental-webgl)));} catch (e) {return false;}}…

Qt中QGraphicsView总体架构学习

前沿 前段时间学习了下如何在QGraphicsView架构中绘制刻度尺&#xff0c;主要是与OnPainter中进行比较的&#xff0c;那么今天就来详细讲解下我对QGraphicsView框架的认知吧~ 最近一段时间想学习下&#xff0c;如果我有不正确的&#xff0c;欢迎留言探讨哟~ QGraphicsView架…

[软件工具]AI软件离线表格识别工具使用教程图像转excel转表格可复制文字表格导出实时截图识别成表格

【官方框架地址】 https://github.com/PaddlePaddle/PaddleOCR.git 【算法介绍】 PaddleOCR是一个基于PaddlePaddle框架的开源光学字符识别&#xff08;OCR&#xff09;工具库&#xff0c;由百度公司开发。它提供了一套完整的OCR解决方案&#xff0c;包括文字检测、文字识别以…

使用 Apache PDFBox 操作PDF文件

简介 Apache PDFBox库是一个开源的Java工具&#xff0c;专门用于处理PDF文档。它允许用户创建全新的PDF文件&#xff0c;编辑现有的PDF文档&#xff0c;以及从PDF文件中提取内容。此外&#xff0c;Apache PDFBox还提供了一些命令行实用工具。 Apache PDFBox提供了创建、渲染、…

linux环境安装docker

一、Docker是什么? 当我们开发一个应用程序时&#xff0c;通常需要配置和安装各种软件、库和依赖项。而这些环境配置可能会因为不同的操作系统或版本而存在差异&#xff0c;导致应用在不同环境中运行出现问题。 Docker就像是一个集装箱&#xff0c;可以将应用程序及其所有依…

Java EE 博客系统(Servlet版)

文章目录 1. 基本情况2. 准备工作3. 博客列表页4. 博客详情页5. 实现登录6. 强制要求登录7. 显示用户信息8. 退出登录9. 发布博客10. 如果程序出现问题怎么办&#xff1f; 1. 基本情况 这里的博客系统主要是四个界面 博客列表页 显示出当前网站上都有哪些博客博客详情页 点击…

浅析ARMv8体系结构:A64指令集

文章目录 A64指令编码格式加载与存储指令寻址模式变基模式前变基模式后变基模式 PC相对地址模式 伪指令加载与存储指令的变种不同位宽的加载与存储指令多字节内存加载和存储指令基地址偏移量模式前变基模式后变基模式 跳转指令返回指令比较并跳转指令 其它指令内存独占访问指令…

面试题:MySQL误删表数据,如何快速恢复丢失的数据?

相信后端研发的同学在开发过程经常会遇到产品临时修改线上数据的需求&#xff0c;如果手法很稳那么很庆幸可以很快完成任务&#xff0c;很不幸某一天突然手一抖把表里的数据修改错误或者误删了&#xff0c;这个时候你会发现各种问题反馈接踵而来。 如果身边有BDA或者有这方面经…

Kubernetes WebHook 入门 -- 入门案例: apiserver 接入 github

博客原文 文章目录 k8s 集群配置介绍Admission WebhookWebHook 入门实践: github 认证接入web 服务器Dockerfile 镜像制作amd64x86_64构造镜像检验镜像 Makefilewebhook 接入 apiserverwebhook.yamlapiserver 挂载 webconfig在 github 中创建认证 token将 token 添加到 kubecon…

AI绘画:Midjournety的使用体验

今天的时间少&#xff0c;没有给大家做一些教程&#xff0c;就单纯分享使用体验&#xff0c;还不错&#xff0c;体验感很好。 后需如果有需要&#xff0c;我可以出一些教程类的视频。 下面是一组复刻fated的saber的一组提示词&#xff0c;效果相当不错。我后续会分享一些学习经…

ai电话呼叫系统的功能有哪些,能帮到我们什么?呼叫系统

人工智能产品的研发&#xff0c;是为了帮助企业更好的生存&#xff0c;更好的利润放大&#xff0c;而不是用于不正规的工作&#xff0c;现在的电话呼叫中心软件让企业员工从简单重复的工作中得以解放&#xff0c;那电话呼叫系统的强大功能有哪些&#xff1f; 知识自学习&#x…

目标检测-One Stage-YOLOx

文章目录 前言一、YOLOx的网络结构和流程1.YOLOx的不同版本2.Yolox-Darknet53YOLOv3 baselineYolox-Darknet53 3.Yolox-s/Yolox-m/Yolox-l/Yolox-x4.Yolox-Nano/Yolox-Tiny 二、YOLOx的创新点总结 前言 根据前文CenterNet、YOLOv4等可以看出学界和工业界都在积极探索使用各种t…

【Proteus仿真】【Arduino单片机】汽车车窗除霜系统设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用LCD1602显示模块、光线传感器、DS18B20温度传感器、PCF8691 ADC模块、继电器加热模块等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD…

Linux系统与windows系统设置定时任务的具体操作方法,如数据库自动备份等

设置定时备份 要设置数据库定时备份&#xff0c;你可以使用操作系统的定时任务功能来自动执行 backup.sh 脚本(此脚本可关注文末公众号回复04获取)。不同的操作系统有不同的方法来设置定时任务&#xff0c;但一般来说&#xff0c;你可以按照以下步骤进行操作&#xff1a; 打开…

python_selenium零基础爬虫学习案例_知网文献信息

案例最终效果说明&#xff1a; 去做这个案例的话是因为看到那个博主的分享&#xff0c;最后通过努力&#xff0c;我基本实现了进行主题、关键词、更新时间的三个筛选条件去获取数据&#xff0c;并且遍历数据将其导出到一个CSV文件中&#xff0c;代码是很简单的&#xff0c;没有…

vue computed计算不到数组或者对象的变化

form: {...childQuestionItems:[...{...score: 6}] } ... computed: {totalScore(){return this.form.childQuestionItems.reduce((sum,e)> sum Number(e.score || 0), 0)} } 想要computed 监听计算form.childQuestionItems改变后所有score的和 但是 computed并不监听。…

.NET Framework 与 .NET Core 与 .NET Standard 之间的差异

介绍 在本文中&#xff0c;我们将探讨 .NET Framework、.NET Core 和 .NET Standard 之间的差异。 .NET Framework 与 .NET Core .NET框架.NET核心 历史 .NET Framework 是 .NET 的第一个实现。 .NET Core 是 .NET 的最新实现。 开源 .NET Framework 的某些组件是开源的。 .N…

程序员该怎样爱护眼镜

当程序员是非常费眼睛的&#xff0c;一天中我们长期盯着电脑&#xff0c;眼镜会感到酸痛&#xff0c;所以我们大家要学会放松眼镜&#xff0c;下面是一些方法&#xff0c;大家来跟着动起来吧&#xff01; 1.修改编程软件字体大小 我们可以根据个人喜好将字体大小调成自己觉得…

Linux和windows进程同步与线程同步那些事儿(二): windows线程同步详解示例

《Linux和windows进程同步与线程同步那些事儿&#xff08;一&#xff09;》 一、线程同步 1.1 windows下线程同步 在Windows中&#xff0c;线程同步可以通过多种机制来实现&#xff0c;其中最常见的包括互斥量&#xff08;mutex&#xff09;、事件&#xff08;event&#xf…