原生js小結(jié)

TerryCai 發(fā)布于2019-08-20 16:42 / 3193人閱讀

摘要：獲得相應(yīng)的元素集合，返回數(shù)組。在前面增加刪除該節(jié)點中的某一個節(jié)點。將某一節(jié)點替換成新的節(jié)點。為節(jié)點，為節(jié)點，代表節(jié)點，代表節(jié)點，代表節(jié)點當(dāng)前節(jié)點為文本節(jié)點時的文本內(nèi)容節(jié)點的標(biāo)簽名。獲得該節(jié)點內(nèi)所有子節(jié)點的信息。

很多時候小項目都不要使用jquery等類似的DOM封裝庫，需要自己簡單的封裝下，這就要求我們熟練地掌握原生的JavaScript的DOM操作，這里做個總結(jié)

高寬屬性

對于window、document、element的height/width的屬性對做下匯總（height和width只討論一個），特別容易忘記，不知道還有什么補充，特別是用的場景
window.innerWidth 窗口顯示區(qū)的寬度（包括了右邊滾動條，不包括開發(fā)者工具或者window任務(wù)欄）
window.outerWidth 窗口的整個寬度（包括了右邊滾動條、開發(fā)者工具和window任務(wù)欄，如果任務(wù)欄在側(cè)邊）
window.pageXOffset 返回窗口文檔的左上角到滾動條最左邊的距離。（其Y屬性可以用以做返回頂部滾動）
window.screenX、window.screenLeft 返回窗口左上角--也就是瀏覽器的左上角在設(shè)備屏幕上的橫坐標(biāo)
screen.width 設(shè)備屏幕的寬度、包括所有
screen.availWidth 設(shè)備屏幕的寬度、除了任務(wù)欄
document.documentElement.clientWidth 窗口顯示區(qū)的寬度，不包括滾動條
element.clientWidth 元素的可見寬度
element.offsetWidth 元素的可見寬度、包括了布局寬度和本身寬度
element.offsetLeft 元素的水平偏移位置
element.scrollWidth 返回元素的整體寬度、包括滾動隱藏
element.scrollLeft 返回元素的滾動隱藏寬度

查找元素

document.getElementById(""); 獲得相應(yīng)ID的元素，返回節(jié)點。
document.getElementsByName("") 獲得相應(yīng)name的元素集合，返回數(shù)組。
document.getElementsByTagName("") 獲得相應(yīng)tag的元素集合，例如span,div之類的。返回數(shù)組。
getElementsByClassName()獲得相應(yīng)class的元素集合
下面是css選擇器，類似jquery的使用

document.querySelector("") 獲取第一個匹配的元素
document.querySelectorAll("") 獲取全部匹配的元素

增刪元素

createTextNode() 創(chuàng)建文本節(jié)點。createTextNode("this is a text")
createElement() 創(chuàng)建元素節(jié)點。createElement("div")
appendChild() 在該節(jié)點中加入新的節(jié)點。 appendChild(document.createTextNode("hello"))
insertBefore() 在某節(jié)點前面增加新的節(jié)點。insertBefore(node1, node2)在node2前面增加node1
removeChild() 刪除該節(jié)點中的某一個節(jié)點。removeChild(node)
replaceChild() 將某一節(jié)點替換成新的節(jié)點。replaceChild(node1, node2)將node2替換為node1

節(jié)點屬性

在使用節(jié)點屬性是一定要注意這里包括了所有的節(jié)點，包括文本節(jié)點、屬性節(jié)點，不一定只是元素節(jié)點

parentNode 父節(jié)點
childNodes 所有子節(jié)點（含文本節(jié)點）
firstChild 第一個子節(jié)點（含文本節(jié)點）
lastChild 最后一個子節(jié)點（含文本節(jié)點）
nextSibling 下一個兄弟節(jié)點（含文本節(jié)點）
previoursSibling 前一個兄弟節(jié)點（含文本節(jié)點）
nodeType 節(jié)點類型。9為document節(jié)點，1為element節(jié)點，3代表text節(jié)點，8代表comment節(jié)點，11代表documentFragment節(jié)點
nodeValue 當(dāng)前節(jié)點為文本節(jié)點時的文本內(nèi)容
nodeName 節(jié)點的標(biāo)簽名。（文本節(jié)點為#text）

以下是元素節(jié)點的操作

firstElementChild 第一個子元素節(jié)點
lastElementChild 最后一個子元素節(jié)點
nextElementSibling 下一個元素節(jié)點
previousElementSibling 上一個元素節(jié)點
childElementCount 子元素節(jié)點
children 所有子元素節(jié)點

屬性操作

getAttribute() 獲取節(jié)點的屬性
setAttribute() 設(shè)置節(jié)點的屬性
hasAttribute()
removeAttribute()方法
id
className
textContent 非IE，獲得該節(jié)點內(nèi)的所有子節(jié)點（包含文本節(jié)點）的文字信息，所有標(biāo)簽信息會被去掉。IE下為undefined.
innerText IE專屬，獲得該節(jié)點內(nèi)的所有子節(jié)點（包含文本節(jié)點）的文字信息。所有標(biāo)簽信息會被去掉。
outerText IE專屬，獲得該節(jié)點和所有子節(jié)點點（包含文本節(jié)點）的文字信息。同上。
innerHTML 獲得該節(jié)點內(nèi)所有子節(jié)點的html信息。
outerHTML 獲得該節(jié)點和所有子節(jié)點的html信息。
節(jié)點的CSS屬性通過style來修改，所有CSS中用-連接的CSS屬性都變成駝峰式直接修改。例如：document.getElementById("test").style.backgroundColor = "#ccc"。
innerHTML, outerHTML, innerText, outerText屬性的區(qū)別

事件document.addEventListener("DOMContentLoaded", function()
Unknown macro: {// Code}
, false);

getBoundingClientRect相關(guān)

left 元素的左邊距離可視窗口左邊的距離
right 元素的右邊距離可視窗口左邊的距離
top 元素的上邊距離可視窗口頂部的距離
bottom 元素的下邊距離可視窗口頂部的距離
width 元素的寬
height 元素的高
x/y 目前來看與let/top相同

鼠標(biāo)相關(guān)事件位置屬性

screenX/screenY 鼠標(biāo)點擊位置距離屏幕左上角的位置
clientX/clentY 鼠標(biāo)點擊位置距離可視窗口左上角的位置
pageX/pageY 鼠標(biāo)點擊位置距離文檔左上角的位置
offsetX/offsetY 鼠標(biāo)點擊位置距離當(dāng)前元素的邊框內(nèi)的位置
layerX/layerY 鼠標(biāo)點擊位置距離當(dāng)前元素的距離最近的非static的元素的位置

滾動相關(guān)

scrollTop 元素垂直方向被卷去的像素的距離
scrollLeft 元素水平方向被卷去的像素的距離
window.scrollX(window.pageXOffset) 文檔/頁面水平方向滾動的像素值
window.scrollY(window.pageYOffset) 文檔/頁面垂直方向滾動的像素值
scrollTo(xpos, ypos) 將內(nèi)容滾動到指定的坐標(biāo)
scrollBy(xnum, ynum) 將內(nèi)容向右下滾動的像素數(shù)

元素大小相關(guān)

offsetWidth=border+padding+width
offsetHeight=border+padding+height
clientWidth=padding+width-滾動條寬度
clientHeight=padding+height-滾動條寬度
scrollWidth=padding+包含內(nèi)容的完全寬度
scrollHeight=padding+包含內(nèi)容的完全高度

thanks jack.wang"s wiki