1.知识回顾
实现一个电子时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
电子时钟
</title>
<script>
var t;
function clockTime(){
var clock = new Date();
//alert(clock);
var Y = clock.getFullYear();
var M = clock.getMonth()+1;
var D = clock.getDate();
var H = clock.getHours();
var Mi = clock.getMinutes();
var S = clock.getSeconds();
output.innerHTML=Y+"年"+M+"月"+D+"日"+H+"时"+Mi+"分"+S+"秒";
}
window.onload=clockTime;
function starTime(){
t=setInterval(clockTime,1000);
}
function stopTime(){
clearInterval(t);
}
</script>
</head>
<body>
<input type="button" name="" onclick="starTime()" value="开始"/>
<input type="button" onclick="stopTime()" value="停止"/>
<p id="output"></p>
</body>
</html>2. DOM编程概述
2.1什么时DOM编程
文档对象模型(Document Object Model,简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中。
使用js代码来操作文档中的节点（标签元素节点，文本节点，属性节点）。
2.2 学习DOM编程的目的
DOM操作就是操作页面中的标签/节点/元素的，就是增删改。
新增:各种标签本来不存在的，无中生有；创建标签/造标签(此时没有样式);美化(设置样式，添加内容)；添加(将造好的标签添加到目标位置)。
删除：删除标签；
修改：修改样式、内容、替换、属性。
3.节点操作
对节点的操作，增删改查
3.1 节点概述
文档是一个文档节点；(页面中的文字，空格符，特殊符号)
所有的HTML元素都是元素/标签节点；
所有HTML属性都是属性节点；
文本插入到HTML元素是文本节点。
3.2 标签节点对象的获取
想操作页面中的某个标签，要先拿到这个标签。
documenr.getElementById("id名");3.3 节点的操作
增加：
| 名称 | 含义 |
| document.createElement(标签名) | 创建一个节点 |
| insertBefore(新标签，哪个标签之前) | 在哪个标签之前插入节点 |
| 父.appendChild(新标签) | 在父节点的里边追加子节点 |
| cloneNode() | 复制节点，如果参数为true，还会复制当前节点的子孙节点， 否则只复制当前节点 |
删除：
| 名称 | 含义 |
|
父.removeChild（子元素对象）
|
删除指定的子标签/子节点
|
|
自己.remove()
|
删除自身
|
修改：
| 名称 | 含义 |
|
父.replaceChild(新标签, 旧标签);
|
将父标签中的旧标签用新标签替换掉
|
<body>
<input type="button" id="btnAdd" value="添加"/>
<input type="button" id="btnRemove" value="删除">
<div id="mydiv">
</div>
<script>
function addElement(){
var pobj = document.createElement("p");
pobj.innerHTML="哈哈哈哈哈哈哈哈哈~"
mydiv.appendChild(pobj);
}
function removeElement(){
//var subobj = mydiv.lastELementChild;//自己写的
//var subobj = mydiv.lastElementChild;
//subobj.remove();
//mydiv.removeChild(subobj);//我自己写的
mydiv.removeChild(subobj);
}
//删除元素
// function removeElement(){
// //1.获取到要删除的元素
// var subObj = mydiv.lastElementChild;
// //2.删除
// //通过父元素，删除子元素
// mydiv.removeChild(subObj);
// //通过元素自己删除自己
// //subObj.remove();
// }
btnAdd.onclick=addElement;
btnRemove.onclick=removeElement;
</script>
</body>3.4 节点具有的属性
属性中包含Node关键字，获取都是节点(HTML标签，文本)
属性中包含Element关键字的，获取的都是元素(HTML元素/标签)
|
点对象属性
|
含义
|
|
childNodes
|
所有直接子节点（包含文本节点和元素节点）
|
| *children |
所有元素子节点——获取所有的子标签
|
| *firstElementChild |
第一个子元素对象，获取的是html元素
|
| firstChild |
第一个子节点对象，获取的是节点
|
|
*lastElementChild
|
最后一个子元素对象
|
|
lastChild
|
最后一个子节点对象
|
| parentNode | 父节点 |
|
*parentElement
| 父元素 |
| nextSibling |
返回当前元素紧跟的下一个兄弟节点(包含文本/标签等)
|
|
*nextElementSibling
|
返回指定元素之后的下一个兄弟元素节点（相同节点树层中的下一 个元素节点）
|
|
previousSibling
| 返回当前元素上一个节点紧挨着的 |
|
*previousElementSibli
ng
|
返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）
|
| 节点对象属性 | 含义 |
|
nodeValue
|
节点值 （文本节点的值）。文本节点和属性节点返回文本内容，元素节点返回null
|
|
nodeType
|
节点类型。1==标签节点；2== 属性节点；3==文本节点
|
|
nodeName
|
节点名称。文本节点固定返回: #text 元素节点:返回标签名
|
|
元素对象属性/方法
| 值 |
|
*value
|
文本框的值
|
|
id
|
标签的id属性值
|
|
name
|
表单元素的name属性值
|
|
className
|
class属性值
|
|
*innerHTML
|
标签中的所有HTML内容
|
|
outerHTML
|
包含标签本身以及标签体
|
|
innerText
|
标签中的所有文本内容
|
|
getAttribute("属性名")
|
获取标签属性值方法
|
|
setAttribute("属性名","属性值")
|
为标签设置属性方法
|
|
getAttributeNode("属性名")
|
获取属性节点对象方法
|
<body>
<div id="fath">
<h1 id="sib1">大哥</h1>
<span id="sib2">二哥</span>
<p id="sib3">三弟</p>
</div>
<script>
for(var i = 0;i<fath.children.length;i++){
alert(fath.children[i].innerText+" "+fath.children[i].nodeType+" "+fath.children[i].nodeName);
}
//找大哥
alert(fath.children[0].innerText+fath.firstElementChild.innerText+fath.children[1].previousElementSibling.innerText+sib2.parentElement.children[0].innerText);
</script>3.5 常用查询节点方法
| 方法 | 说明 |
|
*getElementById
|
根据编号获取元素
|
|
getElementsByTagName
|
根据标签名获取元素数组
|
|
getElementsByClassName
| 根据类样式名获取元素数组 |
|
getElementsByName
|
根据元素的name属性查找元素数组
|
|
*querySelector
| 可以根据标签名，id名(#id)，类名(.类)获取单个元素 |
|
*querySelectorAll
|
可以根据标签名，id多名，类名获取元素数组
|
<body>
<div class="x1">这是一个DIV1</div>
<div class="x2">这是一个DIV2</div>
<div class="x3" id="ddd">这是一个DIV3</div>
<p class="x1">这是P元素1</p>
<p class="x2">这是P元素2</p>
<p class="x3">这是P元素3</p>
<b class="x1">这是div下的一个b</b>
<span>
<b class="x1">这是span下的一个b</b>
</span>
<hr/>
你喜欢的水果
<input type="checkbox" name="hobby" value="苹果"/>苹果
<input type="checkbox" name="hobby" value="香蕉"/>香蕉
<input type="checkbox" name="hobby" value="橘子"/>橘子
<input type="checkbox" name="hobby" value="榴莲"/>榴莲
<script type="text/javascript">
//getElementsByTagName:根据标签名获取数组元素
/*var divAry = document.getElementsByTagName("div");
for(var i=0;i<divAry.length;i++){
alert(divAry[i].innerHTML);
}*/
//getElementsByClassName:根据类名获取元素数组
var clsAry = document.getElementsByClassName("x1");
//alert(clsAry.length)
//console.log(clsAry);
/*for(var i=0;i<clsAry.length;i++){
alert(clsAry[i].innerHTML);
}*/
//getElementsByName:根据name属性获取元素数组
//html Collection
/*var ckAry = document.getElementsByName("hobby");
for(var i=0;i<ckAry.length;i++){
//设置每个复选框选中
ckAry[i].checked = true;
}*/
//querySelector:根据css选择器(id,类,标签)获取单个元素
//var obj = document.querySelector(".x1");
//alert(obj.innerHTML);
//var obj = document.querySelector("#ddd");
//alert(obj.innerHTML);
//querySelector:根据css选择器(id,类,标签)获取元素数组
/*var objAry = document.querySelectorAll("div");*/
var objAry = document.querySelectorAll(".x2");
for(var i=0;i<objAry.length;i++){
alert(objAry[i].innerHTML);
}
/*for(var i in ckAry){
alert(i+" "+ckAry[i].value);
}*/
//var clsAry = [10,20,30];
//el:元素/数据 index:索引
/*clsAry.forEach(function(el,index){
alert(index+" : "+el)
})*/
</script>
</body>
<body>
<div id="con" >
<h1 id="title">这是一个标题</h1>
<span style="color:red">这是一个span</span>
<p>这是一个P</p>
这是div的内容
</div>
<script type="text/javascript">
//con.className="xxx";
alert(con.outerHTML);
//遍历div的子节点
//alert(con.childNodes);
//console.log(con.childNodes);
//con.childNodes.length:子节点的长度()
//alert(con.childNodes.length);
/*for(var i=0;i<con.childNodes.length;i++){
//获取当前遍历的节点
var n = con.childNodes[i];
alert(n.nodeType+" "+n.nodeName+" "+n.nodeValue);
}*/
//遍历div的子元素(html标签)
//alert(con.children.length);
/*for(var i=0;i<con.children.length;i++){
var n = con.children[i];
alert(n.nodeType+" "+n.nodeName+" "+n.nodeValue);
}*/
//通过div查找h1
//var f1 = con.firstElementChild;
//alert(f1.nodeType+" "+f1.nodeName+" "+f1.nodeValue);
//var f2 = con.firstChild;
//alert(f2.nodeType+" "+f2.nodeName+" "+f2.nodeValue);
</script>
</body>4.案例练习
4.1发表说说
分析
：
①首先需要一个div装所有的评论；
②当点击发表按钮时 将评论添加到div中；
③添加之前 先创建标签 < span>放名字 在创建一个span放内容 在将创建的两个span 添加到一个P标签中。
<style type="text/css">
fieldset{
width:600px;
height:300px;
border:2px solid gray;
margin:0px auto;
}
form{
text-align:center;
}
#con{
border:2px dashed gray;
margin:10px;
height:80%;
padding:3px;
overflow:auto;
}
#con p{
border:1px solid black;
position:relative;
}
#con p span:first-child{
background-color:#ff00cc;
}
#con p .close{
width:10px;
height:10px;
border:2px solid red;
border-radius:5px;
position:absolute;
top:-5px;
right:-5px;
background-color:orange;
text-align:center;
line-height:10px;
cursor:pointer;
}
</style>
</head>
<body>
<!--
发表说说:
1.写界面
2.实现功能
-->
<fieldset>
<legend>发表说说</legend>
<form>
姓名:
<input type="text" name="xm" id="xm"/>
内容:
<input type="text" name="msg" id="msg"/>
<input type="button" value="发送" id="btnSend"/>
</form>
<div id="con">
</div>
</fieldset>
<script type="text/javascript">
//绑定单击事件函数
btnSend.onclick=function(){
//alert(123);
//创建p元素
var pObj = document.createElement("p");
//创建内容元素
var spanXm = document.createElement("span");
spanXm.innerHTML=xm.value+" : ";
var spanMsg = document.createElement("span");
spanMsg.innerHTML=msg.value;
//删除按钮
var spanClose = document.createElement("span");
spanClose.innerText="x";
spanClose.className="close";
//绑定删除事件
spanClose.onclick=function(){
if(confirm("确定要删除么?")){
//删除自己的父元素
//alert(this.innerHTML);
//this.parentElement:找到父元素
//remove:删除自己
this.parentElement.remove();
}
}
//将内容添加到p中
pObj.appendChild(spanXm);
pObj.appendChild(spanMsg);
pObj.appendChild(spanClose);
//将p添加到div中
con.appendChild(pObj);
}
</script>
</body>
1033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
