DOM获取节点的方式,添加,替换,新增节点

快速获取节点的方式

  <ul>
        <li class="f70">01</li>
        <li
         name="f73">02</li>
        <li>03</li>
        <li>04</li>
        <li id="box">05</li>
    </ul>

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

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

通过name的属性获取元素

  let arEle = document.getElementsByName("f73");
 console.log(arEle[1]);

通过Id值获取元素

  let  liEle = document.getElementById("box");
 console.log(liEle);

通过类名获取元素

  let leiName = document.getElementsByClassName("f70");
 console.log(leiName[0]);

querySelector返回第一个满足小括号里需求的元素
/**querySelectorAll返回所有满足小括号里需求的元素
 * 注：不能对元素进行实时更新
 */
 
```html
 <article>
        <section>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </section>
    <section>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </section>
    <section>
        <p>7</p>
        <p>8</p>
        <p>9</p>
    </section>
    <div>
    <section>
        <p>10</p>
        <p>11</p>
        <p>12</p>
    </section>
    <section>
        <p>13</p>
        <p>14</p>
        <p>15</p>
    </section>
</div>
</article>

 let artEle = document.querySelector("article");
  console.log(artEle);
 
  let secEle = document.querySelector("article>section");
  console.log(secEle);
  let sec1Ele = document.querySelectorAll("section");
  console.log(sec1Ele);

  let P1Ele = document.querySelectorAll("section>P");
  console.log(P1Ele);

 let P2Ele = document.querySelectorAll("article P");
  console.log(P2Ele);

  let P3Ele = document.querySelector("section:nth-child(3)");
 console.log(P3Ele);
  let P3Ele = document.querySelectorAll("section:nth-child(3)");
  console.log(P3Ele[0]);

  let P4Ele = document.querySelectorAll("div>section:nth-child(2)>p:nth-child(2)");
  console.log(P4Ele[0]);

/**
  * 获取父元素：
  * 1.获取一个元素（子元素）
  * 2、通过这个元素招其父元素
  */
 //书写格式：子元素.parentNode
  let divEle = document.querySelectorAll("div")[0];
  console.log(divEle.parentNode.lastElementChild);


  //获取子元素节点：
 //书写格式：父元素.children
  let heEle = headrEle.children;


 //获取子节点：包含文本或其他节点
 //书写格式：父元素.childNodes
  let Ele1 = headrEle.childNodes;
  console.log(Ele1);

// //获取第一个子节点
//  let FEle = headrEle.firstChild;
//  console.log(FEle);//#text

//  //获取最后个子节点
//  let LEle = headrEle.lastChild;
//  console.log(LEle);//#text

// //获取第一个子元素节点
//  let FEle1 = headrEle.firstElementChild;
//  console.log(FEle1);//<nav>123</nav>

//  //获取最后一个子元素节点
//  let LEle2 = headrEle.lastElementChild;
//  console.log(LEle2);//<a href=""></a>
// let heEle = document.querySelector("header");
// //获取第一个子元素节点
// console.log(heEle.children[0]);
// //获取最后一个子元素节点
// console.log(heEle.children[heEle.children.length-1]);

添加或替换内容

 let divEle = document.querySelectorAll("div")[0];
   console.log(divEle);
/**
 * 元素节点.innerText = "添加内容"
 * 元素节点.innerHTML = "添加内容"
 * innerText和innerHTML区别
 * innerHTML可以识别字符串中的标签，并转换为子元素
 * innerText不识别标签
 * 即会把标签以字符串形式添加到元素内容中展示
 * 注：若原标签有内容，以上两个属性均为替换
 */
 divEle.innerText ="<p>my word</p>";
 divEle.innerHTML ="<p>my word</p>";

添加元素节点

/**1，创建新节点
   * -创建元素节点
   * -创建文本节点
   * -把文本节点添加到元素节点中
   * 2、把新建的节点添加到页面
   * -获取被添加的元素节点
   * -把新元素节点添加为其子节点
   */
  
  //  taEle.appendChild(pELe);
创建元素节点
 let P1Ele =document.createElement('p');
创建文本节点
let ptext=document.createTextNode("f70");
把文本节点添加到元素节点中
  // P1Ele.appendChild(ptext);
  //把新建的节点添加到页面

  //获取被添加的元素节点
let fooEle = document.getElementsByTagName("footer")[0];
  // 把新元素节点添加为其子节点
 fooEle.appendChild(P1Ele);