JS的属性 节点

//获取父元素
/**

• 1、获取一个元素（子元素）
• 2、通过这个元素找其父元素
  */

// let navEle = document.getElementsByTagName(“nav”)[0];
// console.log(navEle);
// //书写格式：子元素.parentNode
// let headerEle = navEle.parentNode;
// console.log(headerEle);

/**

• 获取子元素节点
• 书写格式:父元素.children
  */
  // let Eles1 = headerEle.children;
  // console.log(Eles1);

/**

• 获取子节点(元素、文本、注释)
• 书写格式:父元素.childNodes
  */
  // let Eles2 = headerEle.childNodes;
  // console.log(Eles2);

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

123

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

“123”

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

• 元素节点.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);

//【插入节点】
//创建插入元素节点
// let liEle = document.createElement(“li”);
// //创建插入元素节点的文本内容
// liEle.innerText = “A”;
// //获取插入节点的父元素
// let olEle = document.querySelector(“ol”);
// //获取被插入的节点
// let inEle = olEle.children[2];

/**

• 【插入节点】
• 需要获取：父元素、插入的节点、插入哪个节点之前
• 父元素.insertBefore（A,B）
• 功能：A插入到B之前
• A为要插入的节点
• B为插入哪个节点之前
• 注：若A为新增节点，则直接插入。
• 若A为原有节点，则为移动（剪切）。

*/
//新增节点
// olEle.insertBefore(liEle, inEle);
//原有节点
// let ulEle = document.querySelector(“ul”);
// ulEle.insertBefore(ulEle.children[3], ulEle.children[1]);

//【删除节点】
// let spanEle = document.querySelectorAll(“span”)[1];

/**

• 节点.remove();
• 注：如果该节点拥有子节点或后代元素会一同删除。
  */
  // function del() {
  // // spanEle.remove();
  // spanEle.parentNode.remove();
  // }

//【克隆节点】
// let spanEle = document.querySelectorAll(“span”)[1];
// let pEle = spanEle.parentNode;
// let secEle = document.querySelector(“section”);

/**

• 书写格式：克隆节点.cloneNode(布尔值)
• 布尔值：

•   false 浅克隆  只复制克隆节点（即没内容的标签）
  

•   true  深克隆  即会把子节点一同复制
  

• 例如：
• 深克隆 spanEle.cloneNode(true)
• 浅克隆 spanEle.cloneNode(false)
  */
  // function kelongs() {
  // let newNode = spanEle.cloneNode(true);
  // secEle.appendChild(newNode);
  // }

// function kelongp() {
// let newNode = pEle.cloneNode(true);
// secEle.appendChild(newNode);
// }

//[替换节点]
//获取被替换节点
// let pEle = document.getElementsByTagName(“p”)[1];
//创建被替换节点
// let spanEle = document.createElement(“span”);
// let spanText = document.createTextNode(“ABC”);
// spanEle.appendChild(spanText);

// function replaceC() {
// //获取被替换节点的父元素
// /**
// * 替换元素书写格式：
// *
// * 父元素.replaceChild(新节点, 旧节点);
// * 注：旧节点为被替换的元素。
// * 父元素也是被替换节点的父元素
// */
// pEle.parentNode.replaceChild(spanEle, pEle);
// }

//设置节点的样式
// 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.getElementsByTagName(“span”)[0];
// spanEle.parentNode.insertBefore(comEle, spanEle);

//【获取和添加属性节点】
// let divEle = document.getElementsByTagName(“div”)[0];
/**

• 获取属性节点的值
• 书写格式：元素节点.getAttribute(属性名)
• */
  // let claValue = divEle.getAttribute(“class”);
  // console.log(claValue); //box
  // //由于class关键字，会冲突因此获取类名用className这个属性
  // console.log(divEle.class); //un
  // console.log(divEle.className); //box

/**

• 设置属性节点(新增、修改)
• 书写格式：元素节点.setAttribute(属性名,属性值)
• /
  // divEle.setAttribute(“name”, “F71”);
  /*
• 删除属性节点
• 书写格式：元素节点.removeAttribute(属性名)
• */
  // divEle.removeAttribute(“name”);

//查找属性
// let F70 = divEle.hasAttribute(“class”);
// console.log(F70);

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

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

// let inputEle = document.querySelector(“input”);
// inputEle.type = “checkbox”;

//自定义属性节点
/**

• 获取自定义属性节点的值
• 书写格式：
• 节点名.dataset.自定义名
  */
  // let info = inputEle.dataset.abc;
  // console.log(info);
  // //更改自定义属性节点的值
  // inputEle.dataset.abc = “F70”;

// let secEle = document.querySelector(“section”);
// console.log(secEle.className, typeof secEle.className);
/**

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

//查找class值
// secEle.classList.contains(“box3”);

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

//删除class值
// spanEle.classList.remove(“sxg”);