簡單聊聊DOM

MASAILA 發布于2019-08-23 11:35 / 3073人閱讀

摘要：討論在如何去使用元素用于在頁面中嵌入或引入腳本代碼，該元素默認被定義在元素中頁面內容該屬性定義規定的文本類型，可以為類型也可以為類型等其他類型和屬性類似，這個屬性定義腳本使用的語言，該屬性不是標準規范定義引用外部腳本的內嵌代碼與內

討論在HTML如何去使用JavaScript

內嵌javascript代碼：與內嵌樣式表的用法一樣，就是將javascript代碼通過

外聯JavaScript文件：類似于外聯樣式表的用法，將JavaScript代碼編寫在獨立的JavaScript文件中，再通過HTML頁面的

JavaScript文件內容：

var username=document.getElementById("username");
console.log(username);

在元素內部:

在元素內部： DOM

D:document,就是dom將html頁面解析為一個文檔，同時提供了document對象
O:object，就是dom將html頁面中每個元素解析為一個對象
M:model，就是dom中表示各個對象之間的關系

Dom的作用

Dom被設計用于解析HTML頁面文檔，方便JavaScript語言通過dom訪問和操作HTML頁面中的內容
Dom是由w3c組織定義標準規范，并且由各大瀏覽器廠商支持，嚴格意義上來講，dom并非屬于JavaScript語言
之所以可以在JavaScript語言中使用dom，是因為各大瀏覽器將dom的標準規范內容封裝成了JavaScript語言所支持的形式
對dom中的對象，我們只有調用的權限，沒有修改的權限，也說明了這個問題
瀏覽器加載并運行html頁面后，會創建dom結構。由于dom中的內容被封成了JavaScript語言中的對象，所以我們可以使用JavaScript語言通過dom結構來訪問和操作html頁面中的內容

節點

節點原本是網絡術語，表示網絡中的連接點，一個網絡是由一些節點構成的集合，在dom樹結構中，節點也是很重要的一個概念，簡單來說，節點作為dom樹結構中的連接點，最終構成了完整的dom樹結構
通過節點概念，可以將原本的dom樹結構改成dom節點樹結構進行表示
dom中的m表示model，也可以用來表示dom節點樹結構中節點之間的關系
在dom節點樹結構中，主要具有以下三層關系：
父級與子級關系
祖先與后代關系
兄弟關系

Document對象

getElementById()方法：獲取元素的id屬性,返回單個

getElementsByName()方法：獲取元素的name屬性，返回一個集合

getElementsByTagName()方法：獲取html元素，返回一個集合

getElmeentsByClassName()方法：獲取元素的calss屬性，返回一個集合

querySelector()方法：可以通過選擇器獲取頁面元素，返回單個

querySelectorAll()方法：可以通過選擇器獲取頁面元素，返回一個集合

動態集合(HTMLCollection):根據HTML元素變化而變化，該集合的length屬性值是變化的
靜態集合(NodeList):不會根據HTML元素變化而變化，如果執行刪除操作，該集合可能存在已不存在的元素，但是不會影響length屬性值的變化

createElement("元素名"):創建元素節點

createTextNode("文本內容"):創建文本節點

createAttribute("屬性名稱"):創建屬性節點

屬性名稱.nodeValue="屬性值":創建屬性節點的屬性值

父級元素.appendChild(子級元素):把子級元素添加到父級元素上

GPU云服務器云服務器聊聊聊聊webrtc網關聊聊webrtc網關服務器 DOM

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97163.html

不得不聊聊的react--入門篇

摘要：一誕生的性能瓶頸，主要有以下原因。注意組件類的第一個字母必須大寫，否則會報錯。組件并不是真實的節點，而是存在于內存之中的一種數據結構，叫做虛擬。此外，還提供兩種特殊狀態的處理函數。不會隨著時間改變可能不是。本文為學習筆記，適合入門的童鞋，如有錯誤，請多多指教。一、react誕生 Web app的性能瓶頸，主要有以下原因。（1）Web基于DOM，而DOM很慢。瀏覽器打開網頁時，需要...

lidashuang 2019-08-19 18:04 評論0 收藏0
聊聊為什么淘寶要提出「雙飛翼」布局

摘要：于是，淘寶軟對針對圣杯的缺點做了優化，并提出雙飛翼布局。綜合來看，不管的大小高低如何，雙飛翼布局都能正常顯示，嗯確實很優秀。錘子和釘子綜上所見，雙飛翼布局更勝一籌。 showImg(https://segmentfault.com/img/bVYtjF?w=922&h=561); 前言突然有一天，腦之里不知怎地蹦出一個詞，「雙飛翼」，這是很久以前的淘寶提出的一種三欄布局優化方案，然而...

junbaor 2019-08-29 13:47 評論0 收藏0
JS 一定要放在 Body 的最底部么？聊聊瀏覽器的渲染機制

摘要：所以，拋開這些歧義和陷阱，我的問題變成了標簽的位置會影響首屏時間么然而答案并不是那么顯而易見，這得從瀏覽器的渲染機制說起。說明：本文提到的瀏覽器均是指Chrome。 script標簽指的都是普通的不帶其他屬性的外聯javascript。 web性能優化的手段并不是非黑即白的，有些手段過頭了反而降低性能，所以在討論條件和結論的時候，雖然很多條件本身會帶來其他細微的負面或正面影響，為...

VincentFF 2019-08-19 17:22 評論0 收藏0
從一次報錯聊聊 Point 事件

摘要：定位問題根據調用棧很快定位到了代碼，源碼定位到之前一位同事寫的組件代碼，大概是這樣的部分業務代碼報錯的地方部分業務代碼發現是觸發了事件，因為沒有這個字段，導致拋出異常。它的和鼠標事件很像，非常容易遷移。同步自我的博客，歡迎交流這篇文章在草稿箱里躺了很久，因為最近又遇到了相關問題，于是又整理了一下。請注意這里講的不是 css 的 pointer-events。起因從某個月黑風高的...

quietin 2019-08-20 16:32 評論0 收藏0
聊聊jQuery的反模式

摘要：如果我們認為模式代表一個最佳的實踐，那么反模式將代表我們已經學到一個教訓。受啟發于的設計模式，在年的月的報告大會上首次提出反模式。參考鏈接反模式學用設計模式極客學院如果我們認為模式代表一個最佳的實踐，那么反模式將代表我們已經學到一個教訓。受啟發于Gof的《設計模式》，Andrew Koeing在1995年的11月的C++報告大會上首次提出反模式。在Koeing的報告中，反模式有著兩...

CoderStudy 2019-08-19 17:45 評論0 收藏0