JavaScript - Document文档操作

1. 前言

​​​​​​​

编写网页时,我们需要时刻操作文档进而完成我们想要的效果。这就是通过文档对象模型实现,使用Document对象控制HTML以及样式信息的API

2. Document的树结构

在了解Document文档对象模型之前,我们先了解Dom的树结构

这幅图可以清楚的知道树结构各个部分代表什么

熟悉每个标签之间的关系对于我们阅读函数以及自定义话操作帮助很大

3. 相关操作

3.1 获取对象

• 获取匹配文档中第一个出现<>的标签

Document.querySelector(); 

• 获取匹配文档中对应Id的标签

Document.getElementById(); 

• 获取所有对应类型的标签,以列表的形式返回

Document.getElementsByTagName(); 

3.2 修改

获取对应的标签之后可以对应修改标签中的元素内容

link = document.querySelector(‘a’);

link.textContent = ‘Hello World’; 修改标签中的文本信息

link.href = ‘https://www.www.com’; 修改链接信息

link.value = ‘xxx’; 修改按钮显示值

       

3.3 创建放置新节点

•创建一个新的标签

Document.createElement(‘标签类别’); 

•在某一标签节点之后增加子节点标签

Node.appendChild(); 

•创建一个文本节点

Document.createTextNode(‘文本内容’);

3.4 移动与删除

•将某一标签移动至另一标签处,直接使用appendChild

并不会产生副本,而是将原有标签移到Node的子集处

Node.appendChild(目标标签); 

•创建副本

Node.cloneNode(目标标签);

•删除子标签

Node.removeChild(); 

•删除自身引用的节点

Node.remove(); 将Node删除

或者

Node.parentNode.removeChild(Node);

 删除自己父节点的子节点中自己的标签

4. 操作CSS

常用的有两种方式通过document操控HTML文件中的CSS样式

4.1 直接使用内联样式添加至元素上

Node.style.color = ‘’;Node.style.backgroundColor = ‘’;Node.style.padding = ‘’;Node.style.width = ‘’;

*Javascript中对CSS样式是使用小驼峰命名,CSS中使用’-’分割

4.2 通过类的方式创建

CSS:

<style>.highlight{Color:white;Background-color:black;}</style>

Javascript:

Node.setAttribute(‘class’,’highlight’);

该函数接受两个方法,想再元素上设置的属性,以及对应的值

为Node标签设置名为hightlight的类

5. 一个交互式动态购物车网页

