【笔记】JavaScript DOM编程艺术-优快云博客

本文深入浅出地介绍了JavaScript中的基本概念，包括弱类型语言的特点、数据类型声明方式、数组及对象的定义方法、变量作用域的区分以及内建对象和宿主对象的应用，并通过实例演示了如何使用DOM操作HTML元素。

关于声明数据类型

JavaScript属于"弱类型语言"，所以在声明变量时不需要声明数据类型。

例：var name = "iSunday";　　// 字符串

　　var age = 20;　　　　　　 // 数值

　　var handsome = true;　　// 布尔值

Java（还有：C语言、.NET等）属于"强类型语言"，所以在声明变量必要声明数据类型。

例：String name = "iSunday";

　　int age = 20;

　　boolean handsome = true;

数组的定义

方法一、var beatles = Array(4);

　　　　beatles[0] = "John";

　　　　beatles[1] = "Paul";

　　　　beatles[2] = "George";

　　　　beatles[3] = "Ringo";

方法二、var beatles = Array("John", "Paul", "George", "Ringo");

方法三、var beatles = ["John", "Paul", "George", "Ringo"];

数组的值可以是变量

var name = "John";

var beatles[0] = name;

数组的值可以是另一个数组的值

var name = ["John", "Paul", "George", "Ringo"];

var beatles[0] = name;

注：向数组添加数据称为"填充"，每个值被分配一个下标，当存储量巨大时不利于脚本的可读性，下面介绍对象；

对象的定义 -每个值都是对象的一个属性

方法一、var lennon = Object();

　　lennon.name = "John";

　　lennon.year = 1940;

　　lennon.living = flase;

方法二、var lennon = { name: "John", year: 1940, living: flase };

提高代码可读性，在此基础上修改

例：var beatles = {};

　　var beatles.vocalist = lennon;

这样我们就可以通过beatles.vocalist.name获得值：John， beatles.vocalist.year获得值：1940， beatles.vocalist.living获得值：flase;

注：使用对象来代替传统数组，意味着可以通过元素名称而不是使用下标来引用它们，大大增加脚本可读性。

变量的作用域 - 全局变量、局部变量

全局变量：可以在脚本的任何位置被引用；

局部变量：只存声明它的那个函数内部，外部无法引用它；

注：在函数中使用var声明的变量则为局部变量，反之则为全部变量。

内建对象

Array()对象就属于JavaScript内建对象中的一种，另外还有Math、Date对象等

例一：Math的round方法可四舍五入一个整数

var num = 5.641;

var num = Math.round(num);

alert(num);　　// 结果是整数6

例二：Date对象提供了getDay()、getHours()、getMonth()等方法

var today = new Date().getDay();

alert("今天是星期：" + today);

宿主对象

由浏览器提供的预定义的对象称为宿主对象，包括Form、Image、Element、document等

DOM -就像浏览器生成的树状结构，从而快速找到HTML元素

D：表示document（文档）

O：表示Object（对象）

M：表示Model（模型）

注：JavaScript要对HTML的某个元素进行修改，添加，移除时，需要的属性和方法是通过DOM来获取的。

如何获得元素的节点？首先了解节点有哪几种。

<!DOCTYPE html>

<html>

　　<head>
　　　　<title>What's you pleasure</title>

　　</head>

　　<body>

　　　　<ul >

　　　　　　<li id="purchases">coffee</li>

　　　　　　<li class="sale">Lemon tea</li>

　　　　</ul>

　　</body>

一、元素节点　　诸如：body、ul、li之类都属于元素节点。

二、文本节点　　例子中的<p>属于文本节点，一般文本节点都被包含在元素节点中，但并非所以都是如此，比如<ul>没包含任何文本元素，而是包含了同是元素节点的<li>。

三、属性节点　　几乎所有元素都可以带有属性，如title、src、href、id、class等属性，这些都是属性节点。

了解节点后，如何获取元素？

DOM有三种方法可以获取元素节点，分别是：getElementById、getElementsByTagName、getElementsByClassName

一、getElementById　　// 通过id属性获取元素

例：alert(typeof document.getElementById("purchases"));　　// 使用typeof操作数可以告诉我们它是一个字符串、数值、函数、布尔值还是对象

二、getElementsByTagName　　// 参数由标签名字获取元素

例：alert(document.getElementsByTagName("li").length);　　// 获取所有元素<li>并计算其个数

三、getElementsByClassName　　// 通过class属性获取元素

例：alert(document.getElementsByClassName("sale").length);　　// 获取元素class属性为sale的个数

获取、设置元素属性，分别是：getAttribute、setAttribute

一、Object.getAttribute(attribute)

例：alert(document.getElementsByTagName("p")[0].getAttribute("title"));　　// 使用getElementsByTagName("p")[0]获取第一个p元素，getAttribute得到title属性。

二、Object.setAttribute(attribute)

例：document.getElementsByTagName("p")[0].setAttribute("title","this is new title");

　　alert(document.getElementsByTagName("p")[0].getAttribute("title");

转载于:https://www.cnblogs.com/iSunday/p/3279976.html