文章目录
学习总结
DOM
Document Object Model文档对象模型
文档 文档表示的就是整个的HTML网页文档
对象 对象表示将网页中的每一个部分都转换为了一个对象。
模型 使用模型来表示对象之间的关系,这样方便我们获取对象。
节点Node
是构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为是一个节点。
比如:html标签、属性、文本、注释、整个文档等都是一个节点。
常用节点：
文档节点：整个HTML文档
浏览器已经为我们提供文档节点 对象这个对象是window属性；可以在页面中直接使用，文档节点代表的是整个网页
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容
节点的属性
获取元素节点
1. getElementById( ) 通过id属性获取一个元素节点对象
2. getElementsByTagName( ) 通过标签名获取一组元素节点对象
这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
3. getElementsByName( ) 通过name属性获取一组元素节点对象
innnerHTML 通过这个属性可以获取到元素内部的html代码
如果需要读取元素节点属性，直接使用 元素·属性名
例子：元素.id 元素.name 元素.value
注意：class属性不能采用这种方式，读取class属性时需要使用 元素.className
innerText 该属性可以获取到元素内部的文本内容，它和innerHTML类似，不同的是它会自动将html去除
获取元素节点的子节点
通过具体的元素节点调用
1. getElementsByTagName( )
方法，返回当前节点的指定标签名后代节点
2. childNodes
属性，表示当前节点的所有子节点（包括文本节点在内的所有节点）
根据DOM标准，标签间空白也会被当成文本节点，注意:在IE8及以下的浏览器中，不会将空白文本当成子节点，所以该属性在IE8中会返回4个子元素而其他浏览器是9个
children属性可以获取当前元素的所有子元素
3. firstChild
属性，表示当前节点的第一个子节点
4. lastChild
属性，表示当前节点的最后一个子节点
获取父节点和兄弟节点
通过具体的节点调用
1. parentNode
属性,表示当前节点的父节点
2. previousSibling
属性,表示当前节点的前一个兄弟节点（也可能获取到空白的文本）
（previousElementSibling获取前一个兄弟元素）（不用）
3. nextSibling
属性,表示当前节点的后一个兄弟节点
其他
获取body标签
var body = document.body;
document.documentElement保存的是html根标签
document.querySelector( )
需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个
document. querySelectorAll()
该方法和querySelector()用法类似,不同的是它会将符合条件的元素封装到一个数组中返回
即使符合条件的元素只有一个，它也会返回数组
DOM增删改
创建元素节点
document.createElement( )
需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回
创建文本节点
document.createTextNode( )
需要一个文本内容作为参数，将会根据内容创建文本节点，并将新的节点返回
向一个父节点中添加子节点 appendChild( )
父节点.appendChild(子节点)；
在指定的子节点前插入新的子节点
父节点.inserBefore(新节点，旧节点)；
使用指定的子节点替换已有的子节点
父节点.replaceChild(新节点，旧节点)；
删除子节点
父节点.removeChild(子节点)；
*常用：
子节点.parentNode.removeChild(子节点）；
innerHTML（推荐）
使用innerHTML也可以完成DOM的增删改的相关操作
一般会 采用两种方式结合使用
var li document.createElement(“li”);
li.innerHTML = “广州”；
city.appendChild(li);
全选练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//全选按钮
//1.#checkedAllBtn
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
//获取四个多选框items
var items = document.getElementsByName("items");
//遍历items
for(var i=0;i<items.length;i++){
//设置四个多选框变成选中状态
//通过多选框的checked属性可以来获取或设置多选框的选中状态
// alert(items[i].checked);
items[i].checked = true;
}
checkedAllBox.checked = true;
};
var checkedAllBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
//获取四个多选框items
var items = document.getElementsByName("items");
//遍历items
for(var i=0;i<items.length;i++){
//设置四个多选框变成没选中状态
//通过多选框的checked属性可以来获取或设置多选框的选中状态
// alert(items[i].checked);
items[i].checked = false;
}
checkedAllBox.checked = false;
};
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
var items = document.getElementsByName("items");
checkedAllBox.checked = true;
for(var i=0;i<items.length;i++){
// if(items[i].checked){
// items[i].checked = false;
// }else items[i].checked = true;
items[i].checked = !items[i].checked;
if(!items[i].checked){
checkedAllBox.checked = false;
}
}
};
//提交按钮
//点击按钮以后，将所有选中的多选框的value属性值弹出
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
var items = document.getElementsByName("items");
for(var i=0;i<items.length;i++){
if(items[i].checked){
alert(items[i].value);
}
}
};
//为四个多选框分别绑定点击响应函数
var items = document.getElementsByName("items");
for(var i=0;i<items.length;i++){
items[i].onclick = function(){
//将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
for(var j=0;j<items.length;j++){
//判断四个多选框是否全选
if(!items[j].checked){
checkedAllBox.checked = false;
break;
}
}
}
}
}
</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="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
定时器
setInterval( )
定时调用
可以将一个函数，每隔一段时间执行一次
参数：
1.回调函数，该函数每个一段时间被调用一次
2.每次调用间隔时间，单位是毫秒
返回值：
返回一个Number类型的数据，这个数字用来作为定时器的唯一标识
clearInterval( )
可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
setTimeout( )
延时调用一个函数不马上执行，而是隔一段时间以后再执行，而且只会执行一次
延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
延时调用和定时调用实际上是可以互相代替的
本周总结
本周学习内容最难的是轮播图部分，难记难懂，在写页面的时候总是出错，还需要再精进一下，再理解理解练习练习，页面已经进行了一部分，写的比较慢，页面轮播图较多，细节方面也比较多，想尽量赶一赶进度，不然没有时间进行期末总复习，高数还欠很多，需要再计划一下，C语言也有一些没有跟上；最近比较忙，论文、通讯录、页面、期末复习、C语言作业…真的是各种各样的事情，考核中遇到的知识就下周一起汇总吧。最近真的头都大了；写页面看电脑太久了，腰疼脖子疼眼疼；啊啊啊啊啊，真的好累！！！
冬至快乐，圣诞节快乐
下周计划
完成清华页面，完成通讯录，完成论文，学习高数，学习C，复习日语
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
