【javaScript】DOM编程入门

一、什么是DOM编程

概念:DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化的编程

为什么要由DOM编程来动态修改呢?我们就得先理解网页的运行原理:

88317ae6b5624507bcd1e1bf54218c97.jpeg

如上图,程序员编写的html文件存储在服务器端,而用户使用的浏览器则由url与服务器实现交互,将服务器上的html文件经过一定规则转换传递到浏览器本地的document对象中,接着再通过浏览器解码展示document对象上的元素

这时我们去思考一个问题,如果我们要根据用户的操作来修改页面上展示的元素的话,直接去修改服务器中的html文件肯定是十分不现实的,就算可行,其效率也会十分低下。事实上,服务器端的html文件写完后一般就不会轻易去修改了。那么我们该如何去让页面元素动态变化呢?

这时document就十分重要了。我们注意到服务器端的html会在传递到本地浏览器时存储在document对象中,这时我们可以直接尝试从document对象中获取页面元素,并直接修改document对象中的数据与元素,这样就能实现用户端页面数据与样式的动态变化了。而获取和修改元素的方法就被称作DOM编程

 

二、如何获取元素

我们先得知道DOM的结构是什么样的:

9c6613a299ce4449875ede10976d5a8b.png

如上图,DOM采用树的结构来进行存储,html文件的各个元素被存储在各结点上,而结点主要被分为三类:

1 元素结点 element 标签

2 属性结点 attribute 属性

3 文本结点 text      双标签中的文字

注意:document也是一个元素对象,它是网页中最大的父级元素

这时就可以根据结点来获取想要的元素了

1、直接获取

主要语法为:

var elm=document.getElementBy指定方式(对应名称)

例如根据id值获取元素时可采用:

var elm=document.getElementById("username")

其它常见方法:

var elm=document.getElementsByTagName("input") //根据元素的标签名获取多个同名元素

var elm=document.getElementsByName("aaa")//根据元素的name属性值获得多个元素

var elm=document.getElementsByClassName("a")//根据class属性获得多个元素

2、间接获取

通过父元素获取子元素:

var cs=div01.children //通过父元素获取全部子元素

var firstChild=div01.firstElementChild//通过父元素获取第一个子元素

var lastChild=div01.lastElementChild//通过父元素获取最后一个子元素

通过子元素获取父元素:

var parent=pinput.parentElement//通过子元素获取父元素

获取当前元素的兄弟元素:

var pElement=pinput.previousElementSibling)// 获得前面的第一个元素

var nElement=pinput.nextElementSibling)// 获得后面的第一个元素

 

 

三、如何操作元素

1、操作元素

常见方法

1 操作元素的属性  元素.属性名

2 操作元素的样式  元素.style.样式名  

3 操作元素的文本  元素.innerText     只识别文本

                             元素.innerHTML     同时可以识别html码

注意:style样式名中带“-”的要转换成驼峰式,如background-color要改成backgroundColor

例如我们可以设计一个按钮来操作属性:

<body><input id="in" type="text" value="hello" /><br><br><button onclick="changeAttribute()">操作属性</button></body>
<script>function changeAttribute(){var inp=document.getElementById("in")//修改属性值inp.type="button"inp.value="你好"
}
</script>

f9f6490b0bfa453f803c9561864c7bff.pngbb9fff9fbdd54931b588e5d6ab02bcda.png

按下按钮,我们会发现原来的输入框属性就被修改为按钮了,其value也发生了改变


我们可以设计一个按钮来操作样式:

<body><h1 id="hl">测试字体</h1><button onclick="fun()">点击切换字体颜色</button>
</body>
<script>function fun(){var elm=document.getElementById("hl")elm.style.color="blue"}
</script>

aa2f3cd7154e4d529e204b53b87a0dc4.pngbfe3917c2792485a949908f9b30cf171.png


我们可以设计一个按钮来操作文本:

<body>    <div id="div01">hello</div><br><br><button onclick="changeText()">操作文本</button></body>
<script>    
function changeText(){var div01=document.getElementById("div01")        div01.innerText="你好"
}
</script>

 

f3e9d96005b44195945df12bdca6f799.pngaeea704fbc8344a59b108d0838bd18be.png

还可以用innerText方法,可以同时识别html代码:
 

function changeText(){var div01=document.getElementById("div01")/* 语法  元素名.innerText  只识别文本元素名.innerHTML  同时可以识别html代码*/div01.innerHTML="<h1>你好<h1>"
}

30172d9cd97b4c43852cfac607ffb16a.png


2、增删元素

 

常见方法:

var element=document.createElement("元素名") // 创建元素

父元素.appendChild(子元素)                                 //在父元素中追加子元素

父元素.insertBefore(新元素,参照元素)                  //在某个元素前增加元素

父元素.replaceChild(新元素,被替换的元素)          //用新的元素替换某个子元素