<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Shopping list example</title><style>li {margin-bottom: 10px;}li button {font-size: 12px;margin-left: 20px;color: #666;}</style></head><body><h1>My shopping list</h1><div><label for="item">Enter a new item:</label><input type="text" name="item" id="item"><button onclick="actionTobutton()">Add item</button></div><ul></ul><script>const web_url = document.querySelector('ul');const button_a = document.querySelector('button');const input_a = document.querySelector('input');function actionTobutton() //事件如果处理了,创建在文本之后持续有效{let a = input_a.value;input_a.value = '';const good_list = document.createElement('li');const good_span = document.createElement('span');const good_button = document.createElement('button');good_span.textContent = a;good_button.textContent = 'Delete';good_list.appendChild(good_span);good_list.appendChild(good_button);web_url.appendChild(good_list);good_button.addEventListener('click',()=>{web_url.removeChild(good_list)});Input.focus(); //聚焦在什么标签上}</script></body></html>

6. 参考资料

MDN Web Docs

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

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

相关文章

使用scp命令从本地往服务器传输文件失败

解决办法&#xff1a; 找到这个文件&#xff0c;打开&#xff0c;将里面的服务器ip对应的一行数据删掉即可。

(c语言+数据结构链表)项目:贪吃蛇

目录 1.项目背景 2.游戏效果演⽰ 3. ⽬标 4. 技术要点 5. Win32 API介绍 5.1 Win32 API 5.2 控制台程序 5.3 控制台屏幕上的坐标COORD 5.4 GetStdHandle 5.5 GetConsoleCursorInfo 5.5.1 CONSOLE_CURSOR_INFO 5.6 SetConsoleCursorInfo 5.7 SetConsoleCursorPositi…

d3dcompiler47dll丢失怎么解决,详细介绍6种解决方案

在电脑使用过程中&#xff0c;我们可能会遇到各种问题&#xff0c;其中之一就是系统提示某个文件缺失。其中&#xff0c;d3dcompiler_47.dll是许多用户经常遇到的问题之一。这个文件是DirectX组件的一部分&#xff0c;如果缺失&#xff0c;可能会导致游戏或应用程序无法正常运行…

Qt/C++ 多线程同步机制详解及应用

在多线程编程中&#xff0c;线程之间共享资源可能会导致数据竞争和不一致的问题。因此&#xff0c;采用同步机制确保线程安全至关重要。在Qt/C中&#xff0c;常见的同步机制有&#xff1a;互斥锁&#xff08;QMutex、std::mutex&#xff09;、信号量&#xff08;QSemaphore&…

Ansbile-变量

文章目录 一、Ansible的常量&#xff08;内置的变量&#xff09;有哪些&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1…

vulnhub(11):derpnstink(hydra爆破用户名和密码、验证的文件上传)

端口 nmap主机发现 nmap -sn 192.168.159.120/24 ​ Nmap scan report for 192.168.159.120 Host is up (0.00020s latency). ​ 120是新出现的机器&#xff0c;他就是靶机 nmap端口扫描 nmap -Pn 192.168.159.120 -p- --min-rate 10000 -oA nmap/scan 扫描开放端口保存到 nma…

【论文笔记】Are Large Kernels Better Teacheres than Transformers for ConvNets

Abstract 本文提出蒸馏中小核ConvNet做学生时&#xff0c;与Transformer相比&#xff0c;大核ConvNet因其高效的卷积操作和紧凑的权重共享&#xff0c;使得其做教师效果更好&#xff0c;更适合资源受限的应用。 用蒸馏从Transformers蒸到小核ConvNet的效果并不好&#xff0c;原…

图的应用(关键路径)

基于你设计的带权有向无环图&#xff0c;写出所有合法的关键路径&#xff0c;并算出关键路径总长度 文字描述&#xff1a;关键路径总长度的现实意义是什么&#xff1f; 1.关键路径 总长度454316 2.现实意义 从源点到汇点的所有路径中&#xff0c;具有最大路径长度的路径称…

好的头戴式降噪耳机一定很贵吗?四款热门头戴耳机盘点及推荐!

在快节奏的现代生活中&#xff0c;噪音无处不在&#xff0c;它常常干扰着我们的工作、学习与休闲时光。而一款高性价比的降噪蓝牙耳机&#xff0c;就如同一个贴心的伙伴&#xff0c;能为我们营造出一片宁静的听觉空间。如今&#xff0c;耳机市场蓬勃发展&#xff0c;想要好的头…

Broadcast:Android中实现组件及进程间通信

目录 一&#xff0c;Broadcast和BroadcastReceiver 1&#xff0c;简介 2&#xff0c;广播使用 二&#xff0c;静态注册和动态注册 三&#xff0c;无序广播和有序广播 1&#xff0c;有序广播的使用 2&#xff0c;有序广播的截断 3&#xff0c;有序广播的信息传递 四&am…

如何在GitHub上克隆仓库:HTTPS、SSH和GitHub CLI的区别

GitHub是开发者的天堂&#xff0c;提供了丰富的工具和功能来管理代码和项目。在克隆GitHub仓库时&#xff0c;你可能会遇到三种常见的方法&#xff1a;HTTPS、SSH和GitHub CLI。每种方法都有其独特的优势和适用场景。本文将深入探讨这三种克隆方式的区别&#xff0c;帮助你选择…

C++--类的实例化

一、实例化的概念 用类类型在屋里内存中创建对象的过程&#xff0c;称为类实例化出对象 类是对对象进行一种抽象描述&#xff0c;是一个模型一样的东西&#xff0c;限定了类有哪些成员变量&#xff0c;这些成员变量只是声明&#xff0c;没有分配空间&#xff0c;用类实例化出…

java项目之编程训练系统源码(springboot)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的编程训练系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 编程训练系统的主要使用者管…

【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器(上)

文章目录 前言一、ArkTS基本介绍1、 ArkTS组成2、组件参数和属性2.1、区分参数和属性的含义2.2、父子组件嵌套 二、装饰器语法1.State2.Prop3.Link4.Watch5.Provide和Consume6.Observed和ObjectLink代码示例&#xff1a;示例1&#xff1a;&#xff08;不使用Observed和ObjectLi…

未来通信抢先看!遨游通讯2024年中国国际信息通信展亮点剧透

2024年中国国际信息通信展览会将于9月25日-27日在北京国家会议中心举行&#xff0c;本届展会以“推动数实深度融合&#xff0c;共筑新质生产力”为主题。在通信技术日新月异的今天&#xff0c;卫星通信、人工智能、低碳节能等技术理念正引领着通信行业迈向新的高度。遨游通讯作…

【漏洞复现】Casbin casdoor static 任意文件读取漏洞

漏洞描述 Casdoor 是 Casbin 开源社区推出的基于 OAuth 2.0 / OIDC 的中心化的单点登录(SSO)身份验证平台。 Casdoor static 存在任意文件读取漏洞,攻击者通过发送特殊的请求包可以获取服务器中的敏感文件。 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵…

Linux C# DAY3

作业 1、 #!/bin/bash mkdir -p ~/dir/dir1 mkdir ~/dir/dir2 cp ./* ~/dir/dir1 cp ./*.sh ~/dir/dir2 cd ~/dir/ tar -cvJf dir2.tar.xz ./dir2 mv dir2.tar.xz ~/dir/dir1/ cd ~/dir/dir1/ tar -xvf dir2.tar.xz 2、 #!/bin/bash head -5 /etc/group | tail -1 sudo mkdi…

CORS漏洞及其防御措施:保护Web应用免受攻击

1. 背景- 什么是CORS&#xff1f; 在当今互联网时代&#xff0c;Web 应用程序的架构日益复杂。一个后端服务可能对应一个前端&#xff0c;也可能与多个前端进行交互。跨站资源共享&#xff08;CORS&#xff09;机制在这种复杂的架构中起着关键作用&#xff0c;但如果配置不当&…

Redis Key的过期策略

Redis 的过期策略主要是指管理和删除那些设定了过期时间的键&#xff0c;以确保内存的有效使用和数据的及时清理。 具体来说&#xff0c;Redis 有三种主要的过期策略&#xff1a;定期删除&#xff08;Scheduled Deletion&#xff09;、惰性删除&#xff08;Lazy Deletion&#…

鸿蒙Harmony-Next 徒手撸一个日历控件

本文将介绍如何使用鸿蒙Harmony-Next框架实现一个自定义的日历控件。我们将创建一个名为CalendarView的组件&#xff08;注意,这里不能叫 Calendar因为系统的日历叫这个&#xff09;,它具有以下功能: 显示当前月份的日历支持选择日期显示农历日期可以切换上一月和下一月 组件…