一、BOM编程
javascript分为三部分：
1.ECMAScript(基本语法)
2.BOM（Browser Object Model） 浏览器对象模型：
浏览器对象模型就是把浏览器的各个部分都用了一个对象进行描述，
如果我们要操作浏览的一些属性，我们就可以通过浏览器对象模型
的对象进行操作。
3.DOM
1.1 window
window代表了一个新开的一个窗口
常用方法：
window.open("http://www,baidu.com","_blank" ,"height=400px,width=300px,toolbar=no ")
window.resizeTo(300,400)
把一个窗口更改指定的宽度和高度（IE支持，谷歌不支持）
window.moveBy(100,100)
相对于原来的窗口左上角指定移动x、y偏移量（IE支持，谷歌不支持）
window.moveTo(100,100)
将窗口移到某个位置（IE支持，谷歌不支持）
var id= window.setInterval（"show（）"，100） 每隔指定的毫秒数，运行代码
window.clearInterval( id) 取消定时任务 0
window.setTimeOut("show()",1000 ) 经过指定的毫秒值，执行执行的代码（只执行一次）
【window对象比较特殊，如果想用window的对象和方法时，window可以省略不写。】
>>>>>> 打开窗口
<script type="text/javascript">
function show(){
window.open("http://www,baidu.com","_blank" ,"height=400px,width=300px,toolbar=no,titlebar=no ")
}
</script>
</head>
<body>
<input type="button" onclick="show()" value="打开" />
</body>
>>>>>> 不停的弹广告
<script type="text/javascript">
function op(){
window.open("http://www.baidu.com");
}
window.setInterval("op()",5000); //每隔5s弹出广告
</script>
>>>>>> 定时任务、以及取消定时任务
<script type="text/javascript">
function op(){
window.open("http://www.baidu.com");
}
var id=window.setInterval("op()",5000); //每隔5s弹出广告
window.clearInterval(id);//取消定时任务
</script>
注意事项
1.window对象比较特殊，如果想用window的对象和方法时，window可以省略不写。
1.2 location地址栏对象
var str= location.href 获取url
location.href="http://www.baiodu.com" 设置url
location.reload(); 刷新网页
1.3 screen屏幕对象
screen.height 获取屏幕的垂直分辨率
screen.width 获取屏幕的水平分辨率
screen.availHeight 获取系统屏幕的工作区域宽度（排除微软任务栏）
screen.availWidth（获取系统屏幕的工作区域宽度）
二、 DOM编程
DOM(Document Objecevt Model) :文档对象模型
2.1 DOM基础
2.1.1 DOM来源
浏览器在解析一个html页面时，会这HTML页面中所有的标签都描述为一个相应的对象。我们在浏览器上看到的信息只不是这些标签对象的属性而已。
每一个标签都对应着一个对象。标签的每一个属性都对应着对象的一个属性。所以如果我们箱操作标签的属性，只需要找到该标签对应的对象，操作对象的属性即可。【每一个标签都对应着一个对象，标签属性对应着对象属性】
2.1.2 具体操作可以使用API文档。
使用文档：DHTML.chm文档
使用文档：DHTML.chm文档
使用文档：DHTML.chm文档
使用文档：DHTML.chm文档
使用文档：DHTML.chm文档
切记：此文档很重要
2.2 document对象
文档树
html标签对象构成一个树状结构，我们把这个树称为文档树，整个文档树使用了document对象来描述。文档树的每一个标签对象我们都称为节点（Node）
2.3 查找节点
2.3.1 通过html标签属性找节点
//获取文档中所有的标签
var doc=document.all;
for(var i=0;i<doc.length;i++){
console.log(doc[i].nodeName)
}
//获取文档中所有带有href属性的标签对象
var links=document.links;
for(var i=0;i<doc.length;i++){
links[i].href="http://www.baidu.com"
}
//根据ID找元素
var box=document.getElementById("box");
//根据Class找到所有元素
var cc= document.getElementsByClass("cc");
//根据name找到所有元素
var names=document.getElementsByTagName("c2");
//根据标签名找到所有元素
var imgs=document.getElementsByTagName("img")
for(var i=0;i<imgs.length;i++){
imgs[i].src="1.jpg";
imgs[i].width="200";
imgs[i].height="200";
}
2.3.2 通过关系找节点
通过关系（父子关系、兄弟关系）
parentNode 获取当前元素的父节点
childNode 获取当前元素的所有下一级子元素
firseChild 获取当前元素的所有子元素的第一个。
nextSibling 获取当前节点的下一个节点 （兄弟节点）
previousSibling 获取当前节点的上一个节点（兄弟节点）
>>>>>> childNodes
childsNodes获取子节点时，会获取到空文本和注释
注意：
解析成DOM树时，script标签会被移入body标签中。
空文本也占一个#text 标签
注释占一个标签
获取body下的所有子标签，获取到5个标签。
<body >
<input type="checkbox" /> 电影<br/>
</body>
<script type="text/javascript">
var body=document.getElementsByTagName("body")[0];
var childs=body.childNodes;
for(var i=0;i<childs.length;i++){
console.log(childs[i])
}
</script>
2.4 创建、修改、删除节点
document.createElement("标签名")
创建元素节点
elt.setAttribute("属性名"，"属性值")
设置属性
elt.appendChild(e)
添加元素到elt中的最后的位置
elt.insertBefore(new,oldChild)
在元素之前出入新的节点
elt必须是oldChild的直接父节点
elt.removeChild(e) 删除节点
elt必须是e的直接父节点
elt.innerHTML="" 删除该元素下的所有节点、内容
>>>>>> 新增节点
<body>
<input type="button" value="新增按钮" onclick="add()"/>
</body>
<script type="text/javascript">
var num=0;
//创建节点
function add(){
var ins=document.createElement("input");
ins.setAttribute("type","button");
ins.setAttribute("value","按钮"+(num++));
var body=document.getElementsByTagName("body")[0];
body.appendChild(ins);
}
</script>
>>>>>> 插入节点
<body>
<table>
<tr>
<td><input type="file" /></td>
<td> <a href="#" >删除附件</a></td>
</tr>
<tr id="b">
<td><input type="button" onclick="add()" value="添加附件"/> </td>
</tr>
</table>
</body>
<script type="text/javascript">
var num=0;
//创建节点
function add(){
var input=document.createElement("input");
input.setAttribute("type","file");
var a=document.createElement("a");
a.innerHTML="删除附件";
var td1=document.createElement("td");
td1.appendChild(input);
var td2=document.createElement("td");
td2.appendChild(a);
var tr=document.createElement("tr");
tr.appendChild(td1);
tr.appendChild(td2);
var table=document.getElementsByTagName("tbody")[0];
var old=document.getElementById("b");
table.insertBefore(tr,old);
}
</script>
>>>>>> 删除节点
<body>
<table>
<tr>
<td><input type="file" /></td>
<td> <a href="#" onclick="remove(this)">删除附件</a></td>
</tr>
<tr id="b">
<td><input type="button" onclick="add()" value="添加附件"/> </td>
</tr>
</table>
</body>
<script type="text/javascript">
var num=0;
//创建节点
function add(){
var input=document.createElement("input");
input.setAttribute("type","file");
var a=document.createElement("a");
a.innerHTML="删除附件";
a.setAttribute("href","#");
a.setAttribute("onclick","remove(this)");
var td1=document.createElement("td");
td1.appendChild(input);
var td2=document.createElement("td");
td2.appendChild(a);
var tr=document.createElement("tr");
tr.appendChild(td1);
tr.appendChild(td2);
var table=document.getElementsByTagName("tbody")[0];
var old=document.getElementById("b");
table.insertBefore(tr,old);
}
function remove(obj){
var o=obj.parentNode.parentNode.parentNode;
var o2=obj.parentNode.parentNode;
o.removeChild(o2)
}
</script>
>>>>>> removeChild在循环中的用法
removeChild在删除父类的子元素集合时，子元素集合的长度也发生变化，所以不能使用常规的for循环。可以使用下面的方法清空子元素集合。
<body>
<select onchange="clean(this)">
<option>江苏</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
</body>
<script type="text/javascript">
function clean(obj){
var arr=obj.childNodes;
//特殊用法
for(var i=0;i<arr.length;){
obj.removeChild(arr[i])
}
}
</script>
2.5 其他细节
2.5.1 Select标签对象 – 下拉框
select标签对象应与onchange事件进行绑定。用户选定选项时，触发事件。
select标签对象的属性selectedIndex，用于获取选定选项的索引值。
<body>
<select >
<option>江苏</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
</body>
<script type="text/javascript">
var sel=document.getElementsByTagName("select")[0];
sel.onchange=function(){
console.log(sel.selectedIndex)
}
</script>
清空select中的内容
方式一：
<body>
<select >
<option>江苏</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
</body>
<script type="text/javascript">
var sel=document.getElementsByTagName("select")[0];
sel.onchange=function(){
sel.options.length=0; //清空option
}
</script>
方式二：
<body>
<select >
<option>江苏</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
</body>
<script type="text/javascript">
var sel=document.getElementsByTagName("select")[0];
sel.onchange=function(){
var arr=sel.childNodes;
for(var i=0;i<arr.length;){
sel.removeChild(arr[i])
}
}
</script>
2.5.2 table的特殊之处
一个表格至少有一个tbody，即使我们没有加上该标签，浏览器在解析时，也会加上该标签。所以我们在查找table中元素的父元素时，要特殊处理。
我们在写一个表格时，固定格式为
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
浏览器解析格式为:
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
2.6 函数中this的用法
函数中直接使用this关键字，this指向的是window对象；
函数中传入this关键字，this指向的是绑定该方法的对象。
>>>>>> 通过JS注册事件，关联方法的this对象指的是被绑定的对象本身
<body>
<input type="button" id="s1">
<script type="text/javascript">
document.getElementById("s1").onclick=function(){
console.log(this);
}
</script>
</body>
>>>>>> 直接在HTML注册事件，关联方法的this对象指的是window对象
函数中直接使用this关键字，由于this指向的是window对象，没有parentNode属性，所以报错。
<body>
<input type="button" id="s1" onclick="demo()" value="点击">
<script type="text/javascript">
function demo(){
console.log(this);
}
</script>
</body>
>>>>>> 直接在HTML注册事件，并传入this关键字，this指向的是被绑定的对象本身。【方法一定要有参数】
<body>
<input type="button" value="删除" onclick="remove(this)" />
</body>
<script type="text/javascript">
function remove(obj){
console.log(obj)
var o=obj.parentNode;
o.removeChild(obj)
}
</script>
2.6 操作CSS样式
>>>>>> 借助文档，操作CSS样式
span.style.font="12px";
div.style.backgroundColor="red";
js操作css样式，是使用style属性来进行操作。我们应根据开发者文档来进行查看。
>>>>>> 模拟四位验证码
<body>
<span></span><br/>
<input type="button" style="width:100px;background-color:pink;" value="看不清，换一个">
</body>
<script type="text/javascript">
var span=document.getElementsByTagName("span")[0];
var bu=document.getElementsByTagName("input")[0];
bu.onclick=function(){
var arr=["a","b","我","是","谁","c"];
console.log(arr)
var str="";
for(var i=0;i<4;i++){
var index=Math.floor(Math.random()*arr.length)
str+=arr[index];
}
console.log(str)
span.innerHTML=str;
//js操作css样式
span.style.fontSize="14px";
span.style.color="red";
span.style.backgroundColor="black";
span.style.textDecoration="line-through"
}
</script>
三、其他
3.1 下拉框绑定的事件
下拉框推荐绑定onchangge事件。即当下拉框选择后触发
<select id="s">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>徐州</option>
</select>
<script type="text/javascript">
document.getElementById("s").onchange=function(){
}
</script>
3.2 获取下拉框选定的值
3.2.1 直接获取下拉框选中的对象的value值
<select id="s">
<option >选择城市</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="xz">徐州</option>
</select>
<script type="text/javascript">
document.getElementById("s").onchange=function(){
var v=this.value;
alert(v)
}
</script>
3.2.2 直接获取下拉框的选中的对象
<select id="s">
<option >选择城市</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="xz">徐州</option>
</select>
<script type="text/javascript">
document.getElementById("s").onchange=function(){
var index=this.selectedIndex;
console.log(this[index])
}
</script>
三、案例：二级联动
<body>
省份 <select onchange="showcity(this)">
<option>江苏</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
城市 <select>
<option>城市</option>
</select>
</body>
<script type="text/javascript">
function showcity(obj){
var cityss=[["南京","徐州","邳州"],["黑将","三墩镇"]];
//获取下拉框选中的索引值
var index=obj.selectedIndex;
var citys=cityss[index];
var ins=document.getElementsByTagName("select")[1];
//清空ins中的城市
var cs=ins.childNodes;
console.log(cs);
for(var i=0;i<cs.length;){
ins.removeChild(cs[0])
}
console.log(cs)
//添加ins中的城市
for(var i=0;i<citys.length;i++){
var opt=document.createElement("option");
opt.innerHTML=citys[i];
ins.appendChild(opt);
}
}
</script>
236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
