dom中創建一個元素節點?DOM中的選擇器/獲取元和對象的集合:，接下來我們就來聊聊關于dom中創建一個元素節點?以下内容大家不妨參考一二希望能幫到您!

dom中創建一個元素節點

DOM中的選擇器/獲取元和對象的集合:

1.var obox = document.getElementById(“box”) /獲取指定元素的ID,ID選擇的特性眼瞎行為：隻能選擇第一個符合條件的元素/

2.var abox = document.getElementsByClassName(“box”);/*class選擇器返回的是一個數組,哪怕隻有一個元素,也是數組/

3.var ap = document.getElementsByTagName(“p”) /元素選擇器,返回數組/

4.var ainput = document.getElementsByName(“user”); /name屬性選擇器,返回數組/

5.var ap = document.querySelectorAll("#box"); /*返回數組,什麼都能選擇*/

6.var obox = document.querySelector(".box"); /*返回單個元素*/

DOM中的屬性操作:

getAttribute() 獲取屬性值 obj.getAttribute(“屬性名”) 不能操作值為布爾類型的屬性 例如： checked selected

setAttribute() 設置屬性

用法：

obj.setAttribute( “屬性名”,”值” );

removeAttribute() 删除某個元素的屬性 obj.removeAttribute(“屬性名”); 一般删除的是通過setAttribute方法設置的屬性

對象.attributes //獲得所有屬性節點，返回一個數組(獲得該元素節點的所有屬性,數組循環取值)

節點指針:

1.oDiv.children; /根據腹肌選擇所有子集,返回數組/

2.oSpan.parentNode; /返回一個元素的父元素/

3.對象.childNodes /返回所有元素的子節點的集合,包括空白節點/

節點的屬性:

節點類型(nodeType) 節點名字(nodeName) 節點值(nodeValue)

元素節點 1 标簽名 null

文本節點 3 #text 文本

注釋節點 8 #comment 注釋的文字

文檔節點 9 #document null

屬性節點 2 屬性名 屬性值

高級節點指針/節點選取方式:

對象.firstChild

對象.lastChild

對象.firstElementChild

對象.lastElementChild

對象.previousSibling /*上一個兄弟節點*/

對象.nextSibling /*獲得下一個兄弟節點*/

對象.prveiousElementSibling /*獲得上一個兄弟節點*/ previous以前的 蛇不甯 兄弟

對象.nextElementSibling /*獲得下個兄弟節點*/

對象.ownerDocument /*隻需要了解獲取該節點的文檔根節點，相當與 document*/

節點的操作:

-createElement 創建元素節點 document.createElement(元素标簽)

創建節點 -createAttribute 創建屬性節點 document.createAttribute(元素屬性)

-createTextNode 創建文本節點 document.createTextNode(文本内容)

--appendChild 在已知節點末尾添加 appendChild(添加的節點)

插入節點

--insertBefore 在已知節點前插入一個新節點insertBefore(添加的節點)

替換節點 ---replaceChild 将某個子節點替換成另一個 replaceChicd(要插入的新元素,要被替換的老元素)

複制節點 ---cloneNode 複制指定節點的副本 需要被複制的節點.cloneNode(true/false)

當為true時複制當前元素及其所有子節點 false時僅複制當前節點

删除節點 ---- 簡單的 元素.remove 直接删除當前元素

獲取元素具有的定位屬性:

1..offsetWidth/offsetHeight：元素實際寬度/高

2.clientWidth/clientHeight：元素視窗寬度/高度

3.scrollLeft/scrollTop 滾動條距離浏覽器頂部的距離

4.offsetLeft：獲取元素相對具有定位屬性

5.offsetTop：定位屬性的top

6. offsetParent：獲取元素的最近的具有定位屬性的包含快

鼠标坐标屬性:

pageX / pageY 距離文檔窗口的距離

clientX / clientY 距離浏覽器窗口的距離 當頁面沒有滾動條時 結果和pageY一樣

offsetX / offsetY 距離目标元素的内部偏移

screenX / screenY 距離屏幕窗口的距離Z

js操作頁面元素:

操作樣式：

obj.style.樣式名 = 值 設置樣式 操作一個樣式

obj.style.cssText = “width:100px;height:200px;font-size:30px;”

obj.style.樣式名 獲取樣式（緊限于行内樣式的px值獲取）

屬性（标簽上的屬性）操作 ：

obj.屬性名 = 值 設置屬性

obj.屬性名 獲取屬性值

内容操作：

表單内容操作：

obj.value = 值 設置表單内容

obj.value 獲取表單的内容

普通标簽的内容操作：

obj.innerHTML = 值 設置标簽内容

obj.innerHTML 獲取标簽内容

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!