`
l4432848
  • 浏览: 244352 次
  • 性别: 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完全学习手册1 源码

    第2篇 JavaScript内置对象篇 第3章 JavaScript内置对象 43 3.1 JavaScript对象概述 43 3.1.1 对象的概念 43 3.1.2 使用JavaScript对象 基础知识 44 3.2 Array对象 46 3.2.1 创建Array对象 46 3.2.2 Array对象属性 ...

    javascript完全学习手册2 源码

    3.1.2 使用JavaScript对象基础知识 3.2 Array对象 3.2.1 创建Array对象 3.2.2 Array对象属性 3.2.3 Array对象方法 3.3 String对象 3.3.1 创建String对象 3.3.2 String对象属性 3.3.3 String对象方法...

    源文件程序天下JAVASCRIPT实例自学手册

    源文件程序天下JAVASCRIPT实例自学手册 第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 ...8.3.1 获取body元素对象信息 8.3.2 常见属性和方法汇总 8.4 本章小结

    JavaScript中DOM对象的思维导图

    二、节点的基本概念 三、 通过document对象来操作html页面中的元素 ...五、 Element对象的属性和方法: 六、 元素的属性和方法 七、 节点的操作(属性和方法) 基础知识归纳,可用于学习自身的巩固

    JavaScript基础和实例代码

    JavaScript电子书,包括了JavaScript的大部分知识,可以帮助读者快速入门。内容如下: 第1章 JavaScript语言概述 1.1 JavaScript是什么 ...8.3.1 获取body元素对象信息 8.3.2 常见属性和方法汇总 8.4 本章小结

    js对象层次• navigator •screen•window

    • navigator ... 表单元素对象  隐藏对象  密码输入区对象  单选域对象  重置按钮对象  选择区(下拉菜单、列表)对象  选择项对象  提交按钮对象  文本框对象  多行文本输入区对象  图片对象

    【JavaScript源代码】js对象的读取速度实例详解.docx

     1、访问字面量和局部变量最快,而访问数组元素和对象成员相对较慢。访问对象成员时,就像作用域链一样,在原型链上搜索。 2、如果找到的成员在原型链中的位置太深,访问速度就会变慢。 所以要尽量减少对象成员的...

    JavaScript事件对象event用法分析

    本文实例讲述了JavaScript事件对象event用法。分享给大家供大家参考,具体如下: 前面的文章已经介绍了JavaScript为事件指定处理程序的五种方式。 下面继续介绍JavaScript的事件对象event。 事件对象event包含导致...

    JavaScript中数组对象的那些自带方法介绍

    // 删除数组最后一个元素,返回被删除的元素 Array.push(element1, …, elementN); // 在数组尾部插入1-N个元素,返回操作后数组的length 通过这 pop 和 push ,就能把数组模拟成 堆栈(stack) 来进行操作。 堆栈...

    javascript通过元素id和name直接取得元素的方法

    本文实例讲述了javascript通过元素id和name直接取得元素的方法。分享给大家供大家参考。具体分析如下: 我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化,貌似十分高深莫测,其实也不然。而且js...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

     3.4.3 核心Element对象   3.4.4 核心Document对象   3.4.5 遍历和迭代DOM树   3.5 DOM HTML   3.5.1 DOM2 HTML 的HTMLDocument对象   3.5.2 DOM2 HTML 的HTMLElement对象   3.6 实例:将手工...

    base-element:用于创建独立元素和高性能元素的元素创作库

    查看与以下对象一起使用:或其他示例:用法示例您可以选择构建自己的元素API。 我更喜欢的一种方法是继承原型: var BaseElement = require ( 'base-element' )function Bear ( ) { BaseElement . call ( this )}...

    javascript之Array 数组对象详解

    —&gt;var arr = [element0, element1, …, elementn];//简单的定义方法 复制代码 代码如下:var arr = [1,2,3] 此时可以知道 复制代码 代码如下:arr[0] == 1; arr[1] == 2; arr[2] == 3; —&gt;new Array(); 复制代码 代码...

    ab-element:DOM元素原型插件

    方法Element.prototype.hasClass //与jQuery等效Element.prototype.addClass //与jQuery等效Element.prototype.removeClass //与jQuery等效...元素移动到新的父对象Element.prototype.preloadImagesAndCallBack //...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part3.rar

     3.4.3 核心Element对象   3.4.4 核心Document对象   3.4.5 遍历和迭代DOM树   3.5 DOM HTML   3.5.1 DOM2 HTML 的HTMLDocument对象   3.5.2 DOM2 HTML 的HTMLElement对象   3.6 实例:将手工...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part2.rar

     3.4.3 核心Element对象   3.4.4 核心Document对象   3.4.5 遍历和迭代DOM树   3.5 DOM HTML   3.5.1 DOM2 HTML 的HTMLDocument对象   3.5.2 DOM2 HTML 的HTMLElement对象   3.6 实例:将手工...

    bemmed:JavaScript类组成可重用的对象,这些对象产生一个`block__element--modifier`字符串

    适用于BEM(块元素修饰符)CSS类JavaScript可重用作曲家类。 安装 npm install bemmed 问题解决了 使用BEM表示法时,通常会有很多重复。 块的名称对于每个元素都会重复,并且当应用修饰符时,元素的className变得很...

    JSML:Javascript对象到DOM转换器

    JSML还是一个​​小型jQuery插件,允许您从这些结构化的Javascript对象构造DOM元素。 这是一个简单的例子: $("#my-element").jsml(["a", { href: "http://example.com" }, "This is a &lt;link&gt;" ]) 找到由...

    JAVASCRIPT THIS详解 面向对象

    1、在HTML元素事件属性中inline方式使用this关键字: &lt;div xss=removed&gt;division element&lt;/div&gt; 我们一般比较常用的方法是在此使用:javascirpt: EventHandler(this),这样的形式。不过这里其实可以写任何合法的...

    detect-element-overflow:告诉您给定元素是否正在溢出其容器的函数。 对于创建下拉菜单和工具提示很有用

    检测元素溢出 告诉您给定元素是否正在溢出其容器的函数。 对于创建下拉菜单和工具提示很有用。...Detect-Element-Overflow返回一个具有如下所述的getter函数的对象。 属性名称 描述 值示例 顶撞 子元素是否与顶

Global site tag (gtag.js) - Google Analytics