DOM相关操作

JavaScript分为三个部分，我们在之前说道，JS分为三个部分，ECMAscript，DOM,和BOM;详细的在这里…JavaScript历史;

至此我们ECMAscript部分已经学完，加下来就是DOM部分,DOM是文档对象模型，顾名思义也就是操纵我们我们之前写的html部分的标签的。之前有一个大佬曾经说过，万物皆对象…

DOM都有哪些操作呢？

我们先看图示：

明显看出DOM分为四个重要部分（都是操作）

操作元素内容
操作元素属性
操作表单属性
操作元素类名

操作元素内容：

我们都知道，如果你想做一件事，假如你想去写作业，那就必须做好准备工作，比如获取到笔和本之后你才可以挥洒自如，那么我们聊聊怎么获取目标元素…

获取目标元素
我们知道，在以前我们写css样式的时候，我们可以通过标签获取目标标签，也可以通过，类，id,伪元素，等等…那么我们的js获取相应对象也是一样的只不过需要一些不同的语句，都哪些呢？看下面细聊…

我们先设置一个场景，来通过不容的语法获取不同的标签，看代码…

 <div></div>                          // 普通标签<div class="box"></div>             //  含类标签<div id="box"></div>               //   含id标签

下面通过不同方法分别获取上面的标签：

     // 通过id获取var box  = document.getElementById('id');   // 此时获取的是第三个div

     // 通过class获取var box = document.getElementsByClassName('box');   // 此时获取的是第二个div// 通过类名获取这里多一句解释,我们都知道id是具有唯一性的，但是类是具有普遍性的，那么使用这    条语句也就会获取所又class为box的标签，// 因此我想说： 他的返回结果是一个伪数组，伪数组这里我就不做解释了，之前在前文中已经提到多次

     // 通过标签名获取var box = document.getElementsByTagName('div');  // 此时获取的是第一个div   // 这种方式获取范围比类名更加广泛，明显获取的值也是一个伪数组，可以通过获取元素的[i]索引获取相应的目标标签

除以上三种方式：HTML5中推出了新的获取方式，但是有兼容问题哦，如果你不考虑兼容问题，可以直接使用，也是非常方便，document.querySelector();怎么使用呢？接着上面的例子说：

 // 通过标签名获取var box = document.querySelector('div');    // 参数直接传div就可以获取第一个div，那么你要问了，不应该获取的是所有的div么？并且不应该以伪数组的形式输出么?那么看下面的一行代码var box = document.querySelectorAll('div');  // 与上面一句相比较有什么区别？明显看出，驼峰命名法中多了一个ALL，那么加上这个ALL也就与getElementsByTagName('div')效果一样啦.// 通过类名获取var box = document.querySelector('.box');  // 与前面一样，语法中没有All的,都只是获取第一个目标标签var box = document.querySelectorAll('.box'); // 获取所有类名为box的标签// 通过id名获取var box = document.querySelector('#box');    // 同上var box = document.querySelectorAll('#box'); // 同上

是不是很方便，因为就两句代码，却可以获取所有的你想要的…快去try try吧…

我们现在知晓怎么获取目标标签了，那么接下来就可以进行一系列操作了…

如何获取目标元素内容：

<div id="box">123456798</div>

//获取上面元素第一种方式
var box = document.querySelector('#box');
alert(box.innerText);第二种方式
alert(box.innerHTML);

显示结果都是：

inner.Text 与 inner.HTML有什么区别呢？

他们的区别在于两点，第一种是老版本浏览器时有的属性，只能获取目标标签的内容，但是不能识别标签，第二种是W3C组织推出的，它不仅仅能获取目标标签的内容而且还能获取目标标签中的其他标签。看以下例子对比…

分别是用以上inner.Text 与 inner.HTML修改目标标签的值

box.innerText = '123'+'<br>'+'456';  // 相当于把目标标签的内容修改为123<br>456
box.innerHTML = '123'+'<br>'+'456';  // 此时就可以识别出里面的换行语句，输出结果为：132 换行  456

对比以上输出结果，容易得出innerHTML比innerText多了一种能识别html标签的功能。建议使用innerHTML

使用场景：

更换目标元素的内容

操作元素属性：

操作元素属性步骤：

首先，第一步依旧是获取目标标签，获取以后然后再根据获取的标签对象找他有的属性，那么一般情况下，普通标签的属性无非是：href,src,title,alt

想改变他们的属性，很简单，与上面操作元素内容是一样的，这里就不做过多的代码演示…

聊聊使用场景吧:

对象.src = ‘目标地址’; (可以通过此语句改变目标文件，比如切换图片等)
对象.href = ‘目标链接’; (可以通过该语句改变目标网页);
对象.alt = ‘目标替换文本’; (在图片信息改变的时候，这个同时设置)
对象.title = ‘目标图片提示信息’;（在图片改变的时候，他的提示信息也是改变的）

操作表单属性：

首先，第一步获取目标标签，第二步找到该表单中都有哪些属性，然后通过对象.属性 = '值';来修改目标属性的值…

表单属性一般有：type ,value,disabled

使用场景：

对象.type = ‘更换表单类型’;
对象.value = ‘更换表单的内容’ ； // 此时要注意修改表单的内容可不是修改他的innerHTML哦!
对象.disabled = ‘true’; // 可以设置表单是否不可用，默认为false 为可用

操作样式属性：

我们在学习JavaScript以前修改样式使用的是,css，但是有了js我们就可以动态的设置css的样式,设置方式一共有两种，并且还要讲一种保存之前目标标签本身就有的类，或者设置多个样式类…

普通修改：

// 结构
<div id="box">123456798</div>

     // 点击目标盒子，显示一个红色背景var box = document.querySelector('#box');box.onclick = function() {this.style.backgroundColor = 'red';}

点击以后的效果：

这是修改一个，那么修改多个我们要重复写许多 对象.style.样式 = '样式值';当然我们是有很好的解决思路的，有一个新的属性className= '值';这个属性可以给目标元素添加事先定义好的样式类，直接把类名写到值里面就可以了…看操作

         // 设置红色背景的样式.red {background-color: red;}

     // 通过给目标盒子添加red的样式类，来改变他的背景var box = document.querySelector('#box');box.onclick = function() {this.className = 'red';}

显示结果是一样的：

那么你要问了，如果要在这个红色背景的基础上再改变一些其他样式呢？看操作，添加多个类即可…

         // 样式类.red {background-color: red;}// 新添加样式类.font_size {font-size: 2em;}

     // 再添加一个类，同时也保留了原来的红色背景类var box = document.querySelector('#box');box.onclick = function() {this.className = 'red font_size';}

以上就是DOM的相关操作，多敲多练哦…

不断复盘，不断优秀，让自己成为镜子里想成为的那个人.关注三连，持续更新~~~

DOM 详细一篇就够【重点】相关推荐

学习javascript这一篇就够了超详细笔记（建议收藏）上
学习javascript这一篇就够了超详细笔记(建议收藏)上 1.初识计算机基础导读编程语言计算机基础初识js 浏览器执行 js组成 js初体验-三种书写位置 js注释 js输入输出语句 2. ...
多线程并发知识，肝完这篇10W+字超详细的文章就够了
大家好,我是Oldou,今天又到了我们的学习时间了,本文介绍的是多线程相关的知识,文中的内容可能不是很全,但是学习完一定会让自己掉发升级,内容比较多,但是我们千万别放弃,不懂的地方一定要主动花时间去理 ...
史上最全的Linux常用——目录和文件管理命令——收藏这一篇就够了！（超全，超详细）
史上最全的Linux常用--目录和文件管理命令--收藏这一篇就够了!(超全,超详细) Linux目录结构命令查看文件内容:-cat 查看文件内容:-more 查看文件内容:-less 查看文件内容 ...
史上最全的Linux常用命令汇总①收藏这一篇就够了！（超全，超详细）
史上最全的Linux常用命令汇总①(超全面!超详细!)收藏这一篇就够了! Linux命令基础 Shell Linux命令分类 Linux命令行的格式编辑Linux命令行的辅助操作获取命令帮助的方法 ...
python详细安装教程-超详细Python与PyCharm安装教程，看这一篇就够了
原标题:超详细Python与PyCharm安装教程,看这一篇就够了学习了三天的python, 之前测试一直用课程自带的网页版玩玩, 为了学习然后就下载了一个python和pycharm 现在分享下 ...
Docker入门实战看这篇就够了(最新详细以及踩过的坑)
Docker入门实战看这篇就够了前言初识是什么容器与虚拟机能干什么去哪玩安装先决条件查看自己的内核安装所需的软件包(支持devicemapper存储类型) 设置镜像的仓库设置yu ...
23上教资开始注册！详细报名流程看这一篇就够了！（建议收藏）
注意!2023年1月12日部分省份如:河北.上海.浙江.湖北.湖南.海南.云南.四川.重庆已经可以注册教资笔试了!注册网址:中国教育考试网,选择对应省份进入即可查看是否可以注册! 提示:注册未开启的将 ...
windows系统电脑系统重装详细教程（看这一篇就够了）
windows系统 U盘制作电脑系统重装详细教程(看这一篇就够了) 电脑装机教程安装前准备安装步骤如下第一步:安装软碟通软件第二步:下载windows系统镜像第三步:打开软碟通软件系统盘 ...
IM扫码登录技术专题(三)：通俗易懂，IM扫码登录功能详细原理一篇就够
本文引用了作者"大古同学"的"二维码扫码登录是什么原理"一文的主要内容,为了更好的理解和阅读,即时通讯网收录时有修订和改动,感谢原作者的分享. 1.引言自从微 ...
AJAX（看这一篇就够了，详细）
看这一篇就够了!-Ajax概念详解 AJAX简介: AJAX即Asynchronous JavaScript and XML(异步JavaScript和XML技术),是一种在无须重新加载整个网页的情况 ...

DOM 详细一篇就够【重点】

DOM相关操作

DOM都有哪些操作呢？

操作元素内容：

操作元素属性：

操作表单属性：

操作样式属性：

DOM 详细一篇就够【重点】相关推荐

最新文章

热门文章

DOM 详细 一篇就够【重点】

DOM相关操作

DOM都有哪些操作呢？

操作元素内容：

操作元素属性：

操作表单属性：

操作样式属性：

DOM 详细 一篇就够【重点】相关推荐

最新文章

热门文章

DOM 详细一篇就够【重点】

DOM 详细一篇就够【重点】相关推荐