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

# JS语法

  1. 语句
  2. 变量和数组
  3. 操作符
  4. 条件语句和循环语句
  5. 函数和对象

　　## 注释

  1.  // 行注释
  2.  
  3. /* 多行注释
  4.  
  5.    多行注释 */

## 变量

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

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

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

　　## 条件语句

　　　　

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

　　# 函数

　　

  1. function name(arguments) {
  2.  
  3. 　　　　statements;
  4.  
  5. }

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

　　# 变量的作用域

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

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

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

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

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

　　对象：属性 + 方法

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

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

属性，比如

  1. Person.mood
  2. Person.age

方法，比如

  1. Person.walk()
  2. Person.sleep()

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

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

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

  1. var zlj = new Person;

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

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

  1. zlj.age
  2. zlj.mood

DOM

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

# 节点

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

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

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

  1. getElementById

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

  1. document.getElementById (id)

比如

  1. document.getElementById ("purchases")

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

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

2. getElementByTagName

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

  1. document.getElementByTagName (tag)

比如

  1. document.getElementByTagName (“li”)

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

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

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

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

3. getElementByClassName

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

  1. getElementByClassName(class)
  1. 　　比如
  1. document.getElementByClassName("sale")

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

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

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

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

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

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

4. getAttribute

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

  1. 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

它只能用于元素节点。

  1. 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章节。明天见咯~~~

JS DOM 1的更多相关文章

  1. 货架工程项目之js dom实现项目工程进度图

    笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...

  2. js DOM优化相关探索

    我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...

  3. js DOM的几个常用方法

    <div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...

  4. JS DOM 来控制HTML元素

    JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  5. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  6. Js DOM 详解

    DOM事件类 基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...

  7. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

  8. css3动画和JS+DOM动画和JS+canvas动画比较

    css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...

  9. JS(DOM 和 BOM)

    JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...

  10. JS DOM（文档对象模型）与BOM（浏览器对象模型）

    在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...

随机推荐

  1. 【小记录】关于dojo中的on事件

    今天碰到一个现象,若是一个函数中存在一个on事件(例如点击事件),在该函数连续触发两次之后在去触发里面的on事件,会发现改时间所对应的函数被调用了两次,若父函数被连续触发N次后再取触发on事件,其对应 ...

  2. C++中精确到小数点后任意位

    #include <iostream> #include <iomanip> //用setprecision(n)设置精度,其中n表示精确到小数点后n位 using names ...

  3. shell编程报错：“syntax error near unexpected token `”

    今天写了个shell脚本,在自己机器上运行正常,给同事,运行报错syntax error near unexpected token `,左看右看shell脚本没有问题,没有办法google搜索,发现 ...

  4. SQL Server 2017 on Linux

    此文转载,原文地址:https://docs.microsoft.com/zh-cn/sql/linux/sql-server-linux-whats-new CTP 2.0 The CTP 2.0 ...

  5. SVN升级到1.8后 Upgrade working copy

    SVN升级到1.8后没法用了,不能提交,提示说要SVN Upgrade working copy, 但是半天在根目录和.svn所在文件夹上面右键都没有找到这个菜单. 坑爹的…… 最后找到解决办法是:重 ...

  6. ubuntu14.04server版安装redis

    此博客记录首次在ubuntu14.04上安装redis过程. 以下采用两种方式进行安装 方法一:进入redis的官网下载(地址:https://redis.io/download)目前版本为4.0.9 ...

  7. Windows 10 KMS 手工激活

    第一.安装好Win10系统,不需要安装其他激活工具.第二.是删除默认序列号,打开命令提示符(管理员),运行 slmgr.vbs -upk,可提示已卸载了序列号. slmgr /ipk W269N-WF ...

  8. ue-edit设置显示函数列表

    UltraEdit的函数列表竟然不显示函数,那这功能要它何用,应该如何才能让函数显示出来呢? 公司编程基本上都在UltraEdit中进行,俺刚来公司还不熟悉,今天装了个UltraEdit,可是看着别人 ...

  9. Windows下设置Ubuntu引导项

    最近在进行一些实验环境的配置,最终通过双系统实现了多系统的管理,而不仅限于虚拟机的方式.以此方式成功安装了Windows8.1 Pro和Windows 10,原文在此. 在此基础上进一步安装了 Ubu ...

  10. SVG基本图形

    SVG 是使用 XML 来描述二维图形和绘图程序的语言 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML ...