功能:操作html元素
快速获取节点的方式
根据标签名进行元素的获取
由于html中可以存在多个相同的标签名的元素 , 因此接受的变量是可以储存多个数据的类数组
通过下标获取具体内容
.getElementsByTagName("");
let ulele =document.getElementsByTagName("ul")[0];
console.log(ulele);
let ulele =document.getElementsByTagName("ul");
console.log( ulele[0]);
let ulele =document.getElementsByTagName("li")[2];
console.log(ulele);
let ulele =document.getElementsByTagName("li")
console.log( ulele[2]);
通过name的属性值获取元素
.getElementsByName("");
let inpuele=document.getElementsByName("uresname");
console.log(inpuele);
let inpuele=document.getElementsByName("uresname")[0];//第一个
console.log(inpuele);
通过ID值获取元素
.getElementById("")
let liele5 =document.getElementById("box")
console.log(liele5 );
通过类名获取元素
.getElementsByClassName("")
let leiname =document.getElementsByClassName("f70")
console.log(leiname);
let leiname =document.getElementsByClassName("f70")
console.log(leiname[2]);//div
querySelector和querySelectorAll的区别
querySelector返回第一个满足小括号里需求的元素
querySelectorAll返回所有满足小括号里需求的元素
注:不能对元素进行实时更新 比如删除一个,但打印出来还是原来的个数
let artele = document.querySelector("article");
console.log(artele);
let secele = document.querySelector("article>section");
console.log(secele);
let secele2 = document.querySelectorAll("article>section");
console.log(secele2);
let Pele1 = document.querySelectorAll("article p");
console.log(Pele1);
let Pele3 = document.querySelectorAll("article>section>p");
console.log(Pele3);
let Pele2 = document.querySelectorAll("article>section:nth-child(3)");
console.log(Pele2[0]);
let Pele4 = document.q