元素.remove()                                                       //删除当前元素

document.createElement(TagName)                    //根据标签名创建Element元素

Element.cloneNode(boolean)                                //复制节点  

我们写一组代码来展示一下效果:
 

<body><div><img src="img/jay.jpg" width="100px" alt="jay.jpg"><img id="img" src="img/范特西.jpg" width="100px" alt="jay.jpg"><img src="img/八度空间.jpg" width="100px" alt="jay.jpg"></div><button onclick="fun1()">删除一张图片</button><button onclick="fun2()">增加一张图片</button><button onclick="fun3()">替换图片</button><button onclick="fun4()">复制图片</button>
</body>

9ff1af992b3c44a0aad2b28a7228e7a9.png

1、删除图片

这里我们为了代码的简洁就实现一下删除最后一张图片的效果吧:

function fun1(){//获取div最后一个元素var i=div.lastElementChild//通过父元素div删除子元素div.removeChild(i)
}

fe0e04bdd9f24234b8b256cd3e4818ed.png

2、增加图片

这里我们就实现一下在最后增加一张图片的效果吧:

function fun2(){//创建一个图片标签var i=document.createElement("img")//设置标签属性i.setAttribute("src","img/叶惠美.jpg")//将新建元素添加到div中div.appendChild(i)
}

a59d8024bf454639baa6ae1e49b52529.png

 

3、替换指定元素

这里我们就展示一下替换id=img元素的效果吧:

function fun3(){var i=document.createElement("img")i.setAttribute("src","img/叶惠美.jpg")//用i替换id为img的图片div.replaceChild(i,img)
}

9dc91874335a4a8d864e333ebb7d89e9.png

 

总结

那么本篇文章就到此为止了,如果觉得这篇文章对你有帮助的话,可以点一下关注和点赞来支持作者哦。作者还是一个萌新,如果有什么讲的不对的地方欢迎在评论区指出,希望能够和你们一起进步✊

3971224d455149cdaf5fec2e7b5ee5c7.png

 

 

 

 

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

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

相关文章

Map之computeIfAbsent

Map之computeIfAbsent Absent /ˈbsənt , bˈsent/ ab相反s存在ent…的 从map中获取key对应的value,如果value不存在就用提供的Function创建一个新的value,然后存入map,最后返回 优化前 Map<String, Set<Pet>> statistics new HashMap<>(); Set<Pet…

IO流:字节流、字符流、缓冲流、转换流、数据流、序列化流 --Java学习笔记

目录 IO流 IO流的分类 IO流的体系 字节流&#xff1a; 1、Filelnputstream(文件字节输入流) 2、FileOutputStream(文件字节输出流) 字节流非常适合做一切文件的复制操作 复制案例&#xff1a; try-catch-finally 和 try-with-resource 字符流 1、FileReader(文件字符…

ALPHA开发板上的PHY芯片驱动:LAN8720驱动

一. 简介 前面文章了解到&#xff0c;Linux内核是有提供 PHY通用驱动的。 本文来简单了解一下ALPHA开发板上的 PHY网络芯片LAN8720的驱动。是 LAN8720芯片的公司提供的 PHY驱动。 二. ALPHA开发板上的PHY芯片驱动&#xff1a;LAN8720驱动 我 们 来 看 一 下 LAN8720A 的 …

输入url到页面显示过程的优化

浏览器架构 线程&#xff1a;操作系统能够进行运算调度的最小单位。 进程&#xff1a;操作系统最核心的就是进程&#xff0c;他是操作系统进行资源分配和调度的基本单位。 一个进程就是一个程序的运行实例。启动一个程序的时候&#xff0c;操作系统会为该程序创建一块内存&a…

HDLbits 刷题 --Always nolatches

