資訊專欄INFORMATION COLUMN
摘要：前端知識點即文檔對象模型，是一種用于和文檔的編程接口。指的是返回當前元素的所有元素節點，代碼如下打印結果很直觀的返回元素節點的屬性。接下來對比父節點，父元素兩者在通常情況下是一樣的，因為包含元素的節點只有可能是元素節點。運行劫奪一致，都是。
前端DOM知識點
DOM即文檔對象模型（Document Object Model，DOM）是一種用于HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，可以改變文檔的內容和呈現方式。DOM把網頁和腳本以及其他的編程語言聯系起來。DOM屬于瀏覽器的，而非JavaScript語言規范里規定的核心內容。W3C規范中常用的DOM節點類型有以下幾種： 一、查找元素
document.getElementById 根據ID獲取一個標簽 document.getElementsByName 根據name屬性獲取標簽集合 document.getElementsByClassName 根據class屬性獲取標簽集合 document.getElementsByTagName 根據標簽名獲取標簽集合
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的報錯。
二、操作innerText //文本 innerHTML //HTML內容 value //值
attributes // 獲取所有標簽屬性 setAttribute(key,value) // 設置標簽屬性 getAttribute(key) // 獲取指定標簽屬性
className // 獲取所有的類名 classList.remove(cls) // 刪除指定類 classList.add(cls) // 添加類
a.創建標簽
// 方式一
var tag = document.createElement("a")
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.
// 方式二
var tag = "
b.操作標簽
// 方式一
var obj = "";
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 清除單次定時器
三、事件
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101294.html
摘要：所有我們不熟悉或者沒有掌握的知識皆可稱之為知識盲區，有知識盲區并不可怕，針對知識盲區去學習即可。只有這樣，我們才會準確知道自己的知識盲區所處何處，以及發現更多的知識盲區。節點對應的對象是，其他的具體節點對象全都是繼承自對象。 前端時間在部門內進行分享，準備素材時偶然發現下面的一個現象，因為和當時分享的主題無關，就先記下來了，事后重新審視，并把一些思考記錄如下： 一、問題 HTML： ...
摘要：前端知識點總結什么是什么是專門操作網頁內容的標準為什么統一不同瀏覽器操作網頁內容的標準優點幾乎所有瀏覽器兼容什么是網頁中所有內容在內存中都是保存在一棵樹形結構中網頁中每項內容元素文本屬性注釋，都是樹上的一個節點對象。 前端知識點總結——DOM 1.什么是DOM: Document Object Model 什么是: 專門操作網頁內容的API標準——w3c 為什么: 統一不同瀏覽器操作網...
摘要：前端渲染過程的二三事本文不會介紹整個前端渲染過程的步驟，只是記錄最近閱讀的文章的些許思考和感悟。那么現在我們可以明白這個問題的關鍵所在了，因為在大部分頁面中是擁有的，而由于其解析順序，那么在事件之前必定已經成功構造樹。 前端渲染過程的二三事 本文不會介紹整個前端渲染過程的步驟，只是記錄最近閱讀的文章的些許思考和感悟。（文章地址一（系列）,文章地址二） 希望大家在閱讀這篇文章之前能將上述...
摘要：手把手教你做個人火的時候，隨便一個都能賺的盆滿缽滿，但是，個人沒有服務端，沒有美工，似乎就不能開發了，真的是這樣的嗎秘密花園經典的中文手冊。涵蓋前端知識體系知識結構圖書推薦以及入門視頻教程，全的簡直不要不要的了。 JavaScript 實現點擊按鈕復制指定區域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實現點擊按鈕復制區域文本的功能，不需要依賴 flash。...
摘要：下面我們撇開網絡方面的優化，只分析靜態資源方面的優化。不過，也會阻止的構建和延緩網頁渲染。未優化正常加載優化后異步加載根據上面的分析，我們可以清楚的認識到，非必要優先加載的，選擇異步加載是最優選擇。 為什么做優化 經典問題：白屏時間過長，用戶體驗差產生的原因：網絡問題、關鍵渲染路徑（CRP）問題 怎么做優化 如何做好優化呢，網上隨便一搜，就有很多優化總結，無非就是網絡優化、靜態資源（h...
閱讀 1439·2021-11-11 16:54
閱讀 9319·2021-11-02 14:44
閱讀 2371·2021-10-22 09:53
閱讀 3259·2019-08-30 11:18
閱讀 1951·2019-08-29 13:29
閱讀 2003·2019-08-27 10:58
閱讀 1623·2019-08-26 11:38
閱讀 3518·2019-08-26 10:31
