JavaScript 02 HTML DOM

通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。


HTML DOM (文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被构造为对象的树。


JavaScript 02 HTML DOM_第1张图片
HTML DOM 树

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应


1、查找 HTML 元素    通常,通过 JavaScript,您需要操作 HTML 元素。

为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

通过 id 找到 HTML 元素     在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。例如

查找 id="intro" 元素:     var x=document.getElementById("intro");

通过标签名找到 HTML 元素     例如:

本例查找 id="main" 的元素,然后查找 "main" 中的所有元素:

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素


HTML DOM 允许 JavaScript 改变 HTML 元素的内容。


2、改变 HTML 输出流      JavaScript 能够创建动态的 HTML 内容:

   在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。

 改写出日期:  document.write(Date());


3、改变 HTML 内容      修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容,请使用这个语法

document.getElementById(id).innerHTML=new HTML


4、改变 HTML 属性     如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=new    例如:

valuedocument.getElementById("image").src="landscape.jpg";


HTML DOM 允许 JavaScript 改变 HTML 元素的样式。


5、改变 HTML 样式   如需改变 HTML 元素的样式,请使用这个语法:

document.getElementById(id).style.property=new style    例如:

document.getElementById("p2").style.color="blue";


HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。


我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:

onclick=JavaScript

6、

点击这里

7、HTML 事件属性    如需向 HTML 元素分配 事件,您可以使用事件属性。

8、使用 HTML DOM 来分配事件    HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件

document.getElementById("myBtn").onclick=function(){displayDate()};

9、onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。   例如

10、onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。  例如:

11、

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数

12、onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

13、onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。



14、创建新的 HTML 元素

如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。                 例子解释:

这段代码创建新的

元素:var para=document.createElement("p");

如需向元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:

var node=document.createTextNode("这是新段落。");

然后您必须向元素追加这个文本节点:para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素: var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素:element.appendChild(para);

15、删除已有的 HTML 元素

如需删除 HTML 元素,您必须首先获得该元素的父元素

找到 id="div1" 的元素:var parent=document.getElementById("div1");

找到 id="p1" 的元素:var child=document.getElementById("p1");

从父元素中删除子元素:parent.removeChild(child);

提示:如果能够在不引用父元素的情况下删除某个元素,就太好了。

不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。

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

var child=document.getElementById("p1");

child.parentNode.removeChild(child);



JavaScript 对象


JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...,JavaScript 允许自定义对象。JavaScript 提供多个内建对象,比如 String、Date、Array 等等。

对象只是带有属性方法的特殊数据类型。


16、访问对象的属性     属性是与对象相关的值。

访问对象属性的语法是:objectName.propertyName

这个例子使用了 String 对象的 length 属性来获得字符串的长度:

var message="Hello World!";var x=message.length;  结果:12

17、访问对象的方法    方法是能够在对象上执行的动作。

您可以通过以下语法来调用方法:objectName.methodName()

这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写:

var message="Hello world!";var x=message.toUpperCase();

18、创建 JavaScript 对象    通过 JavaScript,您能够定义并创建自己的对象。

创建新对象有两种不同的方法:

---定义并创建对象的实例

---使用函数来定义对象,然后创建新的对象实例

19、创建直接的实例    这个例子创建了对象的一个新实例,并向其添加了四个属性:

person = new Object();

person.firstname="nongbu";

person.age=18;

person.lastname="zhang";

person.egecolor="yellow";

替代语法(使用对象 literals):

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

20、使用对象构造器  本例使用函数来构造对象:

function person(firstname,lastname,age,eyecolor)

{     this.firstname=firstname;

    this.lastname=lastname;

    this.age=age;

   this.eyecolor=eyecolor;     }

一旦您有了对象构造器,就可以创建新的对象实例,就像这样:

var myFather=new person("Bill","Gates",56,"blue");

var myMother=new person("Steve","Jobs",48,"green");


JavaScript 类

JavaScript 是面向对象的语言,但 JavaScript 不使用类。

在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。     JavaScript 基于prototype,而不是基于类的


21、JavaScript for...in 循环      JavaScript for...in 语句循环遍历对象的属性

       for (对象中的变量)      {   要执行的代码    }

注释:for...in 循环中的代码块将针对每个属性执行一次。

22、JavaScript 数字    JavaScript 只有一种数字类型。

极大或极小的数字可通过科学(指数)计数法来写:

var y=123e5;// 12300000var z=123e-5;// 0.00123

JavaScript 数字可以使用也可以不使用小数点来书写:

var pi=3.14;// 使用小数点      var x=34;//没使用小数点

23、所有 JavaScript 数字均为 64 位

JavaScript 不是类型语言。与许多其他编程语言不同,JavaScript 不定义不同类型的数字,比如整数、短、长、浮点等等。

JavaScript 中的所有数字都存储为根为 10 的 64 位(8 比特),浮点数。

24、八进制和十六进制

如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。  例如:var y=0377;              var z=0xFF;

25、数字属性和方法

属性:

MAX VALUE;   MIN VALUE;    NEGATIVE INFINITIVE;     POSITIVE INFINITIVE;

NaN; prototype; constructor;

方法:

toExponential();    toFixed();    toPrecision();   toString();   valueOf();

26、indexOf() 方法    match()方法

如何使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。

如何使用 match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符

27、如何使用 replace() 方法在字符串中用某些字符替换另一些字符

var str="Visit Microsoft!"

document.write(str.replace(/Microsoft/,"W3School"))

28、如何使用 Date() 方法获得当日的日期 :document.write(Date())

getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

var d=new Date();

document.write("从 1970/01/01 至今已过去 " + d.getTime() + " 毫秒");

如何使用 setFullYear() 设置具体的日期。

var d = new Date();     d.setFullYear(1992,10,3);   document.write(d);

29、定义日期

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

可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象:

var myDate=newDate()     注释:Date 对象自动使用当前的日期和时间作为其初始值。

30、操作日期

通过使用针对日期对象的方法,我们可以很容易地对日期进行操作。

在下面的例子中,我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日):

var myDate=new Date();       myDate.setFullYear(2008,7,9)

注意:表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为 8 月,则参数应该是 7。

在下面的例子中,我们将日期对象设置为 5 天后的日期:

var myDate=new Date();      myDate.setDate(myDate.getDate()+5)

注意:如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。

31、比较日期

日期对象也可用于比较两个日期。下面的代码将当前日期与 2008 年 8 月 9 日做了比较:

var myDate=new Date();

myDate.setFullYear(2008,8,9);

var today = new Date();

if (myDate>today)           {       alert("Today is before 9th August 2008");    }

else         {          alert("Today is after 9th August 2008");          }


JavaScript Array(数组)对象JavaScript Array(数组)对象


数组对象的作用是:使用单独的变量名来存储一系列的值。


32、定义数组

数组对象用来在单独的变量名中存储一系列的值。

我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象:

var myArray=new Array();

有两种向数组赋值的方法(你可以添加任意多的值,就像你可以定义你需要的任意多的变量一样)。

(1)、var mycars=new  Array( )

mycars[0]="Saab";mycars[1]="Volvo";mycars[2]="BMW;

也可以使用一个整数自变量来控制数组的容量

var mycars=new Array(3);

mycars[0]="Saab"  ;mycars[1]="Volvo"; mycars[2]="BMW";

(2)var mycars=new Array("Saab","Volvo","BMW");

注意:如果你需要在数组内指定数值或者逻辑值,那么变量类型应该是数值变量或者布尔变量,而不是字符变量。

33、访问数组       通过指定数组名以及索引号码,你可以访问某个特定的元素。

    document.write(mycars[2]);

     修改已有数组中的值   如需修改已有数组中的值,只要向指定下标号添加一个新值即可:

   mycars[0]="Opel";

34、如何使用 concat() 方法来合并两个数组

var arr = new Array(3)  ;      var arr2 = new Array(3)

var arr3 = new Array();    arr3 = arr.concat(arr2);//合并

35、如何使用 join() 方法将数组的所有元素组成一个字符串。

var arr = new Array(3);
 arr[0] = "George";   arr[1] = "John"; arr[2] = "Thomas"

var  j =join("666"); document.write(j);

输出结果是:George666John666Thomas

36、如何使用 sort() 方法从字面上对数组进行排序。数组可以是数字的,也可以是文字的

arr.sort();  直接调用,然后直接输出

如果是数字:document.write(arr.sort(sortNumber))


JavaScript Boolean(逻辑)对象


Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。


Boolean 对象

您可以将 Boolean 对象理解为一个产生逻辑值的对象包装器。

Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。


37、创建 Boolean 对象

使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象:  var myBoolean=new Boolean()

注释:如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!

38、JavaScript Math(算数)对象 Math(算数)对象的作用是:执行常见的算数任务。


Math 对象     Math(算数)对象的作用是:执行普通的算数任务。

Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。


算数值     JavaScript 提供 8 种可被 Math 对象访问的算数值:

常数 、圆周率、2 的平方根、1/2 的平方根、2 的自然对数、10 的自然对数、

以 2 为底的 e 的对数、以 10 为底的 e 的对数

这是在 Javascript 中使用这些值的方法:(与上面的算数值一一对应)

Math.E、Math.PI、Math.SQRT2、Math.SQRT1_2、Math.LN2、Math.LN10、Math.LOG2E、Math.LOG10E

39、算数方法   除了可被 Math 对象访问的算数值以外,还有几个函数(方法)可以使用。

函数(方法)实例: 下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入

 document.write(Math.round(4.7))    输出结果是:5

下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数:

document.write(Math.random())   输出的结果是:0.995552

下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数:3

最大值max(多个参数)     document.write(Math.max(5,7) +
"

最小值min(多个参数)       document.write(Math.min(5,7) +
"


JavaScript RegExp 对象


什么是 RegExp?      RegExp 是正则表达式的缩写。

当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。  您可以规定字符串中的检索位置,以及要检索的字符类型,等等


RegExp 对象用于存储检索模式。

通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象,其模式是 "e":  var patt1=new RegExp("e");

当您使用该 RegExp 对象在一个字符串中检索时,将寻找的是字符 "e"。


40、RegExp 对象的方法

RegExp 对象有 3 个方法:test()exec() 以及 compile()

test()

test() 方法检索字符串中的指定值。返回值是 true 或 false。例如:

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));  返回值:true

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。例如:var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free"));

41、compile()     方法用于改变 RegExp。

compile() 既可以改变检索模式,也可以添加或删除第二个参数。

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

由于字符串中存在 "e",而没有 "d",以上代码的输出是:truefalse

更多关于RegExp资料   请点击


你可能感兴趣的:(JavaScript 02 HTML DOM)