学习: Your circuit has one 16-bit input, and four outputs. Build this circuit that recognizes these four scancodes and asserts the correct output. To avoid creating latches, all outputs must be assigned a value in all possible conditions (See also always…

【HTML】简单制作一个3D动画效果重叠圆环

目录 前言 开始 HTML部分 CSS部分 效果图 总结 前言 无需多言&#xff0c;本文将详细介绍一段代码&#xff0c;具体内容如下&#xff1a; 开始 首先新建文件夹&#xff0c;创建两个文本文档&#xff0c;其中HTML的文件名改为[index.html]&#xff0c;CSS的…

【chatGPT】我:在Cadence Genus软件中,出现如下问题:......【1】

我 在Cadence Genus中&#xff0c;出现如下问题&#xff1a;Error&#xff1a;A command argument did not match any of the acceptable command option. [TUI-170] [set_db] :‘/’ is not a legal option for the command. 该如何解决 ChatGPT Cadence Genus的错误消息 “…

探索Java多线程编程的奥秘

在当今互联网时代&#xff0c;软件系统的高性能和高并发已经成为了各类应用的标配。而在Java领域&#xff0c;多线程编程作为实现高性能和高并发的重要手段&#xff0c;备受开发者们的关注。本文将带您深入探索Java多线程编程的奥秘&#xff0c;介绍其基本概念、常见问题和最佳…

GPT-2原理-Language Models are Unsupervised Multitask Learners

文章目录 前言GPT-1优缺点回顾GPT-1实验结果分析GPT-1缺陷分析 GPT-2训练数据OpenAI的野心预训练/微调的训练范式训练数据选择 模型结构和参数&#xff08;更大的GPT-1&#xff09;模型预训练训练参数 输入数据编码 总结 前言 首先强调一下&#xff0c;在看这篇文章之前&#…

搞学术研究好用免费的学术版ChatGPT网站-学术AI

学术版ChatGPThttps://chat.uaskgpt.com/mobile/?user_sn88&channelcsdn&scenelogin 推荐一个非常适合中国本科硕士博士等学生老师使用的学术版ChatGPT&#xff0c; 对接了超大型学术模型&#xff0c;利用AI技术实现学术润色、中英文翻译&#xff0c;学术纠错&#…

中值滤波算法与SSE2指令集并行优化

中值滤波算法是经典图像处理中极为常见的操作,一般我们通过调用OpenCV或者是Matlab直接进行使用,以至于有种它本来就很容易实现且速度很快的错觉。近来用到中值滤波算法,因为不想用到OpenCV库或者Matlab而对其实现研究了一番,才发现其中有很多值得注意的细节。下面我们结合…

MongoDB集合结构分析工具Variety

工具下载地址&#xff1a;GitHub - variety/variety: Variety: a MongoDB Schema Analyzer 对于Mongo这种结构松散的数据库来说&#xff0c;如果想探查某个集合的结构&#xff0c;通过其本身提供的功能很不方便&#xff0c;通过调研发现一个很轻便的工具--variety&#xff0c;…

centOS如何升级python

centOS下升级python版本的详细步骤 1、可利用linux自带下载工具wget下载&#xff0c;如下所示&#xff1a; 笔者安装的是最小centos系统&#xff0c;所以使用编译命令前&#xff0c;必须安装wget服务&#xff0c;读者如果安装的是界面centos系统&#xff0c;或者使用过编译工具…

在 Amazon Timestream 上通过时序数据机器学习进行预测分析

由于不断变化的需求和现代化基础设施的动态性质&#xff0c;为大型应用程序规划容量可能会非常困难。例如&#xff0c;传统的反应式方法依赖于某些 DevOps 指标&#xff08;如 CPU 和内存&#xff09;的静态阈值&#xff0c;而这些指标在这样的环境中并不足以解决问题。在这篇文…

Stable Diffusion 本地化部署

一、前言 最近在家背八股文背诵得快吐了&#xff0c;烦闷的时候&#xff0c;看到使用 AI 进行作图&#xff0c;可以使用本地话部署。刚好自己家里的电脑&#xff0c;之前买来玩暗黑4&#xff0c;配置相对来说来可以&#xff0c;就拿来试试。 此篇是按照 Github 上的 stable-d…

Android JNI基础

目录 一、JNI简介1.1 什么是JNI1.2 用途1.3 优点 二、初探JNI2.1 新建cpp\cmake2.2 build.gradle配置2.3 java层配置2.4 cmake和c 三、API详解3.1 JNI API3.1.1 数据类型3.1.2 方法 3.2 CMake脚本 四、再探JNI 一、JNI简介 1.1 什么是JNI JNI&#xff08;Java Native Interfa…

适配器: stack与queue

模板的使用 容器的复用 传容器: 控制底层是那个控制传仿函数: 控制大小堆的建立 stack 特点: 后进先出底层: 容器的封装(vector, list, dequeue)场景: 模拟递归, 函数压栈等接口:empty(), size(), top(), push(), pop()代码: stack queue 特点: 先进先出底层: 容器的封装…

Linux文件IO(3):使用文件IO进行文件的打开、关闭、读写、定位等相关操作

目录 1. 文件IO的概念 2. 文件描述符概念 3. 函数介绍 3.1 文件IO-open函数 3.2 文件IO-close函数 3.3 文件IO-read函数 3.4 文件IO-write函数 3.5 文件IO-lseek函数 4. 代码练习 4.1 要求 4.2 具体实现代码 4.3 测试结果 5. 总结 1. 文件IO的概念 posix(可移植操作系统接…

uniapp和vue的区别?

Uni-app 和 Vue 是两个不同的概念&#xff0c;它们之间的关系可以简单描述为&#xff1a; Vue&#xff1a; Vue.js 是一个流行的前端 JavaScript 框架&#xff0c;用于构建用户界面和单页面应用。Vue 具有简洁的语法、响应式数据绑定和组件化的特性&#xff0c;使得开发者可以更…

【Python系列】Python中的YAML数据读取与解析

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…