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

# JS语法

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

　　## 注释

 // 行注释

/* 多行注释

   多行注释 */

## 变量

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

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

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

　　## 条件语句

　　　　

       initialize;

 　　　　while (condition) {

 　　　　　　statements;

 　　　　　　increment;

 　　　　}

 　　　　for (initial condition; test condition; alter condition) {

 　　　　　　statements;

 　　　　}

　　# 函数

　　

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

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

# 节点

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

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

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

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

 var paras = document.getElementByTagName("p");

 for (var i=0; i < paras.length; i++) {

     alert (paras[i].getAttribute("title"));

 }

具体可敲代码验证。

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

5. setAttribute

它只能用于元素节点。

object.setAttribute(attribute,value)

比如

 var shopping = document.getElementById("purchases");

 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. 22_CopyOnWrite容器

    [简述] Copy-On-Write简称COW,是一种程序设计中的优化策略. JDK里的COW容器分为两种:CopyOnWriteArrayList 和 CopyOnWriteArraySet. Co ...

  2. Nancy使用Razor视图引擎时，提示对C:\Windows\temp 没有权限访问的问题

    Nancy下使用Razor视图需要添加DLL文件引用,通过Nuget安装: 发布网站,在IIS上建立站点后,提示错误:对C:\Windows\temp\XXXX 的访问被拒绝(在VS里F5调试的时候没 ...

  3. .Net程序员应该掌握的正则表达式

    Regular Expression Net程序员必然要掌握正则的核心内容:匹配.提取.替换.常用元字符. 正则表达式是用来进行文本处理的技术,是语言无关的,在几乎所有语言中都有实现. 常用元字符 . ...

  4. lvm 相关

    求教:/home分区和/root分区的关系 lvm扩容试验 [复制链接] lvm快速使用http://imysql.cn/2008_05_05_quick_startup_lvm Linux LVM学 ...

  5. 学会利用Ionic官网文档

    和任何新技术一样,ionic也提供了详细的官方文档说明.网址如下: http://ionicframework.com/docs/ 学会使用ionic控件 ionic提供了大量优秀的高性能的仿原生控件 ...

  6. Word 启动模板文件

    运行窗口输入:%appdata%\microsoft\templates

  7. vagrant安装centos7

    1. 安装VirtualBox 去官网https://www.virtualbox.org/wiki/Downloads下载最新版的Virtualbox,然后双击安装,一直点击确认完成. 2. 安装V ...

  8. Redis入门实例(Redis+Sprint+maven创建工程)

    一.>创建一个maven工程应用和相关配置:Redis_study,创建工程应用过程略 1.>配置pom.xml:文件内容如下 <project xmlns="http:/ ...

  9. 显示锁（ReentranLock）

    1. Lock接口:定义了一组抽象的加锁操作,提供了一种无条件的.可轮询的.定时的以及可中断的锁获取操作,所有的加锁和解锁的方法都是显示的. 2. ReentrantLock锁:实现了Lock接口,并 ...

  10. 区间DP学习总结

    这段时间学习了区间DP,所以试着把学到的东西稍作总结,以备不时之需. 学习区间DP首先要弄清区间DP是为了解决什么问题:一般的DP主要是特征是一次往往只操作一个数值或者存储可以不连续的物品的状态(比如 ...