JS DOM 1
接触JS也有快一个月了，现在来总结一下看过的书，一本本总结，之后再融会贯通，也许更有助于学习。废话不多说，现在看的是《JavaScript DOM编程艺术》，该书挺薄的，不太会望而生畏，（要比起《JavaScript权威指南》和《JavaScript高级程序设计》的话）。这篇博文也是接下来两天的重点项目。
# JS语法
- 语句
- 变量和数组
- 操作符
- 条件语句和循环语句
- 函数和对象
## 注释
// 行注释 /* 多行注释 多行注释 */
## 变量
JavaScript变量和其它语法元素的名字，区分字母大小写。变量名包括 字母、数字、美元符号 $ 和下划线。第一个字符不允许是数字。
## 数据类型：弱类型语言
- 字符串
- 数值
- 布尔值
- 数组
- 对象
## 条件语句
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
- 节点的概念
- 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 属性
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的更多相关文章
- 货架工程项目之js dom实现项目工程进度图
笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...
- js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...
- js DOM的几个常用方法
<div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- Js DOM 详解
DOM事件类 基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
- css3动画和JS+DOM动画和JS+canvas动画比较
css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...
- JS(DOM 和 BOM)
JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...
- JS DOM（文档对象模型）与BOM（浏览器对象模型）
在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...
随机推荐
- 【Machine Learning】训练集 验证集 测试集区别
最近在Udacity上学习Machine learning课程,对于验证集.测试集和训练集的相关概念有些模糊.故整理相关资料如下. 交叉检验(Cross Validation) 在数据分析中,有些算法 ...
- ES入门——数组的扩展
1.Array.from() 该方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象,包括ES6新增的数据结构Set和Map.下面是 ...
- 用虚拟信用卡注册Google Play开发者账号
本文首发于http://www.abcdsxg.cn/free/net/562 虚拟信用卡 首先介绍一下虚拟信用卡(Virtual Credit Card),顾名思义,虚拟就是没有实体卡,一般都是在提 ...
- python 小词云
# Author:Alex.wang# Date:2017.06.02# Version:3.6.0 import matplotlib.pyplot as pltfrom wordcloud imp ...
- C# 转换运算符：implicit（隐式），explicit（显示）
//A类 class Cls1 { public string name; //构造函数 public Cls1(string name) { this.name = name; } //implic ...
- 阿里云OSS 上传文件SDK
Aliyun OSS SDK for C# 上传文件 另外:查找的其他实现C#上传文件功能例子: 1.WPF用流的方式上传/显示/下载图片文件(保存在数据库) (文末有案例下载链接) 2.WPF中利用 ...
- awk的简单使用
awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...
- 虚拟机装ubuntu (kylin) 时常遇问题
在想保留Windows操作系统的同时还能用Linux进行学习和开发,安装双系统或安装虚拟机都是不错的选择,依个人情况而定. (P.S:此行留给后期会写的双系统博客) 这篇文章收集了自己在用VMware ...
- C#学习——入门简介
# C#简介 #原版出处点击这里 C#是一个现代的.通用的.面向对象的编程语言,它是由微软(Microsoft)开发的,由Ecma和ISO核准认可的. C#是由Anders Heilsberg和他的团 ...
- Android进阶笔记15：选用合适的IPC方式
1. 相信大家都知道Android进程间通信方式很多,比如AIDL.Messenger等等,接下来我就总结一下这些IPC方式优缺点. 2. IPC方式的优缺点和适用场景 3. 附加:使用Intent实 ...