JavaScript—Element元素对象

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。正则表达式

Element元素

上一篇介绍了Element对象,Element对象表示HTML里的元素。Element 对象能够拥有类型为元素节点、文本节点、注释节点的子节点,所谓的节点就是一个个的标签元素,Document 对象能够获得Element 对象,可经过 document .Element 对其进行访问。
而后也介绍了相关的属性和方法,常见的属性和方法,思惟导图:数组

image

对元素标记操做一类:浏览器

image

对属性操做一类:app

image

而后拿其中几个示例一下:
1.getElementById和className,getElementById能够经过元素的id值来获取元素对象,className能够返回元素对象的类样式选择器的名称或给元素对象设置一个类样式选择器。
顺便介绍一下onload事件,这个事件可以先加载完标签中的内容,再去执行脚本代码,例如我在< body >种写上这个事件,那么< script >标签就能够写在< body >标签上面了,不用担忧加载顺序的问题,由于写上这个事件后,会先加载完< body >标签里的内容,再去执行< script >标签里的脚本。
代码示例:函数

image

运行结果:工具

image

image

2.createElement建立一个元素对象,setAttribute设置元素属性的值,getAttribute获得元素属性的值,removeAttribute删除元素的属性,appendChild添加一个子标记,这个标记会添加到最后面,做为最后一个子节点,innerText设置标签内文本的内容。
代码示例:学习

image

运行结果:spa

image

设置的title属性:对象

image

点击后title属性就会被删除掉,就不会显示这个内容了:事件

image

removeChild能够删除添加的子节点:

image

运行结果:

image

3.innerHTML 设置或返回元素的年内容,能够用来往页面中添加标签。
代码示例:

image

innerHTML是直接添加的整个标签,而appendChild则添加的是一个建立好的元素对象。

运行结果:

image

以上是Element 对象中的几个经常使用属性和方法示例。

下面介绍一下location、screen和history对象的一些属性:
1.location:以前也介绍过,这个对象包含有关当前URL地址栏的信息。
代码示例:

image

2.screen:对象包含有关客户端显示屏幕信息。
代码示例:

image

3.history:对象包含用户在浏览器窗口中访问过的URL,也就是历史记录。
代码示例:

image

接下来介绍几个JavaScript 里的对象:
1.String是JavaScript中的字符串对象。
代码示例:

image

2.Number是JavaScript中的原始数值包装对象。 代码示例:

image

3.Date对象用于处理日期和时间。

image

运行结果:

image

4.Math对象用于执行数学任务。

image

运行结果:

image

5.Array是JavaScript中的数组对象,以前已经介绍过了。

6.RegExp对象用于表示正则表达式,它是对字符串执行模式匹配的强大工具。

image

运行结果:

image

使用JavaScript进行表单提交的验证:
在这里须要用到一个事件:onsubmit,这个事件会在表单中的确认按钮被点击时触发,而后会根据函数的返回值来决定提不提交表单。函数的返回值为true提交表单,false则不提交表单。

代码示例:

image

运行结果:
若是两次密码输入不同就会返回false,表单不会提交:

image

image

若是两次密码输入一致就会返回true,并提交表单:

image

image

相关文章
相关标签/搜索