DOM基础获取节点，简单应用，方法总结

 

快速获取节点的方式

 * 根据'标签名'进行元素的获取

 * 由于HTML中可以存在多个相同的标签名的元素

 * 因此接受的变量是可以存储多个数据的类数组

 * 通过下标获取具体的内容

let ulEle = document.getElementsByTagName("ul")[0];
console.log(ulEle);

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

//通过ID值获取元素
let liEle = document.getElementById("box");
console.log(liEle);

//通过类名获取元素
let leiName = document.getElementsByClassName("F70");
console.log(leiName[2]);

//  获取第一个article
let artEle = document.querySelector("article");
console.log(artEle);
// 获取第一个article下section
let secEle1 = document.querySelector("article>section");
console.log(secEle1);
// 获取全部article下section
let secEle2 = document.querySelectorAll("article>section");
console.log(secEle2);

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

 * querySelectorAll返回所有满足小括号里需求的元素

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

//获取父元素
/**
 * 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); 
// //获取最后一个子节点
let LEles = headerEle.lastChild;
console.log(LEles); //#text
// //获取最后一个子元素节点
LEles = headerEle.lastElementChild;
console.log(LEles); 

添加或替换元素内容

 * 元素节点.innerText = "添加的内容"

 * 元素节点.innerHTML = "添加的内容"

 * 【innerText和innerHTML区别】

 * innerHTML可以识别字符串中的标签，并转换为子元素

 * innerText不识别标签

 * 即会把标签以字符串形式添加到元素内容中展示

 * 注：若原标签有内容，以上两个属性均为替换

 

 * 【添加元素节点】

 * 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]);

【创建元素节点】

// 1、创建新节点
//  -创建元素节点
let pEle=document.createElement("p");
//  -创建文本节点
let pText=document.createTextNode("f70");
//  -把文本节点添加到元素节点中
pEle.appendChild(pText);
console.log(pEle);
// 2、把添加的节点添加到页面
//  -获取被添加的元素节点
let fooEle=document.getElementsByTagName("footer")[0];
let fooEle=document.querySelector("footer");
//  -把新元素节点添加为其子节点
fooEle.appendChild(pEle);

【插入节点】

// 插入节点
// 创建插入元素节点的文本内容
let liEle=document.createElement("i");
liEle.innerText="A";
// 获取插入节点的父元素
let olEle=document.querySelector("ol");
// 获取被插入节点
let liEle1=document.querySelector("ol>li:nth-of-type(3)");
console.log(liEle1);
//  【插入节点】
 insertBefore(A,B);
// 功能：A插入到B之前
// A为要插入的节点
// B为插入那个节点之前
// 注：若A为新增节点，则直接插入。
//    若A为原有节点，则为移动（剪切）。
olEle.insertBefore(liEle,liEle1);

【删除节点】

节点.remove();

let span =document.getElementsByTagName("span")[1];

节点.remove();

注：如果该节点有子元素或后代元素会一同删除；

function shanchu(){

    节点.remove();

    span.remove();

    span.parentNode.remove();

}

【克隆节点】

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

布尔值：

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

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

例如：

深克隆:    span.cloneNode(true);

浅克隆:    span.cloneNode(false);

 

【替换节点】

// 替换元素书写格式：
// 父元素.replaceChild(新节点，旧节点);
// 注：旧节点为被替换的元素
//     父元素也是被替换节点的父元素
// 获取被替换节点
let p1=document.getElementsByTagName("p")[1];
// 创建被替换节点
let span1=document.createElement("span");
let spanText=document.createTextNode("ABC");
span1.appendChild(spanText);
// 获取被替换节点的父元素
function tihuan (){
    p1.parentNode.replaceChild(span1,p1);
}