JavaScript DOM API怎么使用

今天小编给大家分享一下JavaScript DOM API怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。在DOM中，document页面全局对象，里面的函数querySelector和querySelectorAll 用于选择元素，通过传入CSS选择器来达到目的，选择的范围是位于该函数之前所存在的选择器，没找到返回值为null。如果选择的标签在页面有多个，只会选择第一次出现在页面的标签。
如果想要把这些元素都选中，就需要使用querySelectorAll函数。用法和querySelector 是一样的。该函数会返回一个类似与数组的对象，用法和数组一模一样，但是除此之外，还能添加键值对。

对该数组里面的元素进行展开，会发现很多属性，这些属性都是DOM原生的一些属性。JS很多代码都是通过“事件”来触发的，比如鼠标移动，鼠标滚动，键盘输入，修改浏览器大小等等都会产生事件。事件的三要素：事件源，哪个HTML元素产生的事件。事件类型，如鼠标移动，鼠标点击，窗口大小改免费云主机、域名变等。事件处理方式，当事件产生后，要执行什么js代码。例如，点击事件操作代码：栗子与运行效果：
图中给出了一种等价的写法，但是等价的写法会使HTML代码的结构更加复杂，所以更建议图中的第一种写法。操作元素的分类：元素的内容。元素的属性。元素的样式。首先，操作元素的内容可以使用innerHTML属性来获取一个标签里面的内容。栗子：
效果：

我们发现相同的元素都被折叠输出了，我们可以点击开发者工具的设置栏，来设置展开输出。
上面我们在所选中的标签里面放置的是文本，如果不是文本呢？其实也是一样的，假设里面放了一个列表标签，那么拿到的结果就是里面标签的HTML代码。
我们也可以来修改HTML的内容，比如将列表改为一个标题。
效果：
根据获取与修改元素的知识，我们可以来实现一个简单的计数器，基本思路就是：获取元素内容修改元素内容（加一操作）写回到元素里面
效果：

欸，好像与我们的预期有点不一致，原因就是修改元素内容时，拿到的内容是字符串类型的，发生的是拼接效果，而不是算术效果，所以我们需要进行转换，那如何转换？我们可以使用与java非常类似且同名的一个方法，它就是parseInt，同理如果需要小数那就有parseFloat，注意这里没有parseDouble方法哦！
效果：

我们来丰富一下，加一个按钮，可以完成减的功能。页面代码：
0JavaScript代码：效果：
但是对于但标签是没有innerHTML属性的，比如input标签，虽然不能通过innerHTML获取属性，但是可以通过value属性获取内容。页面代码：JavaScript代码:效果：
我们想实现一个小案例，就是点击一个图片就能切换图片，再点击一次又能够切换回来，我们可以利用DOM来修改元素的属性来实现，在这个案例中，我们只需设置点击事件为修改图片的路径，也就是src属性，就可以实现图片的切换。假设第一张图片的路径是./jee.png，第二张图片的路径是./樱花.png，实现图片切换的基本思路为：获取img元素。设置onclick。点击事件的细节就是判断路径是否包含ee，包含就将src属性换成./樱花.png，反过来，判断路径是否包含樱花，包含就将src属性换成./jee.png可以使用indexOf方法判断是否包含某个字符串。JavaScript代码：页面代码：效果：

具体哪些属性可以修改，我们可以使用console.dir函数来获取某个元素DOM API能够操作的全部属性。实现一个按钮，点击之后按钮文字从”播放”变为”暂停”，再点击一次，按钮文字从”暂停”变为”播放”。实现逻辑和切换逻辑是差不多的，具体看代码吧：JavaScript代码：页面代码：实现效果：首先我们需要创建若干个复选框，只有一个全选框，我们选中全选框，其他元素需要被全部选中，一旦其他元素有未选中的，全选也必须是未选中的。实现的基本思路：获取全选框元素，获取其他元素。注册全选框的点击事件，检查其他框是否都被选中，如果选中，则全选框也选中，否则全选框不选中。对每一个其他复选框设置点击事件，并将状态与全选复选框关联。每次点击其他框都要检测其他框是否都选中，以确定全选框的状态。JavaScript代码：页面代码：实际效果：DOM还可以修改style属性，下面来尝试运用选中元素与修改元素的知识，来实现点击文字放大的一个小案例。因为CSS中不区分大小写，属性与变量的命名采用脊柱式命名，而JS中-不能用于变量的命名，为了能够将CSS属性与JS变量名匹配，JS使用驼峰的形式表示CSS的属性，例如font-size属性，对应JS的变量名为fontSize。对于文字的放大，我们可以给文本所在的标签注册一个点击事件，每点击一次就将字体大小增大，即修改CSS的font-size属性。JavaScript代码：页面代码：
我是一段文本实现效果：
很多情况下一个个修改样式属性太麻烦了，我们也可以直接修改类属性来达到效果，可以通过选中元素变量名.className来获取和修改类属性。由于JavaScript里面的class是一个关键字，因此获取元素的class不能使用class，而需要使用className，多个class属性可以使用classList。JavaScript代码：页面代码：我是一段文本
关灯
实际效果：
除了修改元素的属性和内容，我们还可以在页面上添加元素，要添加元素，那就得先新建一个元素，并且还需要依赖一个父元素（已经创建好的），把这个新建的元素插入到父元素中就能实现元素的添加（依赖与DOM树），这个操作也被称为新增页面结点。
新建元素：补充元素内容：插入到DOM树:实例：
JavaScript代码：页面代码：实际效果：删除结点就更容易了，在DOM树上删除结点就行。删除结点：实例：
JavaScript代码：页面代码：实际效果：
目标页面猜数字的逻辑我就不赘述了，不过里面需要取随机数，我们可以通过js中的Math.random()函数来获取随机数，该函数生成随机数的范围是[0,1)区间内的一个小数，我们需要的是[1,100]之间的整数，我们可以乘上100后向下取整加一就能得到目标区间的数了，实现向下取整的函数是Math.floor(数字)。然后前端页面部分是通过HTML加上CSS弹性布局实现的，交互通过JavaScript DOM实现，下面的表白墙案例也是一样的，就不多说了。JavaScript代码：页面代码：
要猜的数字:


我就要猜它

结果:
你还没有猜哦！

次数:
0

开始/重新开始猜数字
实际效果：
目标页面JavaScript代码：页面代码：
输入后点击提交,会将信息显示在表白按钮下方这是一个正经的表白墙，这真的不是一个表白墙
是谁:

向谁:

说:

表白
实际效果：以上就是“JavaScript DOM API怎么使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注云技术行业资讯频道。

相关推荐: vue隐藏元素的指令是什么

本文小编为大家详细介绍“vue隐藏元素的指令是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue隐藏元素的指令是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 vue中隐藏元素的指令是“v-show”。v-show指令根…