javascript 获取节点-深入理解JavaScript核心概念

2023-08-26 0 7,169 百度已收录

JavaScript是Netscape推出的一种嵌入在HTML文档中的基于对象的脚本描述语言。

JavaScript 是一种音译脚本语言。 它是一种动态类型、弱类型、基于原型的语言,具有外部支持类型。 JavaScript 代码由浏览器的外部 JavaScript 引擎解释和执行。 JavaScript 在客户端被广泛使用。 它首先用在HTML(标准通用标记语言下的一种应用)网页上,为HTML网页添加动态功能。

目录

1JS目的

2JS数据类型

3个外部物体

4BOM、DOM对象模型

5 自定义对象(函数对象)

6 函数的定义和调用

7 流程控制:展现逻辑之美

8JS嵌入方法

9THML中JS代码的编写方式

10script语句什么时候执行?

11 脚本执行顺序

12 代码执行次数

13JS使用DOM操作HTML

14JS动态改变样式

JS通过自身内置的对象以及DOM对象模型提供的对象和事件来控制网页的内容并响应用户操作,从而实现网页的动态交互效果。

与 VBA 一样,JS 是一种基于对象的脚本语言。 它们都有一个宿主,主要操作的是宿主对象的元素,所以基本上不需要考虑创建新的类或对象,而是根据现有的对象来获取它们。 或者参考一下,以后再操作。

1。目的

1.1 将动态文本嵌入到 HTML 页面中。

1.2 应对浏览器混乱。

1.3 读写HTML元素。

1.4 在将数据提交到服务器之前使用正则表达式验证数据。

1.5 检查访问者的浏览器信息。

1.6 控制 cookiejavascript 获取节点,包括创建和更改它们。

1.7 基于Node.js技术的服务器端编程。

2JS数据类型

2.1 基本数据类型(原生对象):字符串、数值、布尔;

2.2 复合数据类型

2.2.1 字段数组

构造函数:

数组()

新数组(大小)

newArray(元素0,元素1,...,元素n)

链表方法:

javascript 获取节点-深入理解JavaScript核心概念

Array.concat() 连接字段

Array.join() 连接链表的元素以创建字符串

Array.length 字段的大小

Array.pop() 删除并返回链表的最后一个元素

Array.push() 将元素添加到链表中

Array.reverse() 反转链表中元素的顺序

Array.shift() 将元素移出链表

Array.slice() 返回链表的一部分

Array.sort() 对链表的元素进行排序

Array.splice() 插入、删除或替换链表的元素

Array.toLocaleString() 将链表转换为本地字符串

Array.toString() 将链表转换为字符串

Array.unshift() 在链表的底部插入一个元素

2.2.2 对象对象

我外部对象

II 宿主对象(BOM、DOM):浏览器、文档对象模型

三、自定义对象(函数对象):使用构造函数构造对象;

3个外部物体

JS提供了很多类,根据不同的功能封装了一些函数和变量,用于不同的数据操作,比如字符串操作、数学运算、数值转换、格式化等; 该类包含在JS类库中,因此也称为内置类。 有些内置类不需要实例化,可以直接调用类的方法和属性,而其他类则需要用new关键字实例化,才能调用类的方法和属性;

JavaScript 中提供了 String(字符串)、Math(数值估计)、Date(日期)、Boolean、Function、Global 和 Number 等对象。

JS的内置类也是某种事物的表示,所以只能通过创建实例来使用,比如Date类,必须先创建该类的新实例,然后才能使用它的实例方法和属性,即创建类时,创建新的实例时,该类的所有属性和方法都会复制到该实例中。

var当前日期 = newDate()

varcurrentMinute = 当前日期。 获取分钟数()

有些类实际上是事物的表示。 然而,此类类别通常不涉及个人。 例如,月亮被表示为一个职业,有技能和属性,而世界上只有一个月亮。 它是独一无二的,因此无法讨论。 上述个体不需要实例化。 JS中内置的Math类就属于这种类型,不需要实例化。

4BOM、DOM对象模型

JS针对不同的运行环境有不同的外部宿主对象,因为JS被设计为扩展语言。 对于通用编程语言,开发人员必须开发自己的运行时上下文。 正是由于这个原因,这些语言被称为通用设计语言。 另一方面,扩展语言在内置对象的应用程序(宿主环境)中运行程序。 此时主机应用程序将收到一些运行时上下文信息。 JS 将以全局对象为根节点的对象树的形式接收这些上下文信息。 启动时,JS从宿主环境获取的对象树称为宿主对象。 从JS代码的角度来看,全局对象在程序启动之前就已经存在了,客户端JS的全局对象称为Window对象。

浏览器对象模型 (BOM),它描述了与浏览器交互的方式和套接字。

文档对象模型 (DOM),它描述了处理 Web 内容的方法和套接字。

浏览器本身也被设计为一个对象集合的模型,我们可以使用这个浏览器对象来操作浏览器;

BOM对象除了属性和方法之外,还有storm,由JS中的storm处理器来处理。 当风暴发生时,风暴处理程序会连接到相应的风暴处理代码,不同的对象有不同的风暴。

5 自定义对象(函数对象)

js中随处可见对象,但是没有类定义的概念,可以用函数来定义新的类型。

在 JS 中,构造函数用于构造类。

函数显示()

document.write(""+this.name+""+this.age+"

”);

functionStudent(_姓名,_年龄)

this.name=_name;

this.age=_age;

this.show=显示;

varstu1=newStudent("汤姆",20);

varstu2=newStudent("莉莉",10);

展示。 调用(stu1);

斯图2。 展示();

/*

汤姆20

百合10

*/

通常写成更简洁的格式如下:

functionStudent(_姓名,_年龄)

this.name=_name;

this.age=_age;

这。 显示 = 函数()

document.write(""+this.name+""+this.age+"

”);

varstu1=newStudent("汤姆",20);

varstu2=newStudent("莉莉",10);

//show.call(stu1);

斯图2。 展示();

6 函数的定义和调用

函数是执行特定任务的单个逻辑单元。 在使用函数之前,必须对其进行定义。 然后在脚本中调用它。

函数是属于延迟执行的指令集; 函数定义后,不会手动执行,只有在特殊位置调用时才执行。

函数具有对象的所有特性,额外的()表示函数本身也可以被调用;

函数可以将重复的操作封闭在一起,有利于代码的复用。 JS 有很多内置的预定义函数来处理一些常见的操作。 还可以自定义函数,从而封装一些重复操作的语句;

JavaScript函数可以封装这些可能在程序中多次使用的模块。 以及可以因风暴驱动器而调用的程序。 因此实现一个函数将其与风波驱动程序关联起来。 这就是它与其他语言不同的地方。

预定义函数也称为全局函数,enscape()、encode()、parseFloat()、Number()、String()、isFinite()、isNaN()、eval()。

6.1 一般定义方法

函数 a(x,y){

javascript 获取节点-深入理解JavaScript核心概念

返回x+y;

varn=a(5,6);

文档。 写(n);

6.2 变量定义方法

varvarf=newFunction("x","y","返回x+y;");

变量=3;

varj=4;

varmul=varf(i,j);

document.write('nr',mul);

6.3 匿名函数

函数定义中也可以省略函数名称。 匿名函数也是一个表达式。 以下形式参数表达式的左侧是匿名函数表达式:

vara=函数(x,y){返回x+y;};

6.4 构造函数

构造函数是用来生成对象的函数,构造函数是通过new表达式来调用的。

函数MyClass(x,y){

这个.x=x;

这个.y=y;}

varobj=newMyClass(3,2);

document.write(obj.x,",",obj.y);

6.5 关闭关闭

Closure闭包是一个有状态的函数; 在函数声明内部声明另一个函数,即嵌套函数声明;

函数 getsum()

....函数和(a,b)

....{

.....返回+b;

....}

....返回;

varsumoftwo = getsum();

vartotal=sumoftwo(3,8);

document.write('nr', 总计);

6.6 函数的执行

调用函数就是使用当前文档中定义的函数,或者调用另一个窗口或框架定义的函数。 需要使用指定的参数调用它才能执行特殊行为。 函数也可以递归自身。

6.6.1 简单函数调用

函数的定义语句一般放在HTML文件的javascript代码之间,通常用于提前加载以响应用户的页面动作,通常不会影响HTML文档的浏览器显示格式;

之间的javascript代码通常用于在页面加载时运行JS代码生成页面内容;

8.1 通过添加到 HTML:

8.2 借助 SRC 属性连接脚本文件:

8.3 直接添加到 HTML 标记:

9THML中JS代码的编写方式

写法不同,其执行的过程也不同。

对于9.1之后的元素javascript 获取节点,由于后面的元素还没有构造出来,所以JS代码无法获取后面的DOM元素。

9.2 读取外部JS文件,还可以指定defer和async属性来延迟或异步执行。

9.3onload:页面读取后执行,可以操作所有DOM元素。

window.onload=function(){alert('你好');};

10script语句什么时候执行?

决策触发器是脚本语句在文档中的位置;

10.1 文件加载时;

10.2 文件加载后;

10.3 根据用户的行为做出响应;

10.4 当其他脚本语句调用它时;

11 脚本执行顺序

11.1 按照文件中出现的顺序执行;

11.2 风波驱动异步执行;

元素对象上设置的一个重要属性是与风暴处理程序相关的属性。 您可以在脚本中将函数绑定到它。 当风暴发生时,该函数将被异步调用。 风暴处理程序可以用 JS 代码更改窗口文档和构成文档的元素的行为。 风暴处理函数的属性名称以“on”开头,如D.onclick=function(){};

12 代码执行次数

12.1 一次,即订单执行一次,

12.2 呼叫次数;

12.3 定时器间隔执行;

重复调用函数或执行表达式,在函数或表达式的调用之间有固定的时间延迟。

setInterval("functionOrExpr", msecDelay[, funcarg1,..., funcargn])

移除估计器可以使用以下语法:

窗口.clearInterval(id);

12.4 代码的延迟执行

当您需要在将来的某个时间执行函数或表达式时。 它实际上应用于警告框的显示时间和状态栏的跑马灯效果和打字效果。

window.setTimeout("functionOrExpr",msecDelay);

13JS使用DOM操作HTML

13.1 节点获取

通过 id 查找 HTML 元素

varx=document.getElementById("简介");

varx=document.getElementById("main");

javascript 获取节点-深入理解JavaScript核心概念

变化=x.getElementsByTagName(“p”);

按类名查找 HTML 元素

varx=document.getElementsByClassName("简介");

13.2 创建和添加节点

varpara=document.createElement("p");

varnode=document.createTextNode("这是新的。");

para.appendChild(节点);

varelement=document.getElementById("div1");

element.appendChild(para);

13.3 节点内容修改

document.getElementById("p1").innerHTML="New text!";
document.getElementById("image").src="landscape.jpg";

13.4 节点的删除

varparent=document.getElementById("div1");

varchild=document.getElementById("p1");

父母。 移除子对象(子对象);

13.5 更改 HTML 输出流

创建动态 HTML 内容需要 JavaScript:

document.write(Date());

14JS动态改变样式

14.1 通过className属性修改类名

varchild0=document.createElement("div");

child0.innerHTML="child0";

child0.className="newDiv";

父级.appendChild(child0);

14.2 通过classList属性修改类名

在html中,一个标签可以应用多个类,例如:

...

通过className属性修改其中一个类是很麻烦的。

使用classList属性很方便,例如:

obj.classList.remove('bg');

14.3 修改样式属性

这是一个样本。

(也可以通过setInterval(匿名函数)实现动态疗效;)

14.4 直接修改样式表

函数changecss(nh){

CSS.href="";

CSS.href=nh;

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 javascript javascript 获取节点-深入理解JavaScript核心概念 https://www.wkzy.net/game/161559.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务