JavaScript笔记（二）
JavaScript笔记（二）
6 文档对象
6.1 document对象简介
前两章，我们已经把window对象详细给大家探讨了一遍。这次我们介绍另一个网页中核心的对象：“document对象”。
注意：document对象是window对象中的子对象。
谈到document对象，其实我们在之前的课程中已经接触很多次了。还记得document.write()吗？这就是document对象的一个方法。
document对象除了write()方法外，跟其他对象一样，也有自身一套属性和方法。
document对象，即文档对象。顾名思义，其实很好理解，文档对象嘛，操作的都是HTML文档。为了更好理解什么叫“HTML文档”，请看一下CSS入门教程中“正常文档流”这一节。
6.1.1 document对象属性
| 属性 | 说明 |
|---|---|
| title | 文档标题，即title标签内容 |
| URL | 文档地址 |
| fileCreateDate | 文档创建日期 |
| fileModifiedDate | 文档修改时间（精确到天） |
| lastModified | 文档修改时间（精确到秒） |
| fileSize | 文档大小 |
| fgColor | 定义文档的前景色 |
| bgColor | 定义文档的背景色 |
| linkColor | 定义“未访问”的超链接颜色 |
| alinkColor | 定义“被激活”的超链接颜色 |
| vlinkColor | 定义“访问过”的超链接颜色 |
6.1.2 document对象方法
| 方法 | 说明 |
|---|---|
| document.write() | 输入文本到当前打开的文档 |
| document.writeIn() | 输入文本到当前打开的文档，并添加换行符“\n” |
| document.getElementById() | 获取某个id值的元素 |
| document.getElementsByName() | 获取某个name值的元素，用于表单元素 |
上面列出了document对象常用的属性和方法，跟window对象的学习一样，在JavaScript入门阶段，站长只会给大家讲解最实用的。对于那种压根儿用不上的，我也懒得花时间去写。
6.2 训练题（1）网页动态标题
在浏览网页的时候，我们经常看到不少网页标题在闪动。这一节我们给大家讲解一个实际开发中的技巧“网页动态标题”。
实现代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script type="text/javascript">//定义全局变量，用于标识var flag = 0;window.onload = function () {//定时器setInterval("titleChange()", 1000);}//定义函数function titleChange() {if(flag==0){document.title = "★☆★绿叶学习网★☆★";flag = 1;}else{document.title = "☆★☆绿叶学习网☆★☆";flag = 0;}}</script>
</head>
<body>
</body>
</html>
在浏览器预览效果如下：
分析：
这个例子使用在线测试不会有效果，请大家在本地编辑器中测试预览。
这里主要使用了页面加载事件window.onload和JavaScript定时器。算法很简单，只要使用了一个全局变量作为标识。
7 DOM对象
DOM，全称“Document Object Model（文档对象模型）”，它是由W3C组织定义的一个标准。
很多书籍一上来就大篇幅地展开说明DOM的历史和定义，看了老半天也不知道DOM是什么鬼。在这里，关于DOM的风流逸事就不展开了，免得初学者看得一头雾水，也浪费时间。
在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。
说白了，DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等。这下大家就懂了吧。
记住，DOM就是文档对象模型，文档对象模型就是DOM，很多人在学习DOM的时候看到“文档对象模型”还不知道是什么？= =||
在DOM学习中，记住最重要的一句话：每一个元素节点都看成一个“对象”。由于元素节点也是一个对象，因此他们有自身的属性和方法。
7.1 DOM节点属性
| 属性 | 说明 |
|---|---|
| parentNode | 获取当前节点的父节点 |
| childNodes | 获取当前节点的子节点集合 |
| firstChild | 获取当前节点的第一个子节点 |
| lastChild | 获取当前节点的最后一个子节点 |
| previousSibling | 获取当前节点的前一个兄弟节点 |
| nextSibling | 获取当前节点的后一个兄弟节点 |
| attributes | 元素的属性列表 |
7.2 DOM节点操作
在JavaScript中，可以通过以下2种方式来选中指定元素：
7.2.1 getElementById()；
在JavaScript中，如果想通过id来选中元素，我们可以使用document对象的getElementById()方法。
getElementById()方法类似于CSS中的id选择器。
语法：
document.getElementById("元素id");
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
</head>
<body><div id="lvye">绿叶学习网JavaScript入门教程</div><script type="text/javascript">var e = document.getElementById("lvye");e.style.color = "red";</script>
</body>
</html>
在浏览器预览效果如下：
分析：
这里使用document.getElementById()的方法获取id为lvye的div元素，然后把这个DOM对象赋值给变量e，然后使用DOM对象的style对象来设置div元素颜色为红色。
7.2.2 getElementsByName()；
在JavaScript中，如果想通过name来选中元素，我们可以使用document对象的getElementsByName()方法。
语法：
document.getElementsByName("表单元素name值");
说明：
getElementsByName()方法都是用于获取表单元素。
与getElementById()方法不同的是，使用该方法的返回值是一个数组，而不是一个元素。因此，我们想要获取具体的某一个表单元素，就必须通过数组下标来获取。
注意，是getElementsByName()而不是getElementByName()。数组嘛，当然是复数。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
</head>
<body><input name="web" id="radio1" type="radio" value="HTML"/><input name="web" id="radio2" type="radio" value="CSS"/><input name="web" id="radio3" type="radio" value="JavaScript"/><input name="web" id="radio4" type="radio" value="jQuery"/><script type="text/javascript">alert(document.getElementsByName("web")[0].value);</script>
</body>
</html>
在浏览器预览效果如下：
分析：
getElementsByName()方法在实际开发中比较少用，大家了解一下即可。
其实可以这样说， getElementById()和getElementsByName()这两种方法是“JavaScript选择器”。
除了getElementById()和getElementsByName()这两种方法，JavaScript还提供另外一种getElementByTagName()方法，这个方法类似于CSS中的元素选择器。但是getElementByTagName()方法有个很大缺点，它会把整个页面中相同的元素都选中。用起来也比较麻烦，实际开发中很少用到。
7.2.3 创建节点
在JavaScript中，创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点，然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去。
语法：
var e = document.createElement("元素名");
var txt = document.createTextNode("元素内容");
e.appendChild(t); //把元素内容插入元素中去
7.2.4 插入节点
在JavaScript中，插入节点有2种方法：appendChild()和insertBefore()。
（1）appendChild()
在JavaScript中，我们可以使用appenChild()方法把新的节点插入到当前节点的“内部”。
语法：
obj.appendChild(new)
说明：
obj表示当前节点，new表示新节点。
（2）insertBefore()
在JavaScript中，我们可以使用insertBefore()方法将新的子节点添加到当前节点的“末尾”。
语法：
obj.insertBefore(new,ref)
说明：
obj表示父节点；
new表示新的子节点；
ref指定一个节点，在这个节点前插入新的节点。
7.2.5 删除节点
在JavaScript中，我们可以使用removeChild()方法来删除当前节点下的某个子节点。
语法：
obj.removeChild(oldChild);
说明：
参数obj表示当前节点，而参数oldChild表示需要当前节点内部的某个子节点。
7.2.6 复制节点
在JavaScript中，我们可以使用cloneNode()方法来实现复制节点。
语法：
obj.cloneNode(bool)
说明：
参数obj表示被复制的节点，而参数bool是一个布尔值，取值如下：
（1）1或true：表示复制节点本身以及复制该节点下的所有子节点；
（2）0或false：表示仅仅复制节点本身，不复制该节点下的子节点；
7.2.7 替换节点
在JavaScript中，我们可以使用replaceChild()方法来实现替换节点。
语法：
obj.replaceChild(new,old)
说明：
obj，表示被替换节点的父节点；
new，表示替换后的新节点；
old，需要被替换的旧节点。
7.2.8 innerHTML和innerText
在JavaScript中，我们可以使用innerHTML和innerText这2个属性很方便地获取和设置某一个元素内部子元素或文本。
innerHTML属性被多数浏览器所支持，而innerText只能被IE、chrome等支持而不被Firefox支持。
7.2.9 JavaScript操作CSS样式
在JavaScript中，对于元素的CSS操作，我们使用的是DOM对象中的style对象来操作。
语法：
obj.style.属性名;
说明：
obj指的是DOM对象，也就是通过document.getElementById()等获取而来的DOM元素节点。
8 JavaScript对象
8.1 事件含义
在JavaScript中，事件往往是页面的一些动作引起的，例如当用户按下鼠标或者提交表单，甚至在页面移动鼠标时，事件都会出现。
8.2 JavaScript事件
在JavaScript中，调用事件的方式共有2种：
（1）在script标签中调用；
在script标签中调用事件，也就是在<script></script>标签内部调用事件。
语法：
var 变量名 = document.getElementById("元素id");//获取某个元素，并赋值给某个变量
变量名.事件处理器 = function()
{……
}
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
</head>
<body><input id="btn" type="button" value="提交" /><script type="text/javascript">var e = document.getElementById("btn");e.onclick = function () {alert("绿叶学习网");}</script>
</body>
</html>
在浏览器预览效果如下：
分析：
当点击了按钮之后，JavaScript就会调用鼠标的点击（onclick）事件，效果如下：
很多人觉得很奇怪，document.getElementById()获取的是一个元素，能赋值给一个变量吗？答案是可以的。那问题又来了，为什么要使用document.getElementById()来获取一个元素赋值给一个变量呢？用以下代码不行么？
<script type="text/javascript">document.getElementById("btn").onclick = function{alert("绿叶学习网");}</script>
其实上述代码也是可行的，只不过呢，如果不使用document.getElementById()来获取一个元素赋值给一个变量，以后我们如果要对该元素进行多次不同操作，岂不是每次都要写document.getElementById()？这样的话，代码就会显得很冗余。
（2）在元素中调用；
在元素事件中引入JS，就是指在元素的某一个属性中直接编写JavaScript程序或调用JavaScript函数，这个属性指的是元素的“事件属性”。
举例1：（在元素事件属性中直接编写JavaScript）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
</head>
<body><input type="button" onclick="alert('绿叶学习网')" value="按钮"/>
<body>
</html>
在浏览器预览效果如下（点击按钮后的效果）：
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script type="text/javascript">function alertMessage(){alert("绿叶学习网");}</script>
</head>
<body><input type="button" onclick="alertMessage()" value="按钮"/>
<body>
</html>
在浏览器预览效果（点击按钮后的效果）如下：
分析：
那么这两种方法有什么本质的区别呢？其实，第2种方法不需要使用getElementById()等方法来获取DOM，然后才调用函数或方法。因为它是直接在JavaScript元素中调用的。
这2种调用JavaScript事件的方式，大家刚刚开始看不理解没关系，我们只是给大家说个语法，留个印象。在接下来的章节中，我们会经常接触。
1、鼠标事件
| 事件 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| ondbclick | 鼠标双击事件 |
| onmouseover | 鼠标移入事件 |
| onmouseout | 鼠标移出事件 |
| onmousemove | 鼠标移动事件 |
| onmousedown | 鼠标按下事件 |
| onmouseup | 鼠标松开事件 |
三个事件的执行顺序如下：onkeydown -> onkeypress ->onkeyup。
3、表单事件
在JavaScript中，常用的表单事件有4种：
| 事件 | 说明 |
|---|---|
| onfocus | 获取焦点事件 |
| onblur | 失去焦点事件 |
| onchange | 状态改变事件 |
| onselect | 选中文本事件 |
在JavaScript中，常见的编辑事件有3种：
| 方法 | 说明 |
|---|---|
| oncopy | 复制事件 |
| oncut | 剪切事件 |
| onpaste | 粘贴事件 |
这3个事件都对应有一个“onbeforeXXX”事件，表示发生在该事件之前的事件。
5、页面相关事件
在JavaScript中，常用的页面相关事件有3种：
| 方法 | 说明 |
|---|---|
| onload | 页面加载事件 |
| onresize | 页面大小事件 |
| onerror | 页面或图片加载出错事件 |