【javaScript】DOM编程入门

这篇具有很好参考价值的文章主要介绍了【javaScript】DOM编程入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、什么是DOM编程

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

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

【javaScript】DOM编程入门,javascript,前端,开发语言,html5,css,java

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

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

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

 文章来源地址https://www.toymoban.com/news/detail-844979.html

二、如何获取元素

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

【javaScript】DOM编程入门,javascript,前端,开发语言,html5,css,java

如上图,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>

【javaScript】DOM编程入门,javascript,前端,开发语言,html5,css,java【javaScript】DOM编程入门,javascript,前端,开发语言,html5,css,java

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


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

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

【javaScript】DOM编程入门,javascript,前端,开发语言,html5,css,java【javaScript】DOM编程入门,javascript,前端,开发语言,html5,css,java


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

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

 

【javaScript】DOM编程入门,javascript,前端,开发语言,html5,css,java【javaScript】DOM编程入门,javascript,前端,开发语言,html5,css,java

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

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

【javaScript】DOM编程入门,javascript,前端,开发语言,html5,css,java


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>

【javaScript】DOM编程入门,javascript,前端,开发语言,html5,css,java

1、删除图片

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

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

【javaScript】DOM编程入门,javascript,前端,开发语言,html5,css,java

2、增加图片

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

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

【javaScript】DOM编程入门,javascript,前端,开发语言,html5,css,java

 

3、替换指定元素

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

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

【javaScript】DOM编程入门,javascript,前端,开发语言,html5,css,java

 

总结

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

【javaScript】DOM编程入门,javascript,前端,开发语言,html5,css,java

 

 

 

 

到了这里,关于【javaScript】DOM编程入门的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【JavaScript 】DOM操作快速入门

    目录 1.概述 2.操作 2.1.document对象 2.2.选中元素 2.2.1.get 2.2.2.query 2.3.操作属性 2.4.添加响应 2.5.修改文本 在Web开发中,JavaScript(JS)的DOM(Document Object Model,文档对象模型)是一种用来表示网页文档结构的编程接口。它将整个文档抽象为一个树形结构,每个节点都是文档中的一

    2024年02月06日
    浏览(42)
  • 前端基础自学整理|HTML + JavaScript + DOM事件

    目录 一、HTML 1、Html标签 2、Html元素 3、基本的HTML标签 二、CSS 样式 层叠样式表 三、JavaScript 使用示例 四、HTML DOM  通过可编程的对象模型,javaScript可以: window document 1、查找HTML元素 2、操作HTML元素 获取元素的属性 四、HTML DOM事件 ⚠️是DOM提供的API Html是用来描述网页的一

    2024年02月22日
    浏览(49)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(56)
  • JavaScript从入门到精通系列第三十八篇:详解JavaScript中DOM的查询

    😉😉 学习交流群: ✅✅1:这是 孙哥suns 给大家的福利! ✨✨2:我们免费分享Netty、Dubbo、k8s、Mybatis、Spring...应用和源码级别的视频资料 🥭🥭3:QQ群: 583783824   📚📚  工作微信: BigTreeJava 拉你进微信群,免费领取! 🍎🍎4:本文章内容出自上述:Spring应用课程!💞💞

    2024年02月05日
    浏览(45)
  • JavaScript 入门指南(三)BOM 对象和 DOM 对象

    BOM(browser Object Model)即浏览器对象模型 BOM 由一系列对象组成,是访问、控制、修改浏览器的属性的方法 BOM 没有统一的标准(每种客户端都可以自定标准)。 BOM 的顶层是 window 对象 window 对象表示浏览器中打开的窗口。 使用 window 对象中的属性和方法,可以省略对象名,直

    2024年04月09日
    浏览(43)
  • BCSP-玄子前端开发之JavaScript+jQuery入门CH10_jQuery基础

    4.10.1 jQuery 简介 jQuery是流行的JavaScript程序库,是对JavaScript对象和函数的封装 设计思想是write less, do more [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gx0f3UFO-1682307309412)(./assets/image-20230423230915569.png)] 4.10.2 jQuery 能做什么 访问和操作DOM元素 控制页

    2023年04月24日
    浏览(55)
  • 前端学习记录~2023.8.3~JavaScript重难点实例精讲~第5章 DOM与事件

    本章是第五章DOM与事件相关的内容。 DOM是文档对象模型,全称为Document Object Model。DOM用一个逻辑树来表示一个文档,树的每个分支终点都是一个节点,每个节点都包含着对象。DOM提供了对文档结构化的表述,通过绑定不同的事件可以改变文档的结构、样式和内容,从而能实现

    2024年02月12日
    浏览(49)
  • BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础

    4.7.1 ECMAScript 6 简介 ECMAScript 6.0(简称 ES6) 是JavaScript语言的下一代标准 正式发布于2015年6月 目标 使JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 版本升级 ECMAScript 2015 ECMAScript 2016 ECMAScript 2017 ECMAScript和JavaScript 的关系 前者是后者的规格,后者是前者的

    2023年04月27日
    浏览(54)
  • web前端框架Javascript之JavaScript 异步编程史

    早期的 Web 应用中,与后台进行交互时,需要进行 form 表单的提交,然后在页面刷新后给用户反馈结果。在页面刷新过程中,后台会重新返回一段 HTML 代码,这段 HTML 中的大部分内容与之前页面基本相同,这势必造成了流量的浪费,而且一来一回也延长了页面的响应时间,总

    2024年02月14日
    浏览(58)
  • 大型医院云HIS系统:采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发 融合B/S版电子病历系统

    一套医院云his系统源码 采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发。融合B/S版电子病历系统,支持电子病历四级,HIS与电子病历系统均拥有自主知识产权。 文末卡片获取联系! 基于云计算技术的B/S架构的医院管理系统(简称云HIS),采用前后

    2024年02月03日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包