JavaScript学习之旅-14( 原创 )

简介: 在上一篇文章中,主要学习了JavaScript中的几种继承方式。这篇文章我们主要学习DOM的相关知识。什么是的DOM?DOM是 Document Object Model首字母的缩写。

上一篇文章中,主要学习了JavaScript中的几种继承方式。这篇文章我们主要学习DOM的相关知识。

什么是的DOM?DOM是 Document Object Model首字母的缩写。翻译过来就是文档对象模型。

img_37e4e6f383ebfd58dd0cf2b991b0cc94.png
DOM

那么,JavaScript 能够改变页面中的所有 HTML 元素、 能够改变页面中的所有 HTML 属性、 能够改变页面中的所有 CSS 样式 、能够对页面中的所有事件做出反应。

既然JavaScript能够改变这么多元素,那么首先应该是找到这些控件然后在去修改赋值(就跟Android一样,必须先根据资源Id找到这个控件)。通常,JavaScript有以下三种方式去寻找元素:

A:通过 id 找到 HTML 元素

var data = document.getElementById("infoId") ; 其中infoId就是元素的id ,如果找到该元素,则该方法将以对象(在 data变量 中)的形式返回该元素;如果未找到该元素,则 data 为 null。

B:通过标签名找到 HTML 元素

img_b22282a849070fad6c0bb5ae0917040b.png
标签寻找元素 - 1

首先,这个绿色矩形的函数具体的逻辑如下图,这个button标签表达的是一个按钮,这里的P标签代表的是段落,这里的div简单理解就是一个块级结构

img_158301087d36151ff4d7d42c78d9b1ed.png
标签寻找元素 - 2

C:通过类名找到 HTML 元素:

            var x=document.getElementsByClassName("className");

Ps:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

DOM:通过JavaScript改变 HTML

A:document.write() 可用于直接向 HTML 输出流写内容(绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。)

B:修改 HTML 内容的最简单的方法时使用 innerHTML 属性如需改变 HTML 元素的内容,请使用这个语法:   

               document.getElementById(id).innerHTML =  新的 HTML

C:改变 HTML 属性。如需改变 HTML 元素的属性,请使用这个语法:

               document.getElementById(id).attribute = 属性值

D:插入新的DOM,一个是使用 appendChild,把一个子节点添加到父节点的最后一个子节点

img_90c0683dbd07227f2041297fd6447b66.png

比如我现在要把上面红色矩形内容添加到箭头指向的上面,可以这样做:

img_55abcd98c77ba956c8122eae95088dcf.png
添加 - 1
img_582a832be19e3c50d6d57316b2c5ae8f.png
添加 - 2

DOM:通过JavaScript改变 CSS

        改变 HTML 样式, 如需改变 HTML 元素的样式,可以使用这个语法:

        document.getElementById(id).style.property    =    新样式

DOM:通过JavaScript改变 事件

HTML 事件的例子:当用户点击鼠标时、网页已加载时、图像已加载时、鼠标移动到元素上时、输入字段被改变时等等。最常用的点击事件就是onClick,按钮点击因为是最常用的事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本、onload 和 onunload 事件可用于处理 cookie。

onchange 事件常结合对输入字段的验证来使用。

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

本篇文章主要学习的是关于Dom的基本介绍使用。本章的基本内容就结束了。

如果这篇文章对你有帮助,希望各位看官留下宝贵的star,谢谢。

Ps:著作权归作者所有,转载请注明作者, 商业转载请联系作者获得授权,非商业转载请注明出处(开头或结尾请添加转载出处,添加原文url地址),文章请勿滥用,也希望大家尊重笔者的劳动成果。

相关文章
|
6月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
6月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
258 2
|
7月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
237 0
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
125 4
js学习--制作猜数字
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
226 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
248 5
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
127 7
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
145 2

热门文章

最新文章