當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

笔记《javascript高级程序设计》第12章 DOM2和DOM3

發布時間：2025/3/15 javascript 19 豆豆

生活随笔收集整理的這篇文章主要介紹了笔记《javascript高级程序设计》第12章 DOM2和DOM3 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

DOM2 級核心：在 1 級基礎上構建，為節點添加更多方法和屬性 DOM2 級視圖：為文檔定義了基于樣式信息的不同視圖 DOM2 級事件：說明了如何使用事件和DOM文檔交互 DOM2 級樣式：如何以編程方式來訪問和改變CSS樣式信息 DOM2 級遍歷和范圍：引入了遍歷DOM文檔和選擇其特定部分的新接口 DOM2 級HTML：添加了更多屬性、方法和新接口 12.1 DOM變化 DOM2 級和3級的目的在于擴展DOM API，滿足操作XML的所有需求，同時提供更好的錯誤處理及特性檢測能力。 12.1.2 其它方面的變化 1.DocumentType 類型變化新增3個屬性：publicID、systemID 表示的是文檔類型聲明中的兩個信息段，在DOM1中無法訪問 internalSubset ? ，用于訪問包含在文檔類型聲明中的額外定義 2.Document 類型的變化 importNode（）用途：從一個文檔中取得一個節點，然后將其導入另一個文檔。 ? 如果調用appendChild（）在不同文檔中傳入節點會出錯接受兩個參數：要復制的節點和一個表示是否復制子節點的布爾值。返回的結果是原來節點的副本，但能夠在文檔中使用 3.Node類型的變化 isSupported（）

isSameNode（） isEqualNode（）

4.框架的變化 12.2 樣式 12.2.1 ? 訪問元素的樣式 style 可以獲取和設置html元素style特性指定的所有樣式信息，但不包含與外部樣式表或嵌入樣式表經層疊而來的樣式。對于使用短劃線的css屬性名，必須將其轉換為駝峰大小寫形式 1.DOM樣式屬性和方法在提供元素的style特性值時，也可修改樣式 cssText：訪問style特性中的css代碼（寫入模式，以前通過style設定的樣式信息全將丟失） length：應用給元素的css屬性的數量 parentRule：表示CSS信息的CSSRule對象 getPropertyCSSValue（propertyName）：返回包含給定屬性值的CSSValue對象 getPropertyPriority（propertyName）：如果給定的屬性使用了!important設置，則返回 “important”，否則，返回空 gePropertyValue（propertyName）：返回給定屬性的字符串值 item（index）：返回給定位置的css屬性的名稱 removeProperty（propertyName）：從樣式中刪除給定屬性 setProperty（propertyName,value,priority）：將給定屬性設置為相應的值，并加上優先權標志( !important ?或 ? 一個空字符串) 2.計算的樣式

document.defaultView.getComputedStyle（mydiv，:after / null） —— 此方法在IE9 以下瀏覽器中無法生效

接受兩個參數，1 要取得計算樣式的元素 ? ， ?2 一個偽元素字符串：after，：before，或者為null

在IE8及以下中可使用 ?.currentStyle ?屬性，來獲取當前元素的樣式

兼容性最好求取元素所有樣式列表的方法 ?var computedStyle = window.getComputedStyle?document.defaultView.getComputedStyle(myDiv, null):myDiv.currentStyle; 以上方法計算出的樣式都是只讀，不能修改。包含屬性瀏覽器內部所有樣式信息，任何具有默認值的css屬性都會表現在計算后的樣式中。部分為瀏覽器為 ?visibility，部分為 visible ?，有的則為 ?inherit? 12.2.2 ?操作樣式表 styleSheets ?遍歷 styleSheets 循環可以獲取當前頁面通過 link 包含的樣式表和 style 元素定義的所有樣式表。以下屬性可以對樣式表進行獲取或者設置操作： disabled：表示樣式是否被禁用的布爾值。可讀 / 寫，true表示禁用 href：如果樣式表通過 link 包含，則返回樣式表的URL，否則為null 1. css規則。 cssStyleRule 對象包含下列屬性 ? offset偏移量 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>*{ margin: 0; padding: 0; }.waidiv{width: 600px; height: 700px; border: 6px #C0C0C0 solid;}.py{width: 200px; height: 150px; background: #444; padding: 4px; margin: 10px; border: 5px #FF0000 solid;}.par1{ padding: 40px;}.par2{ padding: 30px;}</style></head><body><div class="par2"><div class="par1"><div class="waidiv"><div id="py" class="py">偏移量測試</div></div></div></div><input type="button" value="元素寬" οnclick="getEleWidth()"/><input type="button" value="元素高" οnclick="getEleHeight()"/><input type="button" value="getOffsetLeft" οnclick="getEleoffLeft()"/><input type="button" value="getOffsetTop" οnclick="getEleoffTop()"/><input type="button" value="元素距瀏覽器頂部距離" οnclick="getActualTop(document.getElementById('py'))"/><input type="button" value="元素距瀏覽器左距離" οnclick="getActualLeft(document.getElementById('py'))"/><script>var py = document.getElementById("py");function getEleWidth(){alert(py.offsetWidth);}function getEleHeight(){alert(py.offsetHeight);}function getEleoffLeft(){alert(py.offsetLeft);}function getEleoffTop(){alert(py.offsetTop);}function getActualLeft(element){var actuaLeft = element.offsetLeft;var current = element.offsetParent;while( current !== null){actuaLeft += current.offsetLeft;current = current.offsetParent;};alert(actuaLeft);}function getActualTop(element){var actuaTop = element.offsetTop;var current = element.offsetParent;while(current !== null){actuaTop += current.offsetTop;current = current.offsetParent;};alert(actuaTop);}console.log()</script></body> </html>

混雜模式、標準模式下，scrollWidth、clientWidth、document.documentElement.scrollWidth、document.body.scrollWidth

對于混雜模式下IE 需要用?document.body代替document.documentElement

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>.testscroll{ width: 2000px; height: 1500px; background: #C0C0C0;}</style></head><body><div class="testscroll" id="adiv"></div><script>var adiv = document.getElementById("adiv");console.log("scrollWidth:"+document.documentElement.scrollWidth);console.log("scrollHeight:"+document.documentElement.scrollHeight);console.log("clientWidth:"+document.documentElement.clientWidth);console.log("clientHeight:"+document.documentElement.clientHeight);function getWin(){var mode = document.compatMode ;// 是否處于標準模式if(mode == "CSS1Compat"){// 疑問：是不是現在瀏覽器版本變高，然后都同步了？// 我測試過程中，谷歌、火狐、IE里clientWidth取到的都是視口寬度，書上說的谷歌scrollWidth為視口寬度alert("可視區域寬度為:"+document.documentElement.clientWidth);alert("可視區域高度為："+document.documentElement.clientHeight);// 由于瀏覽器之間存在差異，以scrollWidth和clientWidth中求大值最靠譜var docWin = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);var docHei = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);alert("標準模式下文檔的寬度："+docWin);alert("標準模式下文檔的寬度："+docHei);}// 是否處于混雜模式else if(mode == "BackCompat"){var docWin = Math.max(document.body.scrollWidth,document.body.clientWidth);var docHei = Math.max(document.body.scrollHeight,document.body.clientHeight);alert("混雜模式下文檔的寬度："+docWin);alert("混雜模式下文檔的寬度："+docHei);}}window.onload = function(){getWin();}</script></body> </html>

轉載于:https://www.cnblogs.com/fighxp/p/6269363.html

總結

以上是生活随笔為你收集整理的笔记《javascript高级程序设计》第12章 DOM2和DOM3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： EDA技术使用教程实验
下一篇： gradle idea java ssm

javascript

笔记《javascript高级程序设计》 第12章 DOM2和DOM3

總結

笔记《javascript高级程序设计》第12章 DOM2和DOM3