JS DOM 1

2018-10-13 06:28:37来源：博客园阅读 ()

　　接触JS也有快一个月了，现在来总结一下看过的书，一本本总结，之后再融会贯通，也许更有助于学习。废话不多说，现在看的是《JavaScript DOM编程艺术》，该书挺薄的，不太会望而生畏，（要比起《JavaScript权威指南》和《JavaScript高级程序设计》的话）。这篇博文也是接下来两天的重点项目。

# JS语法

语句
变量和数组
操作符
条件语句和循环语句
函数和对象

　　## 注释

 // 行注释

/* 多行注释

   多行注释 */

## 变量

　　JavaScript变量和其它语法元素的名字，区分字母大小写。变量名包括字母、数字、美元符号 $ 和下划线。第一个字符不允许是数字。

## 数据类型：弱类型语言

1. 字符串
2. 数值
3. 布尔值
4. 数组
5. 对象

　　## 条件语句

 1       initialize;
 2 
 3 　　　　while (condition) {
 4 
 5 　　　　　　statements;
 6 
 7 　　　　　　increment;
 8 
 9 　　　　}
10 
11 
12 
13 　　　　for (initial condition; test condition; alter condition) {
14 
15 　　　　　　statements;
16 
17 　　　　}

　　# 函数

function name(arguments) {

　　　　statements;

}

函数的真正价值体现在，我们可以把它们当做一种数据类型来使用，这意味着可以把一个函数的调用结果赋给一个变量。

　　# 变量的作用域

变量既可以是全局的，也可以是局部的。全局变量顾名思义，可以在脚本中的任何位置被引用。而局部变量只能存在于声明它的那个函数的内部，在那个函数的外部是没有办法引用它的。局部变量的作用域仅限于某个特定的函数。

可以使用 var 关键字为函数变量设定作用域。

# 对象：一种自足的数据集合

JS 中的对象可以分为三种类型：

- 用户自定义对象：用户自己创建的
- 内建对象：内建在 JS 语言里的
- 宿主对象：浏览器提供的

　　对象：属性 + 方法

属性：隶属于某个特定对象的变量
方法：只有特定对象才能调用的函数

属性和方法都是用 “点” 语法来表示。

属性，比如

Person.mood
Person.age

方法，比如

Person.walk()
Person.sleep()

为了使用 Person 对象来描述一个特定的人，需要创建一个 Person 对象的实例。实例是对象的具体个体。

比如说，你和我都是人，都可以用 Person 对象来描述；但是我们是不同的个体，很可能有不同的属性（比如，我有女朋友，而你没有）。因此，你和我对应着两个不同的 Person 对象。我们是两个不同的实例。

为给定对象创建一个新的实例需要使用 new 关键字

var zlj = new Person;

这样，我就有对象了。是不是很棒？

上面这条语句就创建了 Person 对象的一个新实例 zlj。我们就可以像下面这样，利用 Person 对象的属性检索关于 zlj 的信息：

zlj.age
zlj.mood

DOM

节点的概念
5个常用 DOM 方法

# 节点

元素节点：像 <body> <head>等，这种构建了 DOM 树的节点，相当于大厦的砖头
文本节点：内容由文本构成，比如 <p> 节点中的字 “Don't fool me” 就是文本节点
属性节点：对元素做出更具体的描述，属性节点总是被包含在元素节点中

为了把某一个或者某一类元素和其他元素区分开，需要使用 class 属性或 id 属性。

# 5种常用的DOM方法，获取元素

getElementById

该方法将返回一个与那个有着给定 id 属性值的元素节点对应的对象。它是 document 对象特有的函数。想要获得的那个元素的 id 属性的值，这个 id 值必须放在单引号或双引号里。

document.getElementById (id)

比如

document.getElementById ("purchases")

这个调用将返回一个对象，这个对象对应着 document 对象里的独一无二的元素，那个元素的 HTML id 属性值是 purchases。

然而，一般说来，用不着为文档里的每一个元素都定义一个独一无二的 id 值，DOM 提供了另一种方法来获取那些没有 id 属性的对象

2. getElementByTagName

　　此方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。

document.getElementByTagName (tag)

比如

document.getElementByTagName (“li”)

这个调用将返回一个对象数组，每个对象分别对应着 document 对象中的一个列表项元素。

getElementByTagName 允许把通配符（*）作为参数，这样就意味着文档里的每个元素都将在这个函数所返回的数组里占有一席之地。通配符需双引号引起来，像这样 “*”。这是为了让通配符与乘法操作有所区别。

如果想知道某个文档里到底有多少个元素节点，这样就行

alert(document.getElementByTagName("*").length);

3. getElementByClassName

这是 H5 DOM 新增的。这个方法让我们能够通过 class 属性中的类名访问元素。只接受一个参数。

getElementByClassName(class)

　　比如

document.getElementByClassName("sale")

使用该方法还可以找到带有多个类名的元素。要指定多个类名，只要在字符串参数中用空格分隔类名即可。

alert(document.getElementByClassName("important sale").length);

此时，你可能会看到跳出的弹框中，表示只有一个元素匹配，因为只有一个元素同时带有 “important” 和 “sale” 类名。即使在元素的 class 属性中，类名的顺序是 “sale important” 而不是参数中指定的顺序，也照样会匹配。不仅类名的顺序不重要，而且就算元素还带有更多类名也没有关系。

此处总结一句话：文档中的每个元素节点都是一个对象。不仅如此，这些对象中的每一个都具有一系列非常有用的方法，归功于DOM。

接下来介绍节点对象的属性和方法。

得到需要的元素以后，我们就可以设法获取它的各个属性。getAttribute 方法就是用来干这个的。相应的，setAttribute 方法则可以更改属性节点的值。

4. getAttribute

　　它是一个函数。它只有一个参数

object.getAttribute (attribute)

getAttribute 不属于 document 对象，所以不能通过 document 对象调用。它只能通过元素节点对象调用。

比如说，可以和 getElementByTagName 方法合用，获取每个 <p> 元素的 title 属性

1 var paras = document.getElementByTagName("p");
2 for (var i=0; i < paras.length; i++) {
3     alert (paras[i].getAttribute("title"));
4 }

具体可敲代码验证。

前面1~4都是用来获取信息。第5个不一样，是用来修改信息。

5. setAttribute

它只能用于元素节点。

object.setAttribute(attribute,value)

比如

1 var shopping = document.getElementById("purchases");
2 shopping.setAttribute("title", "a list of goods");

第一个语句得到了 id 是 purchases 的元素，第二条语句把这个元素的 title 属性值设置为 a list of goods.

明天的任务就是把书上的例子用代码实现一下，并总结跨度应该对应书中的第4~8章节。明天见咯~~~

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：Ajax请求中的async:false/true(同步/异步)的作用

下一篇：JavaScript String对象常用方法

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签