前引(***)
DOM(文档调用模型)
DOM就是将文档模拟成对象，每一个节点，每一个部分都是对象或属性
XML为例：
在XML中整个XML文件就是一个XmlDocumnet对象
每一个节点都是XmlNode或XmlElement
每一个属性是XmlAttribute
每一个文本TextNode
AppendChild(追加)
DOM是HTML与XML的应用程序接口
将HTML页面也模拟成DOM结构(DOM树)
DOM操作就是用js操作DOM节点
-> 获得节点
-> 设定属性
-> 创建节点并追加
-> 设置样式
第一部分用最简单的案例说明DOM的操作(尽可能少的方法与属性完成所有的任务)
第二个部分，常用的BOM与DOM操作(案例)
->JS HTML DOM
->使用方法
要把写的代码放到(window.)onload = function(){};中，只有在页面加载完成后才触发该代码
->事件处理器与事件处理程序
->事件处理器
在HTML标签中使用事件处理器的语法：
<HTML标签 事件处理器="JavaScript代码">
含义:执行Js代码的程序在事件法发生时会对事件做出响应,为了响应一个特定事件
,而被执行的代码成为事件处理器
->事件处理程序
事件的含义：事件就是用户或浏览器自身执行的某种动作
含义：为响应某个事件的函数就叫事件处理程序(事件监听器)，
事件处理程序以on开头因此click事件处理程序就是onclick
例：按钮对象.onclick = fucntion(){};
->addEventListener()和removeEventListener()
使用addEventListener()和removeEventListener()来添加与移除事件句柄
element.addEventListener(event, function, useCaptrue)
第一个参数是事件的类型(如："click")
第二个参数是事件出发后才调用的函数
第三个是个布尔值对事件进行描述，冒泡事件(true)、捕获事件(false)默认为false
->事件的传递方法有两种：冒泡和捕获
含义:事件的传递定义了元素事件触发的顺序
冒泡:会先触发内部元素的事件，然后在触发外部的元素
捕获:外部的元素会先触发，然后才会触发内部的元素
例：document.getElementById("myDiv").addEventListener("click", function(){alert("SayHello")}, ture);
ps:IE8及之前版本用的是element.attachEvent(event, function);element.detachEvent(event, function);
1、onclick事件与onload事件(***)
onclick 点击事件
onload 页面加载完才触发
所以可以将DOM操作的代码放在onload事件中
2、事件驱动_load的事件与常用事件(***)
->load的事件(HTML事件)
onload = function(){}; 加载页面完毕是触发
onunload = function(){}; 页面卸载后触发(刷新时)
onbeforeunload = function(){}; 页面卸载前触发(刷新时、关闭页面时)
->常用的事件(鼠标与键盘事件)
onclick 单击
ondblclick 双击
onkeydown 键盘按下
onkeyup 键盘弹起
onkeypress 按键
onmousedown 鼠标按下
onmouseup 鼠标弹起
onmousemove 鼠标移动
onmouseover 鼠标悬浮
onmouseout 鼠标离开
oncontextmenu 右键的菜单事件
其他看w3cschool
3、DOM的核心操作(*****)
->获得元素
document.getElementById("id") 获得页面上指定的id元素
<Array> list = document.getElementsByTagName("标签名") 获得页面中所有指定标签的元素，返回一个数组
扩展方法：<Array> list = <节点对象>.getElementsByTagName("标签名");
获得<节点对象>下所有指定标签的元素数组
获得页面中所有name属性的值为str的元素
document.getElementsByName("str(字符串的name属性的值)")
->处理元素的属性
设置元素的属性
节点.setAttribute("属性名","值");
ps: 属性也可以直接通过节点点出来
例：
setAttribute("src", "2.jpg");
等价于
document.getElementById("img").src = "2.jpg";
获得节点的值(有返回值)
节点.getAttribute("属性名");
删除属性
元素节点.removeAttribute(属性名);
-> 节点对象的常见属性
常见的属性分成三类：元素(<a></a><div></div><img />)、属性(title="")、文本
获得元素的类型：<number> <element>.nodeType 返回数字类型:元素节点(1) 属性节点(2) 文本节点(3)
获得元素的名字(标签名)：<string> <element>.nodeName
获得元素的"值"：<string> <element>.nodeValue
-> 创建元素
创建元素：document.creatElement("元素名");
创建文本：document.creatTextNode("文本内容");
创建属性：document.creatAttribute("元素属性");
-> 插入或追加
追加：<父节点>.appendChild(<子节点>);
插入：<父节点>.insertBefore(新节点, 旧节点)//将新节点插入到旧节点之前
-> 删除、替换和复制
克隆：需要被复制的节点.cloneNode(true/false);
删除：<父节点>.removeChild(<子节点>);
替换：<父节点>.replaceChild(新节点, 旧节点);
-> 处理样式
->设置一个样式，通过js代码来将其绑定到标签中
语法：<节点>.className = 类名
->设置元素点对象的.style属性，可以设置效果
<节点>.style.样式名 = "属性值";
可以设置任意的样式
可以使用样式名，就是css表中的那些
对于background-color这类中间有加连字符的，去掉连字符用驼峰命名规则来写
->节点指针(node节点特性)
->childNodes: 获得元素的所有子节点的数组 <Array> 父节点.childNodes
->parentNode:获得一个给定节点的父节点 子节点.parentNode
->nextSibling：获得给定节点的下一个子节 兄弟节点.nextSibling
->previousSibling:获得给定节点的前一个节点 兄弟节点.previousSibling
->firstChild：获得元素的首个子节点 父节点.fisrtChild
->lastChild：获得元素的最后一个元素 父节点.lastChild
->hasChildNodes():是否包含指定节点
4、事件冒泡(****)
->含义：当点击嵌套到里面的标签时会触发到它的上一级标签，依次逐级触发
->禁止冒泡
停止事件冒泡的发生
找到事件源——最初触发事件的对象
firefox ——试验了以下发现不行
源
alert(e.target);
禁止方法
e.stopPropagation();
IE、chrome
源
alert(event.srcElement);
禁止方法
event.cancelBubble = true;
5、内容操作(**)
->innerText:表示起始标签和结束标签之间的文本
->outerText:与前者相比的区别是替换的是整个目标节点，返回和innerText一样的内容
->innerHTML:表示元素的所有元素和文本的HTML代码
->outerHTML:与前者相比的区别是替换的是整个目标节点，返回元素完整的HTML代码，包括元素本身
6、表单(属于鼠标事件)(***)
->表单元素：1事件（以前知识）、2如何获得元素、3onsubmit与onreset
->js:
使用document.forms得到页面中表单的数组
使用form.elements得到对应表单中的元素
例：<script type="text/javascript">
onload = function(){
/*
//获得表单元素
var form1 = document.forms[1];
form1.style.border = "1px solid red";
//获得元素
var ele = form1.elements[1];
ele.style.border = "5px solid yellow";
*/
var n = document.forms[0].elements["r1"];
//r1的元素非常多，那么就按照出现的顺序组成数组
//n.style.boder在这里不能用,无效
n[1].checked = true;
};
</script>
<body>
<form action="" method="post">
<input type="button" name="n1" value="点击" />
<input type="text" name="txt1" value=" " />
<input type="checkbox" name="c1" value=" " />
<input type="radio" name="r1" value="1" />
<input type="radio" name="r1" value="2" />
<input type="radio" name="r1" value="3" />
<input type="radio" name="r1" value="4" />
</form>
<hr />
<form action="" method="post">
<input type="button" name="name" value="点击" />
<input type="text" name="txt" value=" " />
<input type="checkbox" name="name" value=" " />
<input type="radio" name="name" value=" " />
</form>
</body>
->onsubmit与onreset
实现提交（与重置）由三种方法
1、使用表单的submit提交
2、直接用submit按钮提交（直接创造一个submit按钮即可）
3、用普通按钮调用submit的click方法来提交
例：
<script type="text/javascript">
onload = function(){
document.getElementById("btn2").onclick = function(){
//普通按钮模拟法
//document.getElementById("btn1").click();
//使用表单提交
//document.forms[0].submit();
//使用表单重置
document.forms[0].reset();
};
};
</script>
<body>
<form>
<input type="text" name="t" value="" />
<input type="submit" id="btn1" />
<input type="button" name="" value="点击提交(我是山寨的)" id="btn2" />
</form>
</body>
->BOM
1、window
BOM的核心是window，而window对象又具有双重角色它既是js访问浏览器窗口的一个接口，又是一个
Global(全局)对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其Global对象
全局对象在浏览器中就是window
window相当于当前浏览器窗口
可以用window直接访问
例：window.onload = function(){
window.btn.onclick = function(){
alert("点击");
}
}
2、window对象的常用成员
->confirm
含义：相当于MessageBox.Show();
功能：confirm可以运用与填写资料提交、退出浏览器……时，提醒是否确定提交(reser按钮)
ps:有返回值 选择确定为true 取消为false
->location
功能:location属性可以为我们的页面实现跳转与刷新
->刷新
location.reload();
->跳转
location.href = "http://www.baidu.com/";
->setInterval
语法：<计时器ID> setInterval(回调函数, 时间间隔)
含义:每多少毫秒就执行一次回调函数
->清除掉计数器
语法：claerInterval(计时器ID);
->setTimeout
语法：<延迟ID> setTimeout(回调函数， 时间间隔);
含义：表示指定时间段后才执行里面的代码
->history事件
history属性
法1.forward 和 back
法2.go(1)向前 go(-1)向后
功能：用来在网页之间前进与后退的
->screen屏幕信息
含义：获得屏幕的信息（width\\height）,可以得知屏幕的尺寸来规定浏览器使用
——如果浏览器的要求尺寸大于屏幕尺寸，则可以警告用户换显示屏
使用：screen.width、screen.height
->document对象——document.write与document.writeln
write('标签');
writeln('标签');区别会自动将标签换行，write不会
->write系方法在页面中显示其中的字符串，可以实现html代码和js与css代码
如果该方法在页面加载时执行，那么就按照解析的顺序排版页面
但是如果等页面加载完毕以后再调用，那么会重新刷新页面，将原来的东西清掉
->writeln在源代码的级别上加了换行
3、事件对象
->功能键
使用：e.shiftKey、e.ctrlKey、e.altKey
总共组合有八种使用方法：一个键3种，两个键3种，三个键1种，都不按一种
->鼠标的坐标
client坐标，鼠标以浏览器为参照——浏览器通用
screen坐标，鼠标以屏幕为参照——浏览器通用
offset|layer坐标，鼠标以当前所在容器为参照——chrome、IE用offset、firefox用layer
->使用方法
例：onload = function(){
document.getElementById("dv").onmousemove = function(e){
//浏览器不兼容问题的解决：
var t = e ? "offset" : "layer";
e = e || event;
/*
var x = e.clientX;
var y = e.clientY;
*/
var x = e.screenX;
var y = e.screenY;
//数组的关联
/*
var x = e[t + "X"];
var y = e[t + "Y"];
*/
this.fisrtChild.nodeValue = "X = " + x + ", Y = " + y;
};
};
->clipboard(剪贴板)
运用情景
访问到一个很好的网站，点击复制链接——iE可用 chrome、firefox是通过flash来实现
clipboardData.getData("text(类型)"); //获得剪贴板中的内容
clipboardData.setData("text", 变量); //设置剪贴板中的内容
清空剪贴板
clipboardData.clearData("text");
事件(IE可用)
复制的事件 oncopy
粘贴的事件 onpaste
剪切的事件 oncut
ps：由于js代码的执行是单线程的，所以oncopy事件的执行其实是要先于页面上的复制
所以不加上setTimeout就添加不了logo，而且显示的复制文字还是上一次的文字
扩展方法：防止文字被复制，用一个透明的div盖起来
4、事件对象与浏览器兼容问题
在C#中
private void Form1_load(object sender(触发事件的对象), EventArgs e(哪一个行为触发的))
{}
在js中，标准的DOM事件会有一个事件参数
onload = function(e){
浏览器在事件触发的时候，会自动的调用绑定在事件上的函数
在执行函数的时候，会将事件对象作为唯一的一个参数传递给这个函数
};
在firefox、chrome中写一个参数(e)就可以了
而IE中使用window.event这个属性 ——IE8、6
浏览器事件参数不同的解决方法
1.浏览器嗅探
通过判断浏览器的window.navigator属性来判断是那个浏览器
2.使用 ||
e = e || event;
alert(e.button);
推荐使用第二种方法
现在所用的浏览器已经解决了这一不兼容问题，所以以上的解决方法仅限与IE8之前的版本
11、创建表格(案例)
->复杂方法
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
onload = function(){
/*
创建一个表格
//创建表格
var tbl = document.createElement("table");
//为表格添加边框
tbl.setAttribute("border","1");
//创建1行
var tr = document.createElement("tr");
//创建三列,并添加数据
var td1 = document.createElement("td");
td1.appendChild(document.createTextNode("数据1"));
var td2 = document.createElement("td");
td2.appendChild(document.createTextNode("数据2"));
var td3 = document.createElement("td");
td3.appendChild(document.createTextNode("数据3"));
//将列添加到行中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
//将行添加到表中
tbl.appendChild(tr);
//将表格添加到div中
document.getElementById("dv").appendChild(tbl);
*/
//在一个表格中添加一行
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.appendChild(document.createTextNode("数据1"));
var td2 = document.createElement("td");
td2.appendChild(document.createTextNode("数据2"));
var td3 = document.createElement("td");
td3.appendChild(document.createTextNode("数据3"));
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
//这样添加会使添加的行，放在tbody外。
//在IE6中不在tbody中的就不给予显示
//document.getElementById("tbl").appendChild(tr);
//解决：
document.getElementById("tbl").lastChild.appendChild(tr);
//或
//tbl.getElementsByTagName("tbody")[0].appendChild(tr);
};
</script>
</head>
<body>
<div id="dv">
<table border="1" id="tbl">
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
</table>
</div>
</body>
</html>
->简单方法
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
onload = function(){
/*
tr = <table>.insertRow(-1);
td = <tr>.insertCell(-1);
*/
var tbl = document.getElementById("tbl");
//创建一行
var tr = tbl.insertRow(-1);
//-1表示追加 任意数字表示插入（常用的-1， 0）
var td1 = tr.insertCell(0);
td1.innerHTML = "数据1";
var td2 = tr.insertCell(0);
td2.innerHTML = "数据2";
var td3 = tr.insertCell(0);
td3.innerHTML = "数据3";
};
</script>
</head>
<body>
<div id="dv">
<table border="1" id="tbl">
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
</table>
</div>
</body>
</html>