亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

DOM增查改刪基礎(chǔ)方法

• document.createElement(‘標簽’) 創(chuàng)建一個元素
• append(string/ele) 在某個父節(jié)點之內(nèi)，在最后追加一個子節(jié)點
• before(string/ele) 在某節(jié)點之前添加一個節(jié)點
• after(string.ele) 在某節(jié)點之后添加一個節(jié)點
• cloneNode(true) 克隆某個節(jié)點，參數(shù) true 克隆節(jié)點，節(jié)點屬性，后代，參數(shù) fasle 克隆節(jié)點，后代，不克隆屬性
• insertAdjacentElement(‘位置’,ele)
• insertAdjacentHTML(‘位置’ , ‘標簽+文本’)
  • insertAdjacentHTML 位置屬性
  • beforeBegin 在節(jié)點之前加入兄弟節(jié)點
  • afterBegin 在節(jié)點之后加入子節(jié)點
  • beforeEnd 在節(jié)點結(jié)束標簽之前，加入子節(jié)點
  • afterEnd 在節(jié)點結(jié)束標簽之后，加入兄弟節(jié)點
• replaceChild(元素，被替換元素) 替換節(jié)點，用在父節(jié)點
• remove() 刪除節(jié)點

內(nèi)容

• textContent 返回內(nèi)容，包括 style 標簽及內(nèi)容，和內(nèi)聯(lián)樣式內(nèi)容
• innerText 返回文本
• innerHTML 返回帶標簽的文本（不包括自身），ele.innerHTML='<a>xxx</a>'也可以賦值（可以解析 HTML 標簽），使用 append 追加給 createElement 創(chuàng)建的新元素
• outerHTML 返回帶標簽的文本（包括自身），outerHTML = '<a>xxx</a>' 替換元素的值，類似 innerHTML

自定義屬性獲取

• ele.dataset.去掉 data-的屬性

獲取 css 樣式（只讀）

-getComputedStyle(ele,null)

實例

// createElement('標簽')  創(chuàng)建元素
let newtag = document.createElement("h3");
newtag.append("hello world");
// append(string/ele) 追加到父節(jié)點的最后子節(jié)點，要在父結(jié)點上使用
document.body.append(newtag);
//   before(string/ele) 在某個元素之前添加節(jié)點，在當前元素上使用
let tagdiv = document.createElement("div");
tagdiv.append("我要到P標簽之前");
document.body.firstElementChild.before(tagdiv);
// after(string/ele) 在某個元素之后添加節(jié)點，在當前元素上使用
let taga = document.createElement("a");
taga.href = "sofresh.top";
taga.append("我在hello world 后面");
//   document.body.lastElementChild.after(taga);
//   document.body.querySelectorAll("h3")[0].after(taga);
newtag.after(taga);
// cloneNode(true) 克隆節(jié)點，在要被克隆的節(jié)點上使用
// 參數(shù)為true是克隆其自身，屬性和后代，fasle不克隆屬性，只克隆自身和后代
let newtaga = taga.cloneNode(true);
document.body.append(newtaga);
let h3 = document.createElement("h3");
h3.append("插入ul之前");
      document.querySelector("ul").insertAdjacentElement("beforeBegin", h3);
document
.querySelector("h3:nth-of-type(1)")
.insertAdjacentHTML("afterEnd", "<p>那我在你后面</p>");
let save = document.querySelector("ul");
save.insertAdjacentHTML("afterBegin", "<p>我先進ul</p>");
save.insertAdjacentHTML("beforeEnd", "<p>我先后面進ul</p>");
let li1 = document.createElement("li");
li1.append("i'm not friendly");
li1.style.color = "red";
document.querySelector("ul > li:nth-of-type(2)").after(li1);
let li = document.querySelector("ul > li:nth-of-type(2)");
// replaceChild(ele/pos) 替換子元素，在父級使用
 let taga2 = document.createElement("a");
taga2.href = "xxx";
taga2.append("我來替換");
let ul = document.querySelector("ul > li:nth-of-type(2)");
document.querySelector("ul").replaceChild(taga2, ul);
// remove(ele) 刪除節(jié)點
 document.querySelector("body > ul > li:last-of-type").remove();

let ul = document.createElement("ul");
document.querySelector("hr:last-of-type").after(ul);
function print(node) {
        if (event.key === "Enter") {
          if (node.value.length === 0) {
            alert("請輸入留言");
          } else {
            let value =
              "<li>" +
              node.value +
              "<button onclick='del(this)'>刪除</button> </li> ";
            document
              .querySelector("ul")
              .insertAdjacentHTML("afterBegin", value);
            node.value = null;
          }
        }
      }
function del(n) {
        confirm("確定刪除？") ? n.parentNode.remove() : alert("已取消");
      }

批改老師：PHPz

批改狀態(tài)：合格

老師批語：