【问题】If some one handed me 一个对象，那我有没有得到这个对象中包含的所有的属性办法？
【回答】
/* 使用for in来遍历得到对象的属性*/
for (var i in car) {
var car = {
};
===================================
不知不觉，我学习《Head First JavaScript》已经来到了DOM这个章节了，虽然在上课的时候，这些已经讲过了，但我在课堂上对这些知识的理解仍不够OK，所以，希望，新的一章能够带给我惊喜吧！
大二第一学期开学之前，我就开始接触了这本书，可以说是这本书带着我入门的，没有它带我入门的话，估计在新学期所要学的JavaScript我会有可能因为是新知识，新挑战而无法轻易接受，更有可能影响一整个学期的心情。幸好，有了这本书，幸好在开学前我接触到了这本书。
这段时间也让我懂得了一些道理，凡事就应该要有备而无患。
下面是我对新章节的笔记：
"DOM"这个初听起来，感觉很高端的样子。我之前在一本叫做《疯狂的程序员》的书中便看到这个词，我以为这是他们行业中某个领域的专有的名词，高大上到我只能仰望。但其实不是这样的。
"DOM"的全称是 Document Object Model. 光从字面上理解起来，就可以发现，我们也随着这个"高大上"的词高大上起来了。
我们知道，HTML是标记语言，一般是静态的页面，而JavaScript是程序设计语言，可以写出有顺序先后，逻辑性强等等的代码，JS(为了方便一点，以下所有的"JavaScript"我都称为JS，貌似本来就可以这么称呼的...)与HTML结合使用，还可以使页面更好地用户交互的，从而使得静态页面上升到动态的页面。在HTML文件中嵌入script标签可以建立起HTML与JS之间的联系，但是，他们之间是以什么方式来进行沟通的呢?在书中说是通过DOM来代表我们的HTML页面，转而以DOM向JS互联沟通。
那DOM是如何出现的呢？为了熟悉这个看似高大上的名词，我们【书本和我还有感兴趣的你们】进行了一下探讨：
-
当你的浏览器加载一个HTML页面时，浏览器在解析HTML标签语句的同时，还会显示在浏览器的窗口中。但是更接近DOM的一方面，浏览器还会创建了一些列能够代表我们的HTML标签的对象，这些对象就存放在了DOM里面。
html
|
-----------------------
| |
head body
| |
----------- -----------------
| | | | |
title script h1 h2 p
...........- 当页面加载完成后，相应地，浏览器也产生了一系列与页面标签对应的对象元素，这些对象元素存放在DOM（Document Object Model）中，于是，JS通过访问DOM中的对象元素就可以获取到该对象所代表的html标签，比如：
HTML页面中有一个段落<p><p>Hello! JS!</p>假设现在上面的html已被浏览器加载完成，那么就存在一个与上面的<p>标签对应的对象元素，这个元素属于DOM模型中的一员，JS可以通过访问这个对象来访问<p>标签，从中，也可以得到段落<p>里面的内容"Hello! JS!" JS如何获取到DOM中已存在的对象元素呢？ 后面会继续提到。。 - JS通过DOM获取到了元素，便可以对元素本身所包含的信息进行查看，或者设置。更厉害的，JS让DOM创建元素，删除元素。怎么回事呢？简单说明一下：
DOM创建元素：增加与新添元素对应的html标记到html页面中。 DOM删除元素：删除掉html文件中对应的标签。 如何做到的呢？ 后面就会提到了。。。 - 当页面加载完成后，相应地，浏览器也产生了一系列与页面标签对应的对象元素，这些对象元素存放在DOM（Document Object Model）中，于是，JS通过访问DOM中的对象元素就可以获取到该对象所代表的html标签，比如：
探讨结束！JS通过访问DOM中的元素来得到html文件中类似"p","h1"<span>,<input>,<div>.<table>等等之类的标签的访问。从中对标签进行查看以及修改。
于是，他们之间的沟通就是这样在进行着...
==============================
上面我总是说"JS通过DOM可以获取到什么什么"，是否依然感到疑惑，DOM这个词倒是接触得多了，可具体什么含义呢？
"获取"又是如何做到的呢？
下面做一点个人理解补充：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My blog</title>
<script src="blog.js"></script>
</head>
<body>
<h1>My blog</h1>
<div id="entry1">
<h2>Great day bird watching</h2>
<p id = "para">
Today I saw three ducks!
I named them
Huey, Louie, and Dewey.
</p>
<p>
I took a couple of photos...
</p>
</div>
</body>
</html>
浏览器通过加载上面的html代码之后就会产生一个完整的页面了。
在JavaScript中有一个内置对象是 document。
这个内置对象document就相当于是浏览器所加载完成的页面，也相当于document对象拥有这个对象的DOM树(如果不理解DOM树可以参考个人画的DOM树图，也可以自行百度更多详细信息)。
JS访问到DOM中的节点是如何做到？
答：JS使用的内置对象document中的getElementById方法，参数是节点的id。如上HTML代码中的id 为 "entry1"的div标签，JS要想获取这个标签，可以这么做：
document.getElementById("entry1");
提示，document对象有一系列，很多的getElement方法可以获取到DOM树中的节点元素，对应HTML页面的各个标签。比如<div><p><ul><li><img>等等等等.
JS获取到了页面文档的节点元素之后，我们可以通过JS代码来实现出许多有趣的功能。
【案例一】更改段落节点的内容
描述：我们有一个HTML文档，<body>标签中仅有一个<p>标签，<p>标签里面的内容为"HelloWorld!"
我们的目的是将<p>标签的文本内容"HelloWorld!"替换为"HelloJs!"
怎么实现呢？
<html>
<head>
<title>Update the content of element</title>
<script src = "exp_1.js" type = "text/JavaScript"></script>
</head>
<body>
<p id = "target">HelloWorld!</p>
</body>
</html>
上面给出了HTML代码部分：用浏览器打开这个html文件，能看到的只是<p>标签带来的HelloWorld!
下面，我们使用JS代码来改变这个<p>标签的内容：
// window.onload = function () {}; 这个的作用是等待页面加载完成了之后，执行该匿名函数
window.onload = function () {
var ele = document.getElementById("target"); // 获取到DOM中id为target的元素，即对应页面文档中的<p>标签
ele.innerHTML = "HelloJs!"
// OK! END~
};
上面的JS代码实现了修改<p>标签的内容这个小功能。
步骤：
- document对象获取了一个指向DOM中id = "target"元素(<p>标签)的引用。并将这个引用赋值给变量ele.(意味着ele也可以操作这个id = target的元素)
- 使用元素的属性innerHTML对DOM中id = "target"的元素进行内容的更改，这一点点改动，会直接影响到浏览器中的页面，使得浏览器中的页面也发生了变动。即“HelloWorld!”变为"HelloJs!"
Q:当我使用document的getElementById方法时，传入了一个不存在的id，会出现什么结果？
A：我们知道，getElementById方法会找到DOM中id与该方法所得到的参数相同的元素，并返回。那如果这个ID本身是不存在的，那么，这个方法将返回null。
从这本书中，我知道了getElement系列方法的getELementsByClassName()的方法，这个方法将会返回一个集合。
Q：一个我比较模糊的概念，element object元素对象（DOM中）到底是什么？
A:这个问题也是最近一直困扰着我。
we're just assigning the function value to the window.onload property.
一个问题，我们写的JS代码是放在<head>标签中的，而<head>标签又是比<body>标签还要快执行的，就是说在JS执行document.getELementByID("xxx")的时候，页面<body>标签中的代码一句都未被执行，则页面并没有完全加载完成，也就是说DOM树结构也并未建立起来。DOM中不存在id = “xxx”的元素对象。
那怎么办呢？眼睁睁地看着浏览器报错吗？我明明在<body>里面有id = "xxx"的那个标签呀！
莫着急，下面我们来解决问题，上面是说浏览器会先执行位于<body>前面的<head>对不对，那么，在执行head中的<script>标签里的代码时，网页还没有完全加载出来，此时DOM结构还是不完整的。所以无论在JS如何去查找那个id = "xxx" 的元素，也是白费功夫，因为DOM还未建立，id = "xxx"的元素对象也就无法出现在DOM中。导致查找语句最终总是返回null.
怎么来解决这个问题呢？
答案是，我们需要告诉浏览器说，我要等你将整个页面执行完了之后再来执行我的代码 document.getElementByID("xxx");
好，浏览器这时就对我们说了：“那这好办啊,你可以将你那些需要在页面加载完毕后在执行的代码封装在一个函数中，然后将这个函数复制给我的onload属性就好了。”
操作如下：
function init () {
document.getElementByID("xxx");
}
window.onload = init;
任何一个DOM元素都有一个setAttribute方法
每一个DOM元素都会有自己的各个属性以及对应的属性值，一般在HTML页面中比如一个<p>标签可以有id属性，可以有class属性，align属性等等，可以在HTML页面代码中直接指定其属性值。在JS代码中想要为其中某个属性赋值，可以使用setAttribute()方法。
使用方法如下：
元素.setAttribute("属性名"， "属性值");
例子：
```JavaScript
<html>
<head>
<meta charset = 'utf-8'>
<title>...</title>
<!-- CSS部分 -->
<style>
.eg {
color:red;
}
</style>
<script>
window.onload = function () {
var p = doucment.getElementByID("pp");
p.setAttribute("class", "eg");
}
</scirpt>
</head>
<body>
<p id = "pp">我是一个段落，我是被JS代码修改属性“class”的值后，才会变成红色的。</p>
</body>
</html>
```
想知道元素中某个属性的值？
没问题，我们有另外一个方法 getAttribute:
元素.getAttribute("元素的属性名");
假如元素中不存在我们要查找的属性名，则执行getAttribute方法
不知不觉，我就把这一章节————DOM编程看过去了，将要进入新的章节。
【问题】如何检验一个变量（或者是数组元素，对象属性）是否未实例化呢？
【回答】
```JavaScript
var i; // 这里定义了一个未实例化的变量i,此时i没有实际的值，所以其类型为undefined
if (i == undefined) {
// i isn't defined! just deal with it.
}
要注意undefined与"undefined"之间是由着天大的差别的。
在JavaScript中使用NaN -- not a number 来表示一个不可计算，不可描述的数值类型。如 0 / 0 的结果计算出来本身就是一个错误的不可计算的结果，所以0/0的结果在JavaScript中等于NaN.
但奇怪的是，如果那NaN与NaN去比较，会得出这样的一个结果：
NaN != NaN;
isNaN(xx)
如果xx参数的值不是一个数字，那么isNaN()方法会返回真。
进入下一个笔记点
观察下面的代码，你认为会输出那个：
if (99 == "99") {
console.log("A number equals a string!");
} else {
console.log("No way a number equals a string");
}
太天真了，我以为肯定会执行else分支的，毕竟数字怎么可能等于一个字符串嘛.
原来，JavaScript与其他的编程语言不同，JavaScript可以在连个不同类型的变量进行比较(compare)时，会自动将一个变量类型转换为与之比较的类型的变量。
Case1 数值型变量与字符型变量之间的比较
if (99 == "99") {
return true;
}
上面的小段程序是成立的。JavaScript会自动将字符串"99"转换为数值型99，,然后再进行比较,此时两个数值类型99当然相等了，那么就各异返回真了。
Case2 数值型变量与布尔型变量比较的情况：
1 == true； // 左边为数值型，右边为true，布尔型
// JavaScript自动将布尔类型 true/false 分别转换成为 1/0. 所以 1 == true 也就相当于：
1 == 1； // 该表达式成立即1 == true 成立。
Case3 字符串类型变量与布尔类型变量一起比较
"1" == true; // ???
首先JavaScript会自动将true转换为1,得到 "1" = 1;
此时一边为字符串类型的"1"，而另一边则是数值类型的1,那么JavaScript会把字符串类型"1" 变为 数值类型1，得到
1 = 1； // 表达式两边的变量类型是相等的，所以该表达式可以返回true.
=== 的作用：
在比较表达式两边变量类型相同、值相同之后，会返回true.
=============
console.log(1.2 == "1.2");
VM1962:1 true
=============
=============
console.log("true" == true);
VM1987:1 false
JS 将 true 转换为1，得到
"true" == 1; // ???
Js将字符串"true"转换为数字，但是转换失败得到NaN
所以，
NaN == 1; // false
所以"true" == true,该表达式无法成立。
=============
=============
虽然说JavaScrit有这种操作符"==="，但是JavaScript不存在类似的 <== 或者 >== 等操作符。
不过 === 相对应的是 !==
=== 的作用是检查等式两边的变量是受类型相同且值相等。
!== 的作用与 === 相反。
=============
=============
console.log("1" < "2");
VM2012:1 true
undefined
console.log("1" > "2");
VM2013:1 false
undefined
=============
console.log("mango" > "banana");
VM2038:1 true
字符串之间的大小比较是通过其首字母来比较的，那么我又下列疑问：
"m1" < "m2" ???
动手尝试一次：
console.log("m1" < "m2");
VM2070:1 true
=============
11月份的到此结束了，11月我在党组织的领导下，观看视频，接受培训课程，参观红色基地，写了不少材料。这个月过得，有意义但却容易失去。我做总结的习惯仍然没有完全养成。。。今天是校运动会，我与社团的其他同学一起去参加录入运动员成绩的工作，虽然做的事情有时候会单调，可不知道为什么，我却感受到其中的一些意义，光学会专业并不会是一艘直达终点的小船，有时为了能更快，更省力到达终点，我们要学会使用工具，船桨，路线图等等。我们需要其他方面的丰富的知识来做辅助，才有可能做到心中所想。
网友评论