JavaScript—Element元素对象

Posted 2020-10-11

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

Element元素

上一篇介绍了Element对象，Element对象表示html里的元素。Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点，所谓的节点就是一个个的标签元素，Document 对象可以得到Element 对象，可通过 document .Element 对其进行访问。
然后也介绍了相关的属性和方法，常见的属性和方法，思维导图：

对元素标记操作一类：

对属性操作一类：

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

运行结果：

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

运行结果：

设置的title属性：

点击后title属性就会被删除掉，就不会显示这个内容了：

removeChild可以删除添加的子节点：

运行结果：

3.innerHTML 设置或返回元素的年内容，可以用来往页面中添加标签。
代码示例：

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

运行结果：

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

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

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

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

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

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

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

运行结果：

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

运行结果：

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

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

运行结果：

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

代码示例：

运行结果：
如果两次密码输入不一样就会返回false，表单不会提交：

如果两次密码输入一致就会返回true，并提交表单：