JS13

57 阅读 0 评论 38 点赞

我是靠谱客的博主彩色母鸡，最近开发中收集的这篇文章主要介绍JS13，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

补充：
一**、获取元素得到的是一个【伪数组】**
伪数推荐使用foreach()方法
对象里面推荐使用 for in 、for of
伪数组怎么变成真数组？

二、for 和 foreach()区别
1）for的循环是靠i++ 来推动的，也是不停的改变i的值【需要使用自定义属性index】
2）foreach()的循环是【能生成新的i来循环】的【所以选项卡推荐使用foreach 不需要自定义属性】
语法foreach(function(val,i){})

一、重点：认识节点和元素

案例：人员卡（重点）
案例：隔行变色表格

认识节点:文本，注释，标签，属性
元素：标签 (每一个元素都是对象 )

1.节点操作

1.childNodes 子节点列表里面 (空格跟注释也算节点)
2.children (输出是元素)

nodetype 节点类型（返回节点的类型是一个数字）
标签nodetype：节点值1
标签nodeValue：返回是null
标签nodeName：标签

属性nodetype：节点值2
属性nodeValue：返回是文本内容
属性nodeName：属性

文本nodetype：节点值3
文本nodeValue：返回是文本内容
文本nodeName：返回#text

注释nodetype：节点值8
注释nodeValue：返回是注释内容
注释nodeName：返回#comment

2.元素的查找

1.）查找父元素
ele.parentNode 找最近的节点

2.）查找子元素
ele.childNodes 找节点
ele.children 找元素
ele.firstChild 第一个子节点
ele.firstElementChild 第一个子元素
ele.lastChild 最后一个子节点
ele.lastElementChild 最后一个子元素

3.）查找同级元素
同级前面一个节点 previousSibling
同级后面一个节点nextSibling
前面一个元素previousElementSibling (只能找到一个only one)
后面一个元素nextElementSibling

3.元素的一些方法

元素删除方法
1）元素.innerHTML = ‘’;空字符 注意会删掉所有的子节点
2）元素.removeChild() 【指定删除一个子元素】不能删除父元素
3) 元素.parsentNode.remove() 【删除最近的父节点】

元素的修改方法
replaceChild(new,old) //注意这里是新换旧

元素新增方法
document.creatElement('标签') //创建标签
document.creatTextNode('哦哦哦') //创建内容

元素插入方法
insertBefore（new,old） 在前面插入 DOM里面很多是新换旧
appendChild 在后面追加 append附加

元素的复制方法
cloneNode(true); 里面写true的话就是【标签及内容】都复制
cloneNode(false); 只复制标签不复制内容 false也可以不写

案例1：人员选项卡


难点：
1、flag
只有在编辑按钮状态下
flag=false(编辑确定)
2、this 如何保存编辑状态下值呢？
*/
var flag = true//假设是新增状态（新增确定）
var _this; //保存this的值
// 获取
var addbtn = document.querySelector('.add');
var shadow = document.querySelector('.shadow');
var conbtn = document.querySelector('.subBtn');
var canbtn = document.querySelector('.cancelBtn');
var inp1 = document.querySelector('#user');
var inp2 = document.querySelector('#pwd');
var tb = document.querySelector('.userlist')//获取tbody
// 新增按钮
addbtn.onclick = function () {
shadow.style.display = 'block';
}
// 【确认框需要分为：新增确认、编辑确认】
conbtn.onclick = function () {
if (flag == true) {
addInfo();//调用新增函数
} else {
editInfo(); //调用编辑函数
}
}
// 取消按钮(shadow消失 2个输入框都清零)
canbtn.onclick = function () {
shadow.style.display = 'none';
inp1.value = '';
inp2.value = '';
flag = true;
}
// 编辑函数
function editInfo() {
var username = inp1.value;
var userpwd = inp2.value;
shadow.style.display = 'none';
inp1.value = '';
//编辑完毕清零
inp2.value = '';
//编辑完毕清零
flag = true;
// 把遮罩层的输入框的值赋值给td
_this.previousSibling.previousSibling.innerHTML=username;
_this.previousSibling.innerHTML=userpwd;
}
// 新增函数
function addInfo() {
var username = inp1.value;
var userpwd = inp2.value;
// 新增确定 并且把2个输入框值清零，不然下一次进去还有前一次输入的数字
shadow.style.display = 'none';
inp1.value = '';
inp2.value = '';
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var text1 = document.createTextNode(username); //注意创建文本内容的方法
td1.appendChild(text1);
tr.appendChild(td1);
var td2 = document.createElement('td');
var text2 = document.createTextNode(userpwd);
td2.appendChild(text2);
tr.appendChild(td2);
var td3 = document.createElement('td');
var text3 = document.createTextNode('编辑');
td3.appendChild(text3);
tr.appendChild(td3);
var td4 = document.createElement('td');
var text4 = document.createTextNode('删除');
td4.appendChild(text4);
tr.appendChild(td4);
// tr添加到tbody身上
tb.appendChild(tr);
// 删除按钮 删除tr
td4.onclick = function () {
this.parentNode.remove();
}
// 编辑按钮
td3.onclick = function(){
shadow.style.display='block';
inp1.value=this.previousSibling.previousSibling.innerHTML;
inp2.value=this.previousSibling.innerHTML;
flag = false;//默认是新增确定 编辑写false显示是编辑确定状态
_this = this;
}
}
</script>

案例：隔行变色表格


// 获取body
var bd =document.querySelector('body');
// 创建表格
var tab = document.createElement('table');
bd.appendChild(tab);
// 创建tr
for(var i = 0;i<6;i++){
var tr = document.createElement('tr');
// 创建td
for(var j = 0;j<8;j++){
var td = document.createElement('td');
// 创建文本内容
var text = document.createTextNode('好好学习，加油吧');
td.appendChild(text);
tr.appendChild(td);
// 隔行换色
if(j%2==0){
td.style.background='red';
}else{
td.style.background='green';
}
}
tab.appendChild(tr);
}