JavaScript基础视频教程总结（091-100章）
程序员文章站
2022-07-02 17:00:06
091-100章总结 091. DOM简介 什么是DOM • DOM，全称Document Object Model文档对象模型。 • JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。 • 文档– 文档表示的就是整个的HTML网页文档 • 对象– 对象表示将... ......
<!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="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>
上一篇： 面向对象OOP概念描述
下一篇： 聊聊技术写作的个人体会