JS结构赋值、dom增删改查基本使用
程序员文章站
2022-03-06 13:46:51
...
结构赋值
//es6结构赋值针对数组和对象,赋值到变量中。
let user = ["小明","小白","小张"];
let ming = user[0];
let zhang = user[2];
console.log(ming,zhang); //小明,小张
1.数组结构
let [name,age,qq] = ["小明",18,123456]; //模板=数组值
console.log(name,age,qq); //输出:小明 18 123456
/*当参数不足时候*/
let [name,age,qq,height=160] = ["小明",18,123456];
console.log(name,age,qq,height); //输出:小明",18,123456,160
/*当参数过多的时候*/
let [name,age,qq,...e] = ["小明",18,123456,180,"123456@qq.com"];//把多的参数压到e数组中
console.log(name,age,qq,e);//e就是一个数组
/*交换两个值*/
let a = 1;
let b = 2;
let c = 0;
c = a; //开始交换
a = b;
b = c;
console.log("a=%d,b=%d",a,b); //交换前1,2,交换后2,1。
2.对象结构
let {name,age,height} = {name:"小明",age:18,height:160};//对象结构,属性和变量名要相同
console.log(name,age,height);
({name,age,height} = {name:"小明2",age:19,height:170});//去掉let加上括号表达式。
console.log(name,age,height);
let {name:myname,age:myage,height:myheight} = {name:"小明3",age:20,height:180};//使用别名,为了防止变量名相同。
console.log(myname,myage,myheight);
let{...s} = {name:"小明3",age:20,height:180};//当传入对象前不知道有多少个值就用...
console.log(s);
3.解析函数参数
function user(p){
console.log(p.name,p.age)
}
user({name:"小明",age:18});
function user({name,age}){ //结构简化传参,使用
console.log(name,age)
}
user({name:"小明2",age:19});
dom增删改查基本使用
document指的就是当前的页面
- html代码
<ul class="cl">
<li class="cls">cls1</li>
<li class="cls">cls2</li>
<li class="cls">cls3</li>
<li class="cls">cls4</li>
<li class="cls">cls5</li>
</ul>
<form action="" method="post" id="lo">
<input type="email" name="email2" value="123@qq.com">
<button>提交</button>
</form>
- 增
//创建元素
let div = document.createElement("div");//创建div标签
let p = document.createElement("p");//创建p标签
p.textContent = "苹果";//给P标签添加内容
document.body.append(div);//在body添加div标签元素
p.append(5899); //p标签里面增加内容
//简易添加
let p1 = document.createElement("p");//创建p标签
p1.textContent="快了"; //添加内容
div.insertAdjacentElement("beforebegin",p1);//把P1插入到div起始前面,beforBegin起始标签前面、afterBegin起始后面、beforEnd结束标签前面、afterEnd结束标签后面。
- 查
let doc=document.querySelector(".cl >.cls");//查找选择器集合类的第一个
let doc=document.querySelectorAll(".cl >.cls");//查找所有选择器类的数组
doc.forEach(cls =>(cls.style.color="red"));//循环遍历cls加上颜色
.....................................
let val = document.forms.lo.email2.value;//查询email2的值,在CSS中推荐使用id值,因为没有name值。
console.log(val);//输出123@qq.com
.......................................
et st = document.querySelector(".cl");
console.log(st.childNodes);//查看所有节点
console.log(st.children);// 查看所有节点(不区分类型),建议使用
console.log([...st.children]);//转为数组
[...st.children].forEach(it=>(it.style.color="red"));//循环遍历改red色
[...st.children][0].style.color = "blue";//转为数组选择第一个
st.firstElementChild.style.background="yellow";//选择第一个
st.lastElementChild.style.background="yellow";//选择最后一个
st.firstElementChild.nextElementSibling.style.background="green";//选择第一个的下一个
st.lastElementChild.previousElementSibling.style.background="violet";//选择最后一个的前一个
- 改
h2.classList.replace("red","blue");//修改颜色,前面是被修改值,后面是要修改的值。
- 删
let h2=document.querySelector("h2");//查询h2标签对象
h2.classList.add("yellow");//添加<style>里的class颜色
h2.classList.add("red");
h2.classList.remove("red");//删除颜色
自定义属性dataset对象和CSS的classList对象
dataset用于自定义属性获取,自定义必须为data-为前缀,访问时不需要。
- html代码
.lv{
background-color: chartreuse;
}
.yellow{
background-color: yellow;
}
.red{
color: red;
}
.blue{
color: blue;
}
<div id="user" data-email="123@qq.com" data-index="22">
<h2>哈哈哈</h2>
</div>
- dataset对象
let div2=document.querySelector("#user");
console.log(div2.dataset.email);//输出123@qq.com
console.log(div2.dataset.index);//输出22
- classList对象
let h2 = document.querySelector("h2");//查询h2标签对象
h2.classList.add("yellow");//添加<style>里的class颜色
h2.classList.add("red");
// h2.classList.remove("red");删除颜色
h2.classList.replace("red","blue");//修改颜色,前面是被修改值,后面是要修改的值。
上一篇: 图片背景怎么改成白色
下一篇: k和kb一样吗?照片大小kb和k哪个大