JavaScript学习笔记-原创手记-慕课网

JavaScript学习笔记

mirindaRain关注0人评论143人阅读2018-09-26 17:28:04

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

1、DOM

DOM:Document Object Model

mark

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

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

XML DOM，专用于XML文档

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

1.2、Core DOM

1.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

文本节点：3

parentNode：父节点

案例：

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

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>

</div>

</body>

</html>

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

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

imgObject.setAttribute("onclick","myFun()");

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

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

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的创建相关操作

案例：

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>

<head>

<title>Title</title>

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>

</body>

</html>

案例3：

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

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>

</ul>

</body>

</html>

1.2.3、删除和替换操作

removeChild:删除某个子节点

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

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

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>

</body>

</html>

1.3、练习

1.3.1、隔行变色

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>

高亮显示

window.onload=function(){

var trs = document.getElementsByTagName("tr");

//onmouseover :鼠标经过

//onmouseout:鼠标离开

for(var i = 0 ;i<trs.length;i++) {

trs[i].onmouseover=function(){

this.style.backgroundColor='#ccc';

};

trs[i].onmouseout=function(){

this.style.backgroundColor='white';

}

</script>

1.3.2、实现全选，反选等效果

<!DOCTYPE html>

<html>

<head>

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>

<hr/>

</body>

</html>

1.3.3、动态编写一个表格

mark

案例实现：

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

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:单元格的索引