dom 获取页面标签

功能:操作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