JavaScript学习笔记（三）

2024-12-21 技术教程

本课程对应的视频地址：http://edu.51cto.com/course/15019.html

1、DOM

DOM:Document Object Model

1.1、W3C规定的三类DOM标准接口

Core DOM（核心DOM），适用于各种结构化文档

XML DOM，专用于XML文档

HTML DOM，专用于HTML文档（了解）

1.2、Core DOM1.2.1、查找dom

document.getElementById("id"):根据id元素来查找某个对象

document.getElementsByTagName("tag"):根据标签来获取元素-->数组

document.getElementsByName("name"):根据name来获取元素-->数组

nextElementSibling:下一个元素节点previousElementSibling：上一个元素节点childNode：子节点（包含文本节点）children:子元素节点childElementCount：子元素的数量lastElementChild:最后一个元素节点firstElementChild:第一个元素节点firstChild：第一个节点lastChild:最后一个节点nodeType:节点的类型元素节点：1 属性节点：2 文本节点：3parentNode：父节点

案例：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function changeImg(){ var imgObject = document.getElementById("myimg"); imgObject.src="../images/2.jpg"; } function getData(){ var seasons = document.getElementsByName("season"); var str= ""; for(var i = 0 ;i<seasons.length;i++) { str=str+seasons[i].value+"<br/>"; } document.getElementById("result").innerHTML=str; } function getInputData(){ var inputs = document.getElementsByTagName("input"); var str= ""; for(var i = 0 ;i<inputs.length;i++) { str=str+inputs[i].value+"<br/>"; } document.getElementById("result").innerHTML=str; } </script></head><body> <img src = "../images/1.jpg" id = "myimg"/> <input type="button" value="修改图片" onclick="changeImg()"/> <input type="text" value="春" name="season"/> <input type="text" value="夏" name="season"/> <input type="text" value="秋" name="season"/> <input type="text" value="东" name="season"/> <input type="button" value="得到季节" onclick="getData()"/> <input type="button" value="获取所有的input标签的内容" onclick="getInputData()"/> <div id = "result"> </div></body></html>

也可以通过setAttribute(attr,value)设置对象的属性

imgObject.setAttribute("src","../images/2.jpg");imgObject.setAttribute("onclick","myFun()");

那么如果想获取属性的值，就可以通过getAttribute（"name"）来获取

如果我们想对对象加样式,通过object.style属性操作

<script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); box.style.border="1px solid red"; box.style.backgroundColor="#ccc"; box.style.width="300px"; box.style.height="300px"; } </script>1.2.2、dom的创建相关操作

案例：

<script type="text/javascript"> window.onload = function(){ var div = document.createElement("div"); div.style.width="400px"; div.style.height="400px"; div.style.border="1px solid red"; document.body.appendChild(div); var input = document.createElement("input") ; input.setAttribute("type","text"); input.setAttribute("value","zhangsan"); div.appendChild(input); } </script>

与dom相关操作有哪些呢？

createElement：创建一个元素节点

appendChild：将这个元素加入某个元素内部

insertBefore（在某个节点前面插入新的节点）：parentElement.insertBefore(newNode,thisNode)

cloneNode:克隆,有一个参数，默认是false，当为true表示深克隆（连同子节点一起克隆）

案例2：插入兄弟节点

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload=function (ev) { var cc = document.getElementById("cc"); var li = document.createElement("li"); li.innerHTML="貂蝉"; //insertBefore(newNode,已经存在的节点) document.body.insertBefore(li,cc); } </script></head><body> <li>关羽</li> <li id="cc">曹操</li> <li>狂铁</li></body></html>

案例3：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function copy(){ var img = document.getElementById("id01"); var newImg = img.cloneNode(); document.body.insertBefore(newImg,img); } function copyul(){ var myul = document.getElementById("myul"); document.body.appendChild(myul.cloneNode(true)); } </script></head><body> <img id = "id01" src = "../images/1.jpg"/> <input type="button" onclick="copy()" value="复制"/> <ul id="myul"> <li>关羽</li> <li>盾山</li> </ul> <input type="button" onclick="copyul()" value="复制ul"/></body></html>1.2.3、删除和替换操作

removeChild:删除某个子节点

replaceChild（new,old）:新的替换旧的节点

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function myremove(){ var img = document.getElementById("id02"); document.body.removeChild(img); } function myreplace(){ var img = document.getElementById("id01"); var newImg = document.createElement("img"); newImg.setAttribute("src","../images/5.jpg"); document.body.replaceChild(newImg,img); } </script></head><body><img id = "id01" src = "../images/1.jpg"/><img id = "id02" src = "../images/2.jpg"/><img id = "id03" src = "../images/3.jpg"/><input type="button" onclick="myremove()" value="移除"/><input type="button" onclick="myreplace()" value="替换操作"/></body></html>1.3、练习1.3.1、隔行变色

<script type="text/javascript"> window.onload=function(){ var trs = document.getElementsByTagName("tr"); for(var i = 0 ;i<trs.length;i++) { if(i%2==0) { trs[i].style.backgroundColor="#ccc"; } } } </script>

高亮显示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ var allObject = document.getElementById("all"); var allHobbies = document.getElementsByName("hobby"); //全选效果 allObject.onclick=function(){ for(var i = 0 ;i<allHobbies.length;i++) { allHobbies[i].checked=this.checked; } } for(var i = 0;i<allHobbies.length;i++) { allHobbies[i].onclick=function(){ allObject.checked=checkAll(); } } var fanObject = document.getElementById("fan"); fanObject.onclick=function(){ for(var i = 0;i<allHobbies.length;i++) { allHobbies[i].checked=!allHobbies[i].checked; } //判断是否全部选中 allObject.checked=checkAll(); } } function checkAll(){ var allHobbies = document.getElementsByName("hobby"); var flag = true; for(var i = 0;i<allHobbies.length;i++) { if(allHobbies[i].checked==false){ flag=false; break; } } return flag ; } </script></head><body><input type="checkbox" id="all"/>全选 <input type="checkbox" id="fan"/>反选<br/><hr/><input type="checkbox" name="hobby">关羽<br/><input type="checkbox" name="hobby">曹操<br/><input type="checkbox" name="hobby">貂蝉<br/></body></html>1.3.3、动态编写一个表格

案例实现：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var table ; var thead ; var tbody; window.onload = function(){ createTable(); createTheadData(); createTbodyData(); } function createTable(){ table = document.createElement("table"); //将table加入到body中 document.body.appendChild(table); thead = document.createElement("thead"); //将thead加入了table中 table.appendChild(thead); tbody = document.createElement("tbody"); table.appendChild(tbody); //为table元素添加相关关属性 table.setAttribute("border","1"); table.setAttribute("width","100%"); } function createTheadData(){ //向thead中插入了一行 var tr = thead.insertRow(); //tr我需要添加单元格 var td_id = tr.insertCell(); td_id.innerHTML="编号"; var td_name = tr.insertCell(); td_name.innerHTML="姓名"; var td_oper = tr.insertCell(); td_oper.innerHTML="数据操作"; } //生成10条数据 function createTbodyData(){ for(var i = 0 ;i<10;i++) { var tr = tbody.insertRow(); var td_id = tr.insertCell(); td_id.innerHTML=i; var td_name = tr.insertCell(); td_name.innerHTML="张"+i; var td_oper = tr.insertCell(); td_oper.innerHTML='<input type="button" onclick="mydelete(this)" value = "删除"/><input type="button" onclick="updatePre(this)" value = "修改"/>'; } } function mydelete(obj) { if(confirm('确定删除此行吗')) { var tr = obj.parentNode.parentNode; var rowIndex = tr.rowIndex-1; tbody.deleteRow(rowIndex); } } /* * 需要将数据区改为可编辑状态（input） * 按钮部分变成确定和取消 * */ function updatePre(obj) { var td = obj.parentNode ; var td_name = td.previousElementSibling; var td_id = td.previousElementSibling.previousElementSibling; var id = td_id.innerHTML; var name = td_name.innerHTML; //在js中可以为对象动态添加属性 td_name.tag=name; td_id.tag=id; td_name.innerHTML="<input type='text' value='"+name+"'/>"; td_id.innerHTML="<input type='text' value = '"+id+"'/>"; //改变数据操作区的按钮 var btn_confirm = document.createElement("input"); btn_confirm.setAttribute("type","button"); btn_confirm.setAttribute("value","确定"); btn_confirm.setAttribute("onclick","confirmData(this)"); var btn_cancel = document.createElement("input"); btn_cancel.setAttribute("type","button"); btn_cancel.setAttribute("value","取消"); btn_cancel.setAttribute("onclick","myCancel(this)") td.innerHTML="" ; td.appendChild(btn_confirm); td.appendChild(btn_cancel); } function myCancel(obj){ var td = obj.parentNode ; var td_name = td.previousElementSibling; var td_id = td.previousElementSibling.previousElementSibling; td_id.innerHTML=td_id.tag; td_name.innerHTML=td_name.tag; //还原最后一个td td.innerHTML='<input type="button" onclick="mydelete(this)" value = "删除"/><input type="button" onclick="updatePre(this)" value = "修改"/>'; } /* id,name必须要非空 * id不能重复 * */ function confirmData(obj) { //确定 var td = obj.parentNode ; var td_name = td.previousElementSibling; var td_id = td.previousElementSibling.previousElementSibling; //首先获取用户输入的值 var name = td_name.getElementsByTagName("input")[0].value; var id = td_id.getElementsByTagName("input")[0].value; if(name==""||id=="") { alert("对不起，数据不能为空"); return ; } //判断ID不能重复 if(isSame(id)) { alert("对不起，id不能重复"); return ; } //验证都通过了，那么接下来就是将数据真正的放在单元格中 td_name.innerHTML=name; td_id.innerHTML=id; td.innerHTML='<input type="button" onclick="mydelete(this)" value = "删除"/><input type="button" onclick="updatePre(this)" value = "修改"/>'; } function isSame(id){ var flag = false; for(var i = 0 ;i<tbody.rows.length;i++) { var tr = tbody.rows[i]; if(id==tr.firstElementChild.innerHTML) { flag = true break; } } return flag ; } </script></head><body></body></html>

总结：

table对象：

rows属性

insertRow():插入一行

deleteRow():删除一行

tableRow对象：行对象

cells：单元格对象

rowIndex:行号

insertCell():插入单元格

deleteCell():删除单元格

TableCell对象：每个单元格

cellIndex:单元格的索引