DOM初步了解

zhangqh 發布于2019-08-23 17:15 / 684人閱讀

摘要：什么是文檔對象模型是針對和文檔的一個應用程序編程接口。不好的地方，請多多指教

什么是DOM?

DOM（文檔對象模型）是針對HTML和XML文檔的一個API（應用程序編程接口）。

節點層次

Sample Page

Hello World!

操縱節點

添加一個節點：appendChild() 和 insertBefore()

替換節點：replaceChild()

移除節點：removeChild()

查找元素

document.getElementById() 返回對擁有指定ID的第一個對象的引用

document.getElementsByTayName() 返回一個對所有tag標簽引用的集合

document.getElementsByName() 返回 name 特性的所有元素，返回一個NodeList

document.getElementsByClassName() 獲取類名，如果有多個相同類名，最終得到 NodeList

document.querySelector() 方法接收一個CSS選擇符，返回與該模式匹配的第一個元素，如果沒有找到匹配的元素，返回null

document.querySelectorAll() 可以對多個元素進行匹配和操作，并把它們存儲在NodeList

設置元素樣式

語法：ele.style.styleName = styleValue

功能：設置ele元素的css樣式

例子：box.style.color = "#fff";

注：屬性是減號連接的復合形式時，必需要轉換為駝峰形式

DOM的操作特性

獲取元素的屬性：ele.getAttribute("attribute")

設置元素的屬性：ele.setAttribute("attribute",value)

刪除元素的屬性：ele.removeAttribute("attribute")

創建元素

document.createElement()

document.body.appendChild() 將新創建的元素添加到文檔body元素中


    1
    2

innerHTML

語法：ele.innerHTML = "html";

功能：獲取和設置標簽之間的文本和HTML內容

innerHTML 是 Element 對象的屬性；

textContent 與 innerText

設置和獲得標簽的文本內容

textContent 是 Node 對象的屬性；

innerText 是 HTMLElement 對象的屬性；

注：innerHTML、textContent 與 innerText之間的區別，有興趣的可以 Google 一下

className

為元素指定的CSS類，ele.className = "header";

小缺陷：設置元素class屬性時，會替換元素原有的class的屬性。當追加元素class屬性時，可以這樣操作：

   
   Hello World

自定義數據屬性

HTML5規定可以為元素添加非標準的屬性，但要添加前綴 data-，目的是為元素提供與渲染無關的信息，或者提供語義信息。

不好的地方，請多多指教

GPU云服務器云服務器人工智能初步 hadoop初步學習計算機的初步學習了解

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

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

jQuery（一）-- 初步了解

摘要：一初步了解介紹由創建于年一月的開源項目，憑借著跨平臺的兼容性，簡潔的語法，極大的簡化了人員遍歷文檔，操作，處理事件，執行動畫，和開發的操作。只建立一個名為的對象。對發生在同一個對象上的一組動作，可以直接連寫無需重復獲取對象。 jQuery（一）-- 初步了解 jQuery介紹由John Resig創建于2006年一月的開源項目，jQuery憑借著跨平臺的兼容性，簡潔的語法，極大的簡...

quietin 2019-08-26 10:43 評論0 收藏0
初步整理的關于 Progressive Web Apps 的資料

摘要：在上看到發的視頻被狂轉開始注意之前幾乎對這個詞語沒有印象看到是在的演講還以為是新技術在上找一下這次好多個視頻是關于的視頻的內容主要是講網站優化分別用做例子可惜沒有大概要等小右補方案應該沒有問題從視頻看優化的效果非常顯著本來好幾秒的在 Twitter 上看到 Addy Osmani 發的視頻被狂轉, 開始注意https://twitter.com/addyosmani/status/7...

luffyZh 2019-08-19 18:24 評論0 收藏0
jointJS系列之一：jointJS的的初步使用

摘要：由于是基于的，因此對有一定的了解會對的理解和使用有較大幫助。由于是基于的，因此有視圖和模型的概念。掛載的元素關聯聲明的元素的概念，就是圖形顯示的主體，可以有各種不同的形狀，預設有常用的矩形橢圓平行四邊形等。一、jointJS簡介 jointJS是一個基于svg的圖形化工具庫，在畫布上畫出支持拖動的svg圖形，而且可以導出JSON，也能通過JSON配置導入直接生成圖形。可以基于joi...

amuqiao 2019-08-23 10:56 評論0 收藏0
【page-monitor 前端自動化上篇】初步調研

摘要：前端自動化測試主要在于變化快，不穩定，兼容性復雜故而，想通過較低的成本維護較為通用的自動化比較困難。本文旨在通過獲取和分析結構，調研能否通過監控和分析核心，來進行前端自動化測試。相關文章前端自動化中篇源碼分析前端自動化下篇實踐應用前端自動化測試主要在于：變化快，不穩定，兼容性復雜；故而，想通過較低的成本維護較為通用的自動化case比較困難。本文旨在通過page-monitor獲取和分...

light 2019-08-20 10:11 評論0 收藏0
DOM的初步認識

摘要：是什么概述是個縮寫，全稱是。表示，就是將頁面解析為一個文檔，同時提供了對象。表示，就是中表示各個對象之間的關系。的作用用于解析頁面文檔，方便語言通過訪問和操作頁面中的內容。節點是什么節點作為樹結構中的連接點，最終構成了完整的樹結構 DOM DOM是什么概述 DOM是個縮寫，全稱是Document Object Model。D表示Document，就是DOM將HTML頁面解析為一個文檔...

李義 2019-08-23 11:32 評論0 收藏0