JS的运用

//添加元素
//1：创建新节点
//2：-创建元素节点
//3：-创建文本节点
//4：把文本节点添加到元素节点中

//把创建的节点添加到页面
//1：-获取被添加的元素节点
//2：-把新元素节点加为其子节点

//创建元素节点
// let PEle = document.createElement(“p”);
// //创建文本节点
// let PText = document.createTextNode(“F70”);
// PEle.appendChild(PText);
// console.log(PEle);
// //[把新创建的节点添加到页面]
// //获取被添加的元素节点
// let fooEle = document.getElementsByName(“footer”)[0];
// //把元素节点添加为子节点
// fooEle.appendChild(PEle)
// let e =document.querySelector(“textarea”)
// console.log(e,vaule);
//插入节点

//创建插入元素节点
// let liEle =document.createElement(“li”)
// liEle.innerText =“A”
// let olEle = document.querySelector(“ol”)
// // olEle.appendChild(liEle)

// let inEle = olEle.children[2]
// // console.log(inEle);
// //插入节点
// //需要获取
// //父元素：insertBefore(A,B)
// //功能：A插入到B之前
// //A为要插入节点
// // B为插入哪个节点之前
// 注：若A为新增节点，则直接输入
// 若A为原有节点，则为移动(剪切)
// olEle.insertBefore(liEle,inEle);

// let inEle = olEle.children[1]
// console.log(inEle);
// let comEle = document.createElement(“我是注释内容”)
// let spEle = document.querySelector(“span”)
// // spEle.appendChild(comEle)
// spEle.parentNode.insertBefore(comEle,spEle)

// let olEle = document.querySelector(“ol”)
// olEle.insertBefore(olEle.children[3],olEle.children[1])

// let selEle = document.querySelector(“select”)
// console.log(selEle);
// let sellEle = document.querySelectorAll(“select”)[1]
// console.log(sellEle);

//[改样式]
//获取节点的尺寸
// let divEle =document.querySelector(“div”)
// console.log(divEle);
// //获取宽
// console.log(“divwidth”,divEle.clientWidth);
// //获取高
// console.log(“divheight”,divEle.clientHeight);
// let spEle =document.querySelector(“span”)
// console.log(spEle);
// spEle.style.left =divEle.clientWidth+“px”
// spEle.style.color =“red”
// spEle.style.backgroundColor ="#000"
// spEle.style.top =divEle.clientWidth+“px”
// spEle.style.fontSize = “50px”

// let artEle =divEle.querySelector(“article”)

//[获取属性值添加样式]
// //[属性节点]
// let divEEle = document.querySelector(“div”)
// // // console.log(divEEle);
// // //获取属性节点的值
// // //书写格式：元素节点.getAttribute(“属性名”)
// // //设置属性节点的值
// // //书写格式：元素节点.setAttribute(“属性名,属性值”)
// // divEEle.setAttribute(“name”,“F73 F70 F71”)
// //删除节点
// //书写格式：元素节点removeAttribute(“属性名”)
// // divEEle.removeAttribute(“name”)
// //判断节点 查找属性
// let F70 = divEEle.hasAttribute(“class”)
// console.log(F70);//true
// // let clasEle = divEEle.getAttribute(“class”);
// // // console.log(clasEle);
// // //由于cless关键字，会冲突
// // console.log(divEEle);//un
// // console.log(divEEle.className);//box
// // console.log(divEEle.name);//un

// //
// let inputEle = document.querySelector(“input”)
// console.log(inputEle);
// inputEle.setAttribute(“name”, “name”)
// //给label节点设置for
// let lableEle = document.querySelector(“label”)
// console.log(lableEle);
// lableEle.htmlFor = “123”
// inputEle.type = “checkbox”
// inputEle.className = “123”

// //[自定义属性]
// //获取自定义属性节点的值
// //书写格式：
// //节点名.dataset.自定义名
// //
// let info = inputEle.dataset.abc;
// console.log(info);
// //更改自定义属性节点的值
// inputEle.dataset.abc = “F70”
// let seEle = document.querySelector(“section”)
// //获取节点的class的值(多个值以类数组方式储存)
// //书写格式：节点名.classList
// //获取莫个值 节点名.classList[1]

// //保留节点class值，在其基础上添加新的类名
// //属性格式：节点.classList.add(“属性名”)
// console.log(seEle);
// console.log(seEle.className);
// console.log(seEle.classList[1],);
// seEle.classList.add(“box3”, “box4”)
// console.log(seEle.className);
// //查找属性值
// seEle.classList.contains(“box3”)
// console.log(seEle.classList.contains(“box3”));
// //查找class 如果有小括号class的值就删除，反之添加
// //该方法 返回Boolean值， 删除false
// let spEle = document.querySelector(“span”)
// // spEle.classList.toggle(“sxg”)
// // spEle.classList.toggle(“sxg”)
// //删除class
// spEle.classList.remove(“sxg”)
// // spEle.classList.remove(“sxg”)
// console.log(spEle.classList.remove(“sxg”));

// console.log(spEle.classList.toggle(“sxg”));

let spEle = document.querySelectorAll(“span”)[1]

console.log(spEle);
//查找上个节点
spEle.previousElementSibling
console.log(spEle.previousElementSibling);
//查找下个节点
spEle.nextElementSibling
console.log(spEle.nextElementSibling);