<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>091-100章总结</title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>
<body> <pre>
091. DOM简介
什么是DOM
• DOM，全称Document Object Model文档对象模型。
• JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
• 文档– 文档表示的就是整个的HTML网页文档
• 对象– 对象表示将网页中的每一个部分都转换为了一个对象。
• 模型– 使用模型来表示对象之间的关系，这样方便我们获取对象（倒树模型）。
节点
• 节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。
• 比如：html标签、属性、文本、注释、整个文档等都是一个节点。
• 虽然都是节点，但是实际上他们的具体类型是不同的。
• 比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
• 节点的类型不同，属性和方法也都不尽相同。
• 常用节点分为四类
– 文档节点：整个HTML文档
– 元素节点：HTML文档中的HTML标签
– 属性节点：元素的属性
– 文本节点：HTML标签中的文本内容
节点的属性 文档节点（document）
• 文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。
• document对象作为window对象的属性存在的，我们不用获取可以直接使用。
• 通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。
元素节点（Element）
• HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。
• 浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。
• 比如：
– document.getElementById()
– 根据id属性值获取一个元素节点对象。
属性节点（Attr）
• 属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。
• 可以通过元素节点来获取指定的属性节点。
• 例如：
– 元素节点.getAttributeNode("属性名");
• 注意：我们一般不使用属性节点。
文本节点（Text）
• 文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点（包括换行和空格）。
• 它包括可以字面解释的纯文本内容。
• 文本节点一般是作为元素节点的子节点存在的。
• 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点。
• 例如：
– 元素节点.firstChild;
– 获取元素节点的第一个子节点，一般为文本节点。
</pre>
<button id="btn001">我是一个按钮</button>
<script type="text/javascript">
console.log("第091"); /*
* 浏览器已经为我们提供 文档节点 对象这个对象是window属性
* 可以在页面中直接使用，文档节点代表的是整个网页
*/
console.log(document);
//获取到button对象
var btn001 = document.getElementById("btn001");
//修改按钮的文字
btn001.innerHTML = "I'm Button";
</script> <pre>
092. 事件的简介
• 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
• JavaScript 与 HTML 之间的交互是通过事件实现的。
• 对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。
事件发生以后要处理这个事件（比如你亲了某人一下，某人有什么反应）。
</pre>
<!--
我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行
这种写法我们称为结构和行为耦合，不方便维护，不推荐使用
-->
<button id="btn" onclick="alert('讨厌，你点我干嘛！');">我是一个按钮点我</button>
<button id="btn002">我是一个按钮点我</button>
<script type="text/javascript">
console.log("第092"); /*
* 事件，就是用户和浏览器之间的交互行为，
* 比如：点击按钮，鼠标移动、关闭窗口。。。
*/
//获取按钮对象
var btn002 = document.getElementById("btn002");
/*
* 可以为按钮的对应事件绑定处理函数的形式来响应事件
* 这样当事件被触发时，其对应的函数将会被调用
*/ //绑定一个单击事件
//像这种为单击事件绑定的函数，我们称为单击响应函数
btn002.onclick = function(){
alert("你还点~~~");
}; </script> <pre>
093. 文档的加载
浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行,如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。
onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。
注意：window.onload一个页面只能写一个，多个一起会执行最后一个，可以写个方法解决。
</pre>
<script type="text/javascript">
console.log("第093"); function btn003(){
//获取id为btn的按钮
var btn003 = document.getElementById("btn003");
//为按钮绑定一个单击响应函数
btn003.onclick = function(){
alert("hello");
};
};
</script>
<button id="btn003">我是一个按钮</button> <pre>
094. DOM查询
获取元素节点
• 通过document对象调用
1. getElementById()
– 通过id属性获取一个元素节点对象
2. getElementsByTagName()
– 通过标签名获取一组元素节点对象,伪数组
3. getElementsByName()
– 通过name属性获取一组元素节点对象
</pre> <pre>
095. DOM查询2
获取元素节点的子节点
• 通过具体的元素节点调用
1. getElementsByTagName()
– 方法，返回当前节点的指定标签名后代节点
2. childNodes
– 属性，表示当前节点的所有子节点
3. firstChild
– 属性，表示当前节点的第一个子节点
4. lastChild
– 属性，表示当前节点的最后一个子节点
</pre> <pre>
096. DOM查询3
获取父节点和兄弟节点
• 通过具体的节点调用
1. parentNode
– 属性，表示当前节点的父节点
2. previousSibling
– 属性，表示当前节点的前一个兄弟节点
3. nextSibling
– 属性，表示当前节点的后一个兄弟节点
</pre> <div class="clearfix">
<div id="total">
<div class="inner">
<p>你喜欢哪个城市?</p>
<ul class="clearfix" id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<p>你喜欢哪款单机游戏?</p>
<ul class="clearfix" id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>*飞车</li>
<li>魔兽</li>
</ul>
<p>你手机的操作系统是?</p>
<ul id="phone"> <li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
<p>gender:</p>
<p>
<span>
<input class="hello" id="male" type="radio" name="gender" value="male"/>
<label for="male">male</label>
</span>
<span>
<input class="hello" id="female" type="radio" name="gender" value="female"/>
<label for="female">female</label>
</span>
</p>
<p>name:<input type="text" name="name" id="username" value="abcde"/></p>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</div>
<script type="text/javascript">
console.log("第094,095,096"); // 定义一个通用点击事件函数
function myClick(btn,fun){
var btn = document.getElementById(btn);
btn.onclick = fun;
};
myClick("btn01",function(){
var bj = document.getElementById('bj');
alert(bj.innerHTML);
});
myClick("btn02",function(){
var lis = document.getElementsByTagName("li"); //一组元素节点对象
//alert(lis[0]);
for(var i=0 , liLen = lis.length; i<lis.length; i++){
console.log(lis[i].innerHTML);
}
});
myClick("btn03",function(){
var names = document.getElementsByName("gender");//一组元素节点对象
/*
* innerHTML用于获取元素内部的HTML代码的
* 对于自结束标签，这个属性没有意义
*/
//alert(inputs[i].innerHTML);
/*
* 如果需要读取元素节点属性，
* 直接使用 元素.属性名
* 例子：元素.id 元素.name 元素.value
* 注意：class属性不能采用这种方式，
* 读取class属性时需要使用 元素.className
*/
for(var i=0;i<names.length;i++){
alert(names[i].value);
}
})
myClick("btn04",function(){
var city = document.getElementById('city');
var lis = city.getElementsByTagName('li'); //返回当前节点的指定标签名后代节点
//alert(lis[0]);
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
});
myClick("btn05",function(){
var city = document.getElementById('city');
var cns = city.childNodes;
/*
* childNodes属性会获取包括文本节点在内的所有节点
* 根据DOM标签标签间空白也会当成文本节点
* 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
* 所以该属性在IE8中会返回4个子元素而其他浏览器是9个
*/
//alert(cns.length);
for(var i=0;i<cns.length;i++){
alert(cns[i]);
}
/*
* children属性可以获取当前元素的所有子元素
*/
var cns2 = city.children;
alert(cns2.length);
});
myClick("btn06",function(){
var phone = document.getElementById('phone');
var fir = phone.firstChild; // 获取到当前元素的第一个子节点（包括空白文本节点）
alert(fir);
//firstElementChild获取当前元素的第一个子元素
/*
* firstElementChild不支持IE8及以下的浏览器，
* 如果需要兼容他们尽量不要使用
*/
fir = phone.firstElementChild;
alert(fir);
});
myClick("btn07",function(){
var bj = document.getElementById('bj');
var pn = bj.parentNode;
alert(pn.innerHTML);
/*
* innerText
* - 该属性可以获取到元素内部的文本内容
* - 它和innerHTML类似，不同的是它会自动将html标签去除
*/
alert(pn.innerText);
});
myClick("btn08",function(){
var android = document.getElementById('android');
var ps = android.previousSibling; //前一个兄弟节点（也可能获取到空白的文本）
alert(ps);
//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
var ps = android.previousElementSibling; alert(ps);
});
myClick("btn09",function(){
var username = document.getElementById('username');
var um = username.value;
alert(um);
});
myClick("btn10",function(){
var username = document.getElementById('username');
username.value = "今天天气真好。"; });
myClick("btn11",function(){
var bj = document.getElementById('bj');
alert (bj.innerHTML);
alert (bj.innerText);
alert(bj.firstChild.nodeValue);
});
</script> <pre>
097. 图片切换的练习
</pre>
<div class="img-exercise">
<p id="infor"></p>
<img src="data:images/1.jpg" alt="1" />
<button id="prev">上一个</button>
<button id="next">下一个</button>
</div>
<script type="text/javascript">
console.log("第097"); var prev = document.getElementById('prev');
var next = document.getElementById('next');
var img = document.getElementsByTagName('img')[0];
var imgArray = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
var imgArrayLength = imgArray.length;
var infor = document.getElementById('infor');
var index = 0;
infor.innerHTML = "一共"+imgArrayLength+"张图片，当前是第"+(index+1)+"张。";
prev.onclick = function(){
index--;
if(index <0 ){
index = imgArrayLength -1;
}
img.src = imgArray[index];
infor.innerHTML = "一共"+imgArrayLength+"张图片，当前是第"+(index+1)+"张。";
}
next.onclick = function(){
index++;
if(index > imgArrayLength -1 ){
index = 0;
}
img.src = imgArray[index];
infor.innerHTML = "一共"+imgArrayLength+"张图片，当前是第"+(index+1)+"张。";
}
</script> <pre>
098. 全选练习1
</pre>
<pre>
099. 全选练习2
</pre>
<pre>
100. 全选练习3
</pre>
<form method="post" action="">
<p>你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 </p>
<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="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
<script type="text/javascript">
console.log("第098,099,100"); function inClick(inBtn,fun){
var inBtn = document.getElementById(inBtn);
inBtn.onclick = fun;
}; function moreSelect(){
var items = document.getElementsByName('items');
var itemsLength = items.length;
var checkedAllBox = document.getElementById('checkedAllBox');
// 全选
inClick('checkedAllBtn',function(){
for(var i=0;i<itemsLength;i++){
items[i].checked = true;
}
checkedAllBox.checked = true;
})
// 全不选
inClick('checkedNoBtn',function(){
for(var i=0;i<itemsLength;i++){
items[i].checked = false;
}
checkedAllBox.checked = false;
})
// 反选
inClick('checkedRevBtn',function(){
for(var i=0;i<itemsLength;i++){
/*if(items[i].checked){
items[i].checked = false;
}else{
items[i].checked = true;
}*/
items[i].checked = !items[i].checked;
}
checkedAllBox.checked = !checkedAllBox.checked;
})
// 提交
inClick('sendBtn',function(){
for(var i=0;i<itemsLength;i++){
if(items[i].checked){
alert(items[i].value);
}
}
})
// 全选/全不选
inClick('checkedAllBox',function(){
for(var i=0;i<itemsLength;i++){
items[i].checked = this.checked;
}
})
// items点击
/*
* 如果四个多选框全都选中，则checkedAllBox也应该选中
* 如果四个多选框没都选中，则checkedAllBox也不应该选中
*/
for(var i=0;i<itemsLength;i++){
items[i].onclick = function(){
checkedAllBox.checked = true;
for (var j=0; j<items.length; j++) {
if(!items[j].checked){
checkedAllBox.checked = false;
break;
}
}
}
}
}
</script> <pre>
附加：window.onload 加载多个函数的的两种方法
</pre>
<script type="text/javascript">
function a(){
console.log("a");
}
function b(){
console.log("b");
}
function c(){
console.log("c");
}
//1
window.onload =function() {
a();
b();
c();
}
//2
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
} addLoadEvent(a);
addLoadEvent(b);
addLoadEvent(c);
addLoadEvent(btn003);
addLoadEvent(moreSelect);
</script> </body>
</html>
所有基础课程链接：
1.JavaScript基础视频教程总结（001-010章） 2.JavaScript基础视频教程总结（011-020章） 3. JavaScript基础视频教程总结（021-030章） 4. JavaScript基础视频教程总结（031-040章）
5. JavaScript基础视频教程总结（041-050章） 6. JavaScript基础视频教程总结（051-060章） 7. JavaScript基础视频教程总结（061-070章） 8. JavaScript基础视频教程总结（071-080章）
9. JavaScript基础视频教程总结（081-090章） 10. JavaScript基础视频教程总结（091-100章） 11. JavaScript基础视频教程总结（101-110章） 12. JavaScript基础视频教程总结（111-120章）
13. JavaScript基础视频教程总结（121-130章） 14. JavaScript基础视频教程总结（131-140章）
另外，欢迎关注我的新浪微博