JS-dom

// 快速获取节点的方式

// 根据标签名进行元素的获取
/*
根据标签名进行元素的获取
由于HTML中可以存在多个相同的标签名的元素
因此接受的变量类型是可以存储多个数据的类数组
通过下标获取具体的内容
*/
// let ulEle = document.getElementsByTagName(“ul”);
// console.log(ulEle[0],typeof ulEle);

// 通过name的属性值获取元素
// let inputEle = document.getElementsByName(“f77”);
// console.log(inputEle[0]);

/* // 通过id值获取元素
ulEle = document.getElementById(“box”);
console.log(ulEle); */

/* // 通过类名获取元素
let elName = document.getElementsByClassName(“f70”);
console.log(elName[0]); */

/*
querySelector返回第一个满足小括号里需求的元素
querySelectorAll返回所有满足小括号里需求的元素

注：不能对元素进行实时更新。

/
/ // 选择article
// let artEle = document.querySelector(“article”);
// console.log(artEle);

// 只能选择article下面的第一个满足条件的section
// let setEle1 = document.querySelector(“article>section”);
// console.log(setEle1);

// 选择article下面的所有满足条件的section
// let setEle2 = document.querySelectorAll(“article>section”);
// console.log(setEle2);

// 子代选择器选择所有p
let pEle1 = document.querySelectorAll(“section>p”);
console.log(pEle1);

// 后代选择器选择所有p
let pEle2 = document.querySelectorAll(“article p”);
console.log(pEle2);

// 选择第3个section下面的p
let pEle3 = document.querySelectorAll(“article>section:nth-child(3)”)
console.log(pEle3[0]);

// 选择最后一个section下的第二个p
let pEle4 = document.querySelectorAll(“section:last-child>p:nth-child(2)”)
console.log(pEle4[0]); */

// // 获取父元素
// /*
// 1.获取一个元素(子元素)
// 2.通过这个元素找其父元素
// */
// let navEle = document.querySelector(“nav”);
// // console.log(navEle);
// // 书写格式：子元素.parentNode;
// let headerEle = navEle.parentNode;
// // console.log(headerEle);

// /*
// 获取子元素
// 格式：父元素.children;
// /
// // let Else1 = headerEle.children;
// // console.log(Else1);
// /
// 获取子节点(元素、文本、注释)
// 格式：父元素.childNodes;
// */
// // let Else2 = headerEle.childNodes;
// // console.log(Else2);

// // 获取第一个子节点
// let FEles = headerEle.firstChild;
// console.log(FEles);//#text
// // 获取第一个子元素节点
// FEles = headerEle.firstElementChild;
// console.log(FEles);//

123

// // 获取最后一个子节点
// FEles = headerEle.lastChild;
// console.log(FEles);//#text
// // 获取最后一个子元素节点
// FEles = headerEle.lastElementChild;
// console.log(FEles);//

“123”

// 添加或替换内容
// let divEle = document.getElementsByTagName(“div”)[0];
// console.log(divEle);

/*
元素节点：innerText =“添加的内容”;
innerHTML =“添加的内容”
innerText和innerHTML的区别
innerHTML是可以识别字符串中的标签，并转换为子元素
innerText不识别标签;即会把标签以字符串形式添加到元素内容中展示
注：若原标签中有内容，以上两个属性均为替换
*/
// divEle.innerText = “f70”;
// divEle.innerHTML = “f70”;

/*
[添加元素节点]
1.创建节点
-创建元素节点
-创建文本节点
-把文本节点添加到元素节点中
2.把新创建的节点添加到页面
-获取被添加的元素节点
-把新元素节点添加为其子节点
/
/ // 创建元素节点
let pEle = document.createElement(“p”);
// 创建文本节点
let pText = document.createTextNode(“f70”);
// 把文本节点添加到元素节点中
pEle.appendChild(pText);

// [把新创建的节点添加到页面]
// 获取被添加的元素节点
let fooEle = document.getElementsByTagName(“footer”)[0];
// 把新元素节点添加为其子节点
fooEle.appendChild(pEle); */

// 获取textarea中的值
// let e = document.querySelector(“textarea”);
// console.log(e.value);

/*
[插入节点]
父元素.insertBefore(A,B);
功能：A插入到B之前
A为要插入的节点
B为插入哪个节点之前
注：若A为新增节点，则直接插入
若A为原有节点，则为移动(剪切)
/
/ // 创建插入元素节点的文本内容
let liEle = document.createElement(“li”);
liEle.innerText=“A”;
// 获取插入节点的父元素
let olEle = document.querySelector(“ol”);
olEle.appendChild(liEle)
// 获取被插入的节点
let inEle = olEle.children[2];
// 插入节点
olEle.insertBefore(liEle,inEle); */

// let liEle1 = document.querySelector(“ul”);
// let inEle1 = liEle1.children[3];
// let inEle2 = liEle1.children[1];
// liEle1.insertBefore(inEle1,inEle2);

/* [删除节点]
节点.remove();
注：如果该节点拥有子节点或后代元素会一同删除。

*/
// let spanEle = document.querySelectorAll(“span”)[1];
// // let pEle = document.querySelector(“p”);
// function shan(){
// // 节点.remove();
// spanEle.parentNode.remove();
// }

/*[克隆节点]

格式：克隆节点.cloneNode(布尔值);
布尔值：
false 浅克隆 只复制克隆节点(即没有内容的标签)
true 深克隆 即会把子节点一同复制

例：
深克隆：spanEle.cloneNode(true)
浅克隆：spanEle.cloneNode(false)
/
/ let spanEle = document.querySelectorAll(“span”)[1];
let pEle = spanEle.parentNode;
let secEle = document.querySelector(“section”);

function kelong(){
// 克隆span标签
let newNode = spanEle.cloneNode(true);//true克隆第二个span节点;false只复制克隆节点
secEle.appendChild(newNode);
// 克隆p标签
newNode = pEle.cloneNode(true);//克隆p节点及其下的所有子节点
secEle.appendChild(newNode);
} */

/* [替换节点]
替换元素书写格式：

父元素.replaceChild(新节点,旧节点);
注：旧节点为被替换的元素。
父元素也是被替换节点的父元素

/
/ // 获取被替换的节点
let pEle = document.getElementsByTagName(“p”)[1];
// 创建被替换节点
let spanEle = document.createElement(“span”);
let spanText = document.createTextNode(“ABC”);
spanEle.appendChild(spanText);
function replace(){
// 获取被替换节点的父元素
pEle.parentNode.replaceChild(spanEle,pEle);
} */

// 获取元素内的文本内容
// let pEle = document.querySelector(“p”);
// console.log(pEle.innerText);

/* [设置节点的样式]

let divEle = document.querySelector(“div”);
//获取节点的尺寸（不包含border和margin）
console.log(“divWidth:”, divEle.clientWidth); //100
console.log(“divheight:”, divEle.clientHeight); //100
let spanEle = document.querySelector(“span”);
//设置节点样式
spanEle.style.left = divEle.clientWidth + “px”;
spanEle.style.color = “yellowgreen”;
//css中属性的-需要去掉，后面单词的首字母大写
spanEle.style.backgroundColor = “yellowgreen”; */

/*[创建注释节点]
let comEle = document.createComment(“我是注释内容”);
let spanEle = document.querySelector(“span”);
spanEle.parentNode.insertBefore(comEle,spanEle);
*/

// [获取和添加]
// let divEle = document.getElementsByTagName(“div”)[0];
/* 获取属性节点的值
书写格式：元素节点.getAttribute(属性名)
/
/ let claEle = divEle.getAttribute(“class”);
console.log(claEle); //box
// 由于class是关键字，会冲突此获取类名用className属性
console.log(divEle.class); //un
console.log(divEle.name); //un
console.log(divEle.className); //box /
/
设置属性节点的值
书写格式：元素节点.setAttribute(属性名,属性值)

/
// divEle.setAttribute(“name”, “f71”)
/
删除属性节点的值
书写格式：元素节点.removeAttribute(属性名)

*/
// divEle.removeAttribute(“name”)

/*
查找属性节点
书写格式：元素节点.hasAttribute(属性名)
*/
// let f70 = divEle.hasAttribute(“class”);
// console.log(f70);

// [设置属性节点的快捷方式]
// 获取节点的类名 节点名.className
// console.log(divEle.className);

// 给input节点设置for值
// let labelEle = document.querySelector(“label”);
// labelEle.htmlFor = “f70”;

// 让input的type值更换
// let inputEle = document.querySelector(“input”);
// inputEle.type = “checkbox”;

// 自定义属性节点
/*
获取自定义属性节点的值
书写格式：节点名.dataset.自定义名称

更改自定义属性节点的值
书写格式：节点名.dataset.自定义名称 = 新的自定义名称
*/
// let info = inputEle.dataset.adb;
// console.log(info);
// inputEle.dataset.adb = “f70”;

// let secEle = document.querySelector(“section”);
// console.log(secEle.className);
// console.log(secEle.classList[1]);
/*
获取节点的class值(多个值以类数组方式存储)
书写格式：节点名.classList

获取某个值：节点名.classList[0]
*/
// 保留某个节点的class值，在其基础上添加新的类名
// 书写格式：节点名.classList.add(属性值);
// secEle.classList.add(“box3”);

// 查找属性值(只限于class)
// secEle.classList.contains(“box3”);

// [切换] 如果节点有小括号class值就删除，反之添加(只限于class)
// 注：该方法返回Boolean值，添加true，删除false
/* let spanEle = document.querySelector(“span”);
spanEle.classList.toggle(“sxg”);
spanEle.classList.toggle(“sxg”);

// 删除class值
spanEle.classList.remove(“sxg”); */
// previousElementSibling可以选择在当前父元素下的前一个子元素，选择前几个写几次previousElementSibling
// nextElementSibling选择后面一个元素
// let divEle = document.querySelectorAll(“div”)[1];
// let i = divEle.previousElementSibling;
// divEle.nextElementSibling;
// console.log(i);