`
l4432848
  • 浏览: 253443 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript—Element元素对象

    博客分类:
  • java
阅读更多

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

Element元素

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

image

对元素标记操作一类:

image

对属性操作一类:

image

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

image

运行结果:

image

image

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

image

运行结果:

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

0
0
分享到:
评论

相关推荐

    Javascript函数与对象

    ### JavaScript函数与对象详解 在JavaScript中,函数与对象是两个核心概念,它们构成了这门语言的基石。本文将深入探讨这两个主题,帮助读者更好地理解并掌握JavaScript。 #### 函数 函数是JavaScript中的第一类...

    javascript面向对象框架

    2. **Element和DOM操作**:MooTools的Element对象是对DOM元素的封装,提供了一系列方便的方法,如hide、show、toggle等,使得DOM操作更为简便。 3. **FX模块**:MooTools的Fx模块提供了动画效果的实现,如Fx.Tween...

    javaScript 生成DOM 对象(html标签).rar

    在“javaScript生成DOM 对象ProvinceCity3.html”中,可能展示了如何动态生成省份和城市选择的下拉列表,这涉及到遍历数据和动态创建`&lt;option&gt;`元素的过程。 最后,图片处理也是DOM操作的一部分。在“images”目录...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四:HTML DOM-文档元素的操作(二)

    这篇教程——"JavaScript学习手册十四:HTML DOM-文档元素的操作(二)"深入探讨了如何使用JavaScript来操纵HTML文档中的元素,进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示,它将网页内容...

    javascript获取鼠标点击元素对象(示例代码).docx

    ### JavaScript 获取鼠标点击元素对象详解 #### 一、引言 在前端开发中,通过JavaScript获取用户鼠标点击的元素对象是一项基本且实用的功能。这项技术不仅能够帮助开发者更好地响应用户的交互行为,还能够用于实现...

    html,javascript元素属性文档

    例如,使用`element.style.color`可以改变元素的文字颜色,`element.style.display`可以控制元素的显示隐藏。DOM操作对于实现响应式设计或创建动画效果至关重要。 JSB5RefPoster和JSB5RefBooklet可能是JavaScript的...

    JavaScript的基础资料(语法,DOM对象模型等)

    本文将深入探讨JavaScript的基础语法以及DOM对象模型。 一、JavaScript基础语法 1. 变量:在JavaScript中,我们使用`var`、`let`或`const`来声明变量。`var`在全局或函数作用域内有效,而`let`和`const`则在块级...

    javascript 原生Dom对象和jQuery对象的联系和区别

    JavaScript中的DOM对象和jQuery对象是两种不同的数据结构,它们在处理网页元素时有着各自的特性和优缺点。了解它们之间的联系和区别对于JavaScript开发者来说至关重要,因为这有助于选择合适的工具进行网页交互。 ...

    JavaScript中DOM对象的思维导图

    `Element`对象有许多属性和方法,比如`children`属性可以获取一个元素的所有子元素。`HTMLCollection`和`NodeList`都是存储节点的集合,但它们之间存在区别:`HTMLCollection`动态更新并只包含元素节点,而`NodeList...

    JavaScript DOM元素常见操作详解【添加、删除、修改等】

    DOM(文档对象模型)是JavaScript操作网页的基石。它是一种通过脚本访问和更新文档(如HTML和XML)内容的API。DOM将文档结构视为一棵节点树,包括各种节点类型:元素节点、属性节点和文本节点。 元素节点代表文档中...

    JavaScript对象参考手册

    例如,`Document`代表整个HTML文档,`Element`对象如`Anchor`、`Button`、`Input`、`Table`等则分别对应HTML元素,它们有自己的属性和方法,如`innerHTML`、`style`、`addEventListener()`等,用于操作页面内容和...

    通过angular.element,变成jquery对象,改样式

    在AngularJS框架中,`angular.element`是一个非常有用的工具,它允许开发者将DOM元素转换为jQuery对象,从而利用jQuery丰富的API来操作DOM。这在处理复杂的DOM操作或需要与jQuery库进行集成时特别有用。本篇文章将...

    element.js文件

    这里的 `Element` 是库提供的构造函数,`'my-element'` 是要创建的元素类型,`{ properties }` 是该元素的配置对象,可能包含样式、大小、颜色等属性。 同时,"js.css" 文件很可能是与 "element.js" 配套的CSS样式...

    javascript删除JSON元素.docx

    JavaScript 删除 JSON 元素是指在 JavaScript 中删除 JSON 数据中的元素,包括对象和数组元素。为了删除 JSON 元素,我们需要掌握 JavaScript 中对象和数组的删除方法。 一、删除数组元素 在 JavaScript 中,删除...

    js基础之DOM中元素对象的属性方法详解

    本文将对JavaScript中关于DOM(文档对象模型)元素对象的属性和方法进行详细解析。DOM是用于表示和交互HTML或XML文档的API,它是JavaScript中最为重要的组成部分之一,允许我们通过脚本来读取、修改和删除文档内容、...

    JavaScript_对象方法实例集锦

    ### JavaScript对象方法实例集锦 #### 一、JavaScript数组API详解 数组是JavaScript中最基本的数据结构之一,提供了丰富的内置方法来帮助我们操作数组。以下是一些常用的数组方法及其使用示例: 1. **定义数组** ...

    第二章JavaScript操作BOM对象4

    在本章"第二章JavaScript操作BOM对象4"中,我们将深入探讨JavaScript在网页中的引用方式、基本数据类型以及数组的定义与访问。这将帮助我们更好地理解和运用JavaScript这一强大的客户端脚本语言。 首先,让我们来看...

    JavaScript常用对象参考

    ### JavaScript常用对象参考知识点 #### Math对象 - **E**: 欧拉常数`e`的值(大约为2.718)。 - **LN10**: 10的自然对数的值(大约为2.302)。 - **LN2**: 2的自然对数的值(大约为0.693)。 - **LOG2E**: 以2为底...

    JavaScript基于对象编程

    ### JavaScript基于对象编程详解 #### 4.1 面向对象编程与基于对象编程 在探讨JavaScript如何实现基于对象的编程之前,我们先来理解一下面向对象编程(Object-Oriented Programming, OOP)与基于对象编程(Object-...

    jQuery与javascript对照学习 获取父子前后元素 实现代码.docx

    在Web前端开发过程中,经常需要对DOM(文档对象模型)进行操作,包括选取元素、修改样式、添加或删除节点等。jQuery作为一种轻量级的JavaScript库,极大地简化了这些操作。本文将详细介绍如何使用jQuery与原生...

Global site tag (gtag.js) - Google Analytics