節點

節點
有一個頁面，就會有一個DOM節點樹。
DOM樹結構的節點由以下三個部分組成：
1：元素節點：HTML的標簽
2：文本節點：標簽包含的文本內容(元素內容)
3：屬性節點：開始標簽包含的屬性

節點的型別

節點名稱：nodeName
節點型別：nodeType
節點值：nodeValue
let Div=document.getElementByID("abc");//獲取元素 Div.Node.ELEMENT_NODE() ==

快速查找節點

除了ById是唯一值以外
其他查找元素的內容，都會回傳多個值
多個值以類陣列方式存盤(瀏覽器的后臺會以NodeList進行展示)

1：getTlemetById//通過ID獲取元素 let aEle=document.getElementById("a002"); 2:getElementsByClassName//通過類名獲取元素 let divEle=document.getElementsByClassName("boo1")[0]; //注：由于class的名字可以相同，最終可能會獲得到多個節點因此，通過類名來獲取元素的方式，會回傳一個類陣列。可以通過下標的方式進行相應內容的查找和展示。 3:document.getElementsByTagName();//通過標簽來獲取元素 let divEle=document.getElementsByTagName("div"); //注：由于標簽的名字可以相同，最終可能會獲得到多個節點因此，通過標簽名來獲取元素的方式，會回傳一個類陣列。可以通過下標的方式進行相應內容的查找和展示。 4:document.getElementsByName();//通過標簽來獲取元素 //注：name是標簽的屬性名 let divEle=document.getElementsByName("username"); //通過css選擇器進行查找 5:document.querySelector 6:document.querySelectorAll

關系層次查找節點

let asEle=docuent.querySelector("aside");

查找父級節點

console.log(asEle.parentNode);


查找子節點

//格式：父元素.childNodes //例： <section> <aside class="as1" id="as1"> <aside/> <section> let asEle=document.querySelector("section")[0]; //查找節點 console.log(asEle.childNodes.length);//3 console.log(asEle.childNodes.[0]);//#text //3：第一個子元素(firstChild) //let asiEle=aocument.getElementsByTagName("aside")[0]; console.log(asiEle.firstChild);//空白 文本內容 //null：無內容，無回車和空格 //空白：無內容 //4：最后一個子元素(lastChild) //let asiEle=aocument.getElementsByTagName("aside")[0]; console.log(asiEle.lastChild);//空白 文本內容 //5：找兄弟節點(后一個) //格式：元素.nextSibling //例： let secEle =document.getElementsByClassName("sec1")[0];2 console.log(secEle.nextSibling)//null //找兄弟節點(前一個) //格式：元素.previousSibling //例： let secEle =document.getElementsByClassName("sec1")[0];2 console.log(secEle.previousSibling

關系層次查找元素

//1：查找父元素 //格式：子元素.parentElement //例： secEle.parentElement //2：查找子元素 //格式：父元素.children //例： secEle.children //注：之獲取元素節點(其他的文本節點，注釋節點等都不會在其中) //3：查找第一個子元素 //格式：父元素.firstElementChild //例： sec.firstElementChild //4：查找最后一個子元素 //格式：父元素.lastElementChild //例： sec.lastElementChild //5：找兄弟節點(后一個) //格式：元素.nextElementSibling //例： secEle.nextElementSibling //找兄弟節點(前一個) //格式：元素.previousElementSibling //例： secEle.previousElementSiblingd

節點的操作

1：創建一個新節點到頁面(添加一個新元素到頁面); 格式1：document.creatElement("標簽名");創建一個元素 格式2：父節點.createElemet("標簽名"); 例1： let seEle=document.creatElement("div"); 例2： let seEle=document.getElementsByClassName("sec1")[0]; seEle.creatElement("div"); 2：創建節點內容(文本節點) 格式：標簽名.createTextNode("文本內容") 例： let divTN=document.createTextNode("JG445"); 3：添加新的元素節點 格式：父標簽.appendchild(新節點) 例： 創建一個帶有文本節點的元素 let divEle=document.createElement("div"); let divTN=document.createTextNode("JG445"); divEle.appendchild(divTN) // 把新元素添加到頁面中 bodyEle.appendChild(divEle); 4：添加到某個元素的前面 step1:先把這個元素獲取 step2:獲取父級元素 step3：把新元素添加到元素之前 格式：父元素.insertBefore(新元素,舊元素); 功能：會把新元素添加到舊元素之前 例：創建一個新元素，再把內容放到里面去。 獲取位置標簽 let dec1 = document.getElementById("a1")[0]; let artEle=document.querySelector("article"); artEle.insertBefore(divEle,secEle); 5：洗掉一個節點 step1：獲取父節點 step2：獲取洗掉的節點 step3：洗掉節點 格式：父節點.remove(子節點) 例： let artEle = document.querySelector("article"); let dec1 = document.getElementsByName("section")[0]; artEle.remove(sec1); 6:修改一個節點(替換節點) 格式：父節點.replaceChild(新節點,舊節點); 1：獲取父節點 let parEle= spanEle.parentElement; 2：替換其中某一個子元素 parEle.rarentElement(newEle,oldEle); 7：復制節點(克隆節點) 淺克隆 divEle.cloneNode(false) 深克隆 divEle.cloneNode(true) 8：創建注釋節點 格式：父節點.createCommnet("我是一個注釋") 例： let Comt= document.createComment("我是一個注釋"); secEle01.appendChild(Comt,secEle_di

文本的操作

1：innerText 元素節點.innerText 例： div.innerText a>可以獲取元素的文本內容 let divEle=div.innerText; b>并且可以設定元素的文本內容 let divEle=div.innerText="JG445"; 2：innerHTML 元素節點.innerHTML 例： div.innerHTML a>可以獲取元素的文本內容和子元素 let divEle=div.innerHTML; b>并且可以設定元素的文本內容和子元素 let div.innerHTML="<span>JG445</span>" 3：TextContent 功能：獲取文本內容 TextContent與innerText的區別 innerText只獲取在頁面中顯示元素的文本內容。 TextContent不僅可以獲取在頁面中顯示元素

屬性節點的操作

1：獲取屬性節點 格式：節點名.getAttribute("屬性名"); 例：inputEle[0].getAttribute("class"); 注：獲取div標簽的id值 2：設定屬性值 格式：節點名.setAttribute("屬性名","屬性值"); 例：div.setAttribute("id","JG445"); 3：創建一個屬性節點 (1)：創建屬性名 let arrEle=document.createAttribute("name"); (2)：創建屬性值 arrEle.nodeValue="https://bbs.csdn.net/topics/JG445"; (3)：把屬性節點添加到相應的標簽 inputEle[2].attributes.setNamedItem(arrEle); 4：洗掉一個屬性節點 格式：節點.removeAttribute(屬性名); document.removeAttribute("name"); 5：判斷當前標簽是否存在某個屬性 格式：節點.hasAttribute(屬性名) 補充：判斷是否存在子節點 節點.hasNodeChild 例：div.hasAttribute("name")//回傳布林值(T,F) 6：如何獲取/修改多個類名的值

css的操作

1：對節點添加樣式
格式：節點.style.css屬性名=CSS屬性值
例：
h1Ele.style.color="red";
//由于在JS中連字符是有特殊含義的，所以不可用
h1Ele.style.backgroundColor="black";

2：獲取元素的尺寸
格式：節點.clientWidth;
div.clientWidth;
div.clientHeight;

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/94702.html

標籤：基礎類

上一篇：節點

下一篇：求助，萌新在dw操作中遇到的問題