前端乱煮之javascript学习笔记三

1 DOM即为文档对象模型,在html页面加载完成后,浏览器会创建页面的文档对象模型,它看来像是一棵树,有根节点,以及其他的节点。

而通过可编程的对象模型,javascript可以获得创建动态HTML的能力。比如,javascript可以改变HTML所有的元素、可以改变这些元素的属性、可以改变这些元素的样式和能对该页面内的事件作出反应。

2 要想对页面内的元素进行操作,首先就要获得这个元素。通常有三种获得元素的方法,分别是

通过Id来获得元素;

通过标签来获得元素;

通关类名来获得元素;

3

通过innerHTML()可以改变HTML的内容

相应的,还可以通过获得元素之后来改变元素的属性、样式等。

4

DOM还可以使javascript对事件作出反应,而其中,html事件的例子有

当用户点击鼠标

当页面被加载

当图片被加载

当输入字段被改变

当用户鼠标移到某个元素上

我们还可以使用DOM来为html元素分配事件

4 通过DOM,我们还可以添加html元素,或者删除html元素

当添加元素时,我们需要创建一个新的元素,如果需要向该元素中添加文本,还需要创建一个新的文本节点,并且将该节点追加到该元素中去。然后,我们需获得该元素的父元素,将该元素追加到它的父元素中去。

当删除元素时,我们需要获得该元素的父元素,并且获得该元素,然后使用removeChild()函数来删除要删除的元素。DOM 需要清楚需要删除的元素,以及它的父元素。

这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素。

时间: 2024-09-29 23:33:19

前端乱煮之javascript学习笔记三的相关文章

前端乱煮之javascript学习笔记二

1 javascript的隐式转换规则: 若有布尔类型,则将它转换为数值进行比较. 若有NaN,一律返回false 若是字符串,则分为三种情况:对方为字符串就直接比较,对方为数值,则将字符串转化为数值,若对方为对象,则将对象用toString()的方法进行转换,然后再比较.最后,若是其他,则一律返回false. 若是数字,如果对方是对象,用valueOf()进行比较,其余一律返回false null 和defined不会进行类型转换,但是二者相等. 2 javascript中的break和con

前端乱煮之javascript学习笔记五

1 window对象: 所有浏览器都支持window对象,它表示浏览器窗口.所有javascript的全局对象.全局函数以及变量都自动成为window对象的成员.全局变量是window对象的属性,全局函数是window对象的方法. 确定浏览器可视窗口的尺寸大小(除去工具栏和滚动条)的三种方法: (1)window.innerHeight 得到浏览器的可视高度,window.innerWidth得到浏览器的可视宽度.(Internet Explorer.Chrome.Firefox.Opera 以

前端乱煮之javascript学习笔记一

1 javascript有六种数据类型,分别为:数值类型.字符串类型.布尔类型.对象.null和defined,其中对象包括了函数对象.数组对象等.而这六种数据类型中,除了对象,其他五种全是基本数据类型.对于这些类型中的null和defined,它俩之间的区别在于,defined为未初始化的数据类型,而null则为初始化了的类型,它的值即为“null”. 2 不同于其他编程语言,javascript语言中的数据类型都是弱类型,通过var关键字就可以声明一个类型的变量.而与其他编程语言一样,jav

前端乱煮之javascript学习笔记四

1 javascript number对象: javascript只有一种数字对象,那就是number.在javascript中,所有的数字都是64位,这一点不同于其他编程语言(类型语言),也就是说,javascript不是类型语言,不分整形.浮点型等等. 整数最多有十五位(不使用小数点或者指数计数法) 小数最多有十七位. 在javascript中,如果数字的第一个数是0,则会被理解为八进制:如果数字的第一个数字是0x,则会被理解为十六进制. 属性: MAX VALUE:最大值 MIN VALU

JavaScript学习笔记(三)——this、原型、javascript面向对象

一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化,当然也可以使用call.apply修改this指向的对象.它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用 1.1.JavaScript中函数与方法的区分 在面向过程的语言中我们习惯把完成某个特定功能的代码块称为“函数”或“过程”,当然过程一般没有返回值.在面向对象语言中我们把对象的功能

JavaScript学习笔记三:JavaScript对象

一.前言 对象的基本概念:Javascript提供了多个内建对象,比如String.Data.Array等等.对象指的是带有属性和方法的特殊数据类型 创建对象:创建JavaScript对象主要有两种不同的方法:第一.定义创建对象的实例:第二,使用函数来定义对象,然后创建新的对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.

JavaScript学习笔记三:基本概念(1)

1. JS中的一切(变量.函数名.操作符等)都区分大小写.--true是boolean值,而True只是标识符. 2. JS语句以分号结尾,但不是必需的,原因: a. 结尾没有分号有时会导致压缩错误. b. 加上分号在某些情况下会为解析器提供方便,增进代码的性能. 3. 不同的ECMAScript版本对关键字和保留字的定义不同,但最好在JS代码中永远都不用任何关键字和保留字,以便与将来的ECMAScript版本兼容. 4. ECMAScript的变量是松散类型的,就是一个变量没有特定的类型限制,

javascript学习笔记(三) string对象中的正则表达式

1. search返回匹配到的位置(-1找不到) var str = 'html js' var pattern = /js/ str.search(pattern)    --------->5 2. Match str.match(pattern) --------['js'] /js/g -----> ["js", "js",,"js"] match vs exec match:非全局的情况下才会返回分组中匹配到的内容,全局匹配

56本前端工程师必备的javaScript学习书籍

分享56本前端工程师必备的javaScript学习书籍(包括了pdf,chm,doc) 1.JavaScript权威指南(第6版)(中文版)2.深入浅出Javascript.O‘reilly.Head.First.Javascript.Jan.20083.JavaScript王者归来月影扫描版4.JavaScript.DOM高级程序设计贝斯扫描版5.精通javascript(图灵计算机科学丛书)6.JavaScript面向对象15分钟教程7.原型.作用域.闭包的完整解释8.Javascript面