前端DOM知識點
DOM
即文檔對象模型(Document Object Model,DOM
)是一種用於HTML
和XML
文檔的編程接口。它給文檔提供了一種結構化的表示方法,可以改變文檔的內容和呈現方式。DOM
把網頁和腳本以及其他的編程語言聯繫起來。DOM
屬於瀏覽器的,而非JavaScript
語言規範裏規定的核心內容。
W3C規範中常用的DOM節點類型有以下幾種:
一、查找元素
1.直接查找
document.getElementById 根據ID獲取一個標籤
document.getElementsByName 根據name屬性獲取標籤集合
document.getElementsByClassName 根據class屬性獲取標籤集合
document.getElementsByTagName 根據標籤名獲取標籤集合
2.間接查找
parentNode // 父節點
childNodes // 所有的子節點
firstChild // 第一個子節點
lastChild // 最後一個子節點
nextSibling // 下一個兄弟節點
previousSibling // 上一個兄弟節點
parentElement // 父節點標籤元素
children // 所有的子標籤
firstElementChild // 第一個子標籤元素
lastElementChild // 最後一個子標籤元素
nextElementSibling // 下一個子標籤元素
previousElementSibling // 上一個子標籤元素
區別:childNodes,children
childNodes
指的是返回當前元素子節點的所有類型節點,其中連空格和換行符都會默認文本節點
打印結果:
其中空格和文本均打印爲文本節點
如果給li
標籤添加屬性總長度不會改變,因爲childNodes
只會返回文本和元素節點,並不能返回屬性節點。children
指的是返回當前元素的所有元素節點,代碼如下
打印結果:
children
很直觀的返回元素節點的屬性。
接下來對比parentNode
(父節點),parentElement
(父元素)
兩者在通常情況下是一樣的,因爲包含元素的節點只有可能是元素節點。
文本節點只是文本本身,文本節點的父節點是元素節點。
運行劫奪一致,都是HTML
。然而再往上一層,就是根部document
,並不是元素,執行下面代碼:
執行結果:
區別就在於parentNode
找的是節點,就可以顯示出來,parentElement
找的是元素,因此找到根部document
的時候就出現值爲null
的報錯。
二、操作
1.內容
innerText //文本
innerHTML //HTML內容
value //值
2.屬性
attributes // 獲取所有標籤屬性
setAttribute(key,value) // 設置標籤屬性
getAttribute(key) // 獲取指定標籤屬性
3.class
className // 獲取所有的類名
classList.remove(cls) // 刪除指定類
classList.add(cls) // 添加類
4.標籤操作
a.創建標籤
// 方式一
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"
b.操作標籤
// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
//注意:第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
5.樣式操作
var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
6.位置操作
//總文檔高度
document.documentElement.offsetHeight
//當前文檔佔屏幕高度
document.documentElement.clientHeight
//自身高度
tag.offsetHeight
//距離上級定位高度
tag.offsetTop
//父定位標籤
tag.offsetParent
//滾動高度
tag.scrollTop
/*
clientHeight -> 可見區域:height + padding
clientTop -> border高度
offsetHeight -> 可見區域:height + padding + border
offsetTop -> 上級定位標籤的高度
scrollHeight -> 全文高:height + padding
scrollTop -> 滾動高度
特別的:
document.documentElement代指文檔根節點
*/
7.提交表單
document.geElementById('form').submit()
8.其他操作
console.log 輸出框
alert 彈出框
confirm 確認框
// URL和刷新
location.href 獲取URL
location.href = "url" 重定向
location.reload() 重新加載
// 定時器
setInterval 多次定時器
clearInterval 清除多次定時器
setTimeout 單次定時器
clearTimeout 清除單次定時器
三、事件