1、宿主对象
由浏览器或运行环境所提供的对象。主要讲两种对象DOM、BOM。
2、 DOM
document object module，文档对象模型
JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作WEB页面。
文档：整个HTML网页文档。
对象：将网页中的每一个部分都转换为了一个对象。
模型：使用模型来表示对象之间的关系，这样方便我们获取对象。
3、节点
节点Node，是构成我们网页的最基本的组成元素，网页中的每一个部分都可以称为是一个节点。
比如：html标签、属性、文本、注释、整个文档等都是一个节点。
虽然都是节点，但是实际上他们的具体类型是不同的。
比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。节点的类型不同，属性和方法也不尽相同。
- 节点：Node-构成HTML文档最基本的单元。
- 常用节点分为四类：
文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容
4、文档节点
浏览器已经为我们提供了文档节点，这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页对象
//获取到button属性，通过ID
var btn = document.getElementById(“btn”);
//修改按钮的文字
btn.innerHTML = “I’m Button”;
5、事件
事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。
Javascript与HTML之间的交互是通过事件实现的。
对于Web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键、关闭窗口等。
- 处理事件
可以在事件对应的属性中设置一些JS代码。这样当事件被触发时，这些代码将会执行。
这种写法我们称为结构和行为耦合，不方便维护，不推荐使用。
<button id="btn" onclick="alert('讨厌，你点我干嘛！');">
- 可以为按钮的对应事件绑定处理函数的形式来响应事件。
这样当事件被触发时，其对应的函数将会被调用。
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("你还点~~");
};
- 浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行，如果将script标签写到到页面的上边，在代码执行时，页面还没有加载,将js代码编写到页面的下部就是为了可以在页面加载完毕以后再执行js代码。
- onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样就可确保我们的代码执行时所有的DOM对象已经加载完毕了。
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("hello");
};
};
6、DOM查询
获取元素节点
- 通过document对象调用
getElementById（）通过id获取一个元素节点的对象
getElementsByTagName（）通过标签名获取一组元素节点对象，这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中。即使查询到的元素只有一个，也会封装到数组中。
getElementsByName（）通过name属性获取一组元素节点对象
varinputs= document.getElementsByName("gender");
for(var i=0;i<inputs.length;i++){
//innerHTML用于获取元素内部的HTML代码的，对于自结束标签，这个属性没有意义。
//如果需要读取元素节点属性，直接使用元素.属性名
//例如，元素.id 元素.name 元素.value
//注意：class属性不能采用这种方式，读取class属性时需要使用元素，className
alert(inputs[i].value);
alert(inputs[i].className);
};
- 通过具体的元素节点调用
getElementsByTagName( )方法 ，返回当前节点的指定标签名后代节点。
var button01 = document.getElementById("button01");
button01.onclick = function(){
//获取id为city的元素
var city = document.getElementById("city");
//查找#city下所有li节点
var lis = city.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
};
childNodes 属性表示当前节点的所有子节点
childNodes属性会获取包括文本节点在内的所有节点
根据DOM标签，标签间空白也会被当成文本节点
注意：在IE8及以下的浏览器中，不会将空白文本当成子节点
所以该属性在IE8中会返回4个子元素（代码：ul中有四个li），而其他浏览器是9个（4个li标签+5个空白文本）
var cns = city。childNodes；
alert(cns.length);
children属性可以获取当前元素的所有子元素
var cns2 = city.children;
alert(cns2.length);
firstChild属性，表示当前节点的第一个子节点（包括空白文本节点）
firstElementChild属性，表示当前节点的第一个子元素（不包括空白文本节点）
lastChild属性，表示当前节点的最后一个子节点
- 通过具体的节点调用
parentNode属性，表示当前节点的父节点
var bj = document.getElementById("ij");
var pn = bj.parentNode;
/*
innerText:该属性可以获取到元素内部的文本内容，它和innerText类似，不同的是它会自动将html去掉
*/
alert(pn.innerText);
previousSibling属性，表示当前节点的前一个兄弟节点(可能获取到空白文本）
previousElementSibling属性，表示当前节点的前一个兄弟元素，(不包含空白文本，但IE8及以下不支持）
nextSibling属性，表示当前节点的后一个兄弟节点
- 获取文本框的内容及设置文本框内容
var um=document.getElementById("username");
//读取um的value值
//文本框的value属性值，就是文本框中填写的内容
alert(um.value);
//设置文本框显示内容
um.value="slkdjfl";
7、图片切换
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#outer{
width:500px;
margin:50px auto;
padding:10px;
background-color:greenyellow;
/*设置文本居中*/
text-align:center;
}
</style>
<script type="text/javascript">
window.onload = function(){
/* 点击按钮切换图片 */
//获取两个按钮
var prev = document.getElementById("prev");
var next = document.getElementById("next");
//获取img标签
var img=document.getElementsByTagName("img")[0];
//创建一个数组，用来保存图片的路径
var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
var index=0;
//获取id为info的p元素
var info = document.getElementById("info");
//设置提示文字
info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
prev.onclick=function(){
index--;
if(index<0){
index=imgArr.length-1;
}
img.src=imgArr[index];
info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
};
next.onclick=function(){
index++;
if(index>imgArr.length-1){
index=0
;
}
img.src=imgArr[index];
info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
};
};
</script>
</head>
<body>
<div id="outer">
<img src=img/1.jpg" alt="冰棍"/>
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
8、练习
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function(){
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
var items = document.getElementsByName("items");
for(var i=0;i<items.length;i++){
//设置四个多选框变成选中状态
items[i].checked = true;
}
}
//在事件的响应函数中，响应函数是给谁绑定的this就是谁
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function(){
for(var i=0;i<items.length;i++){
//设置多选框选中状态
items[i].checked = this.checked;
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
<input type="button" id="checkedAllBtn" value="全 选"/>
</form>
</body>
</html>
9、DOM的其他查询方法
- 查询body标签
var body = document.getElementsByTagName("body")[0];
//在document中有一个属性body，它保存的是body的引用
var body = document.body;
//document.documentElement保存的是html根标签
var html = document.documentElement;
- 查询页面中所有元素
//document.all代表页面中所有的元素
var all = document.all;
all = document.getElementsByTagName("*");
console.log(all.length);
- 根据元素的class属性值查询一组元素节点对象
//getElementsByClassName()可以根据class属性值获取一组元素节点对象，但是该方法不支持IE8及以下的浏览器
var box1 = document.getElementsByClassName("box1");
console.log(box1.length);
- 获取class为box1中的所有的div
//.box1 div
// document.querySelector()
//--需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点
//--虽然IE8中没有getElementsByClassName（）但是可以使用querySelector（）代替
//--使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1");
console.log(div.innerHTML);
//document.querySelectorAll()
//--该方法和querySelector（）用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
//--即使符合条件的元素只有一个，它也会返回数组
box1 = document.querySelectorAll(".box1");
box1 = document.querySelectorAll("#box2");
8174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
