js高級程序設計筆記7--DOM2和DOM3

2024-04-27 15:06:00

字體：大中小

來源：轉載

供稿：網友

選擇符API

Selectors API是由W3C發起制定的一個標準。致力于讓瀏覽器原生支持CSS查詢。

querySelector()方法

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

var body = document.querySelector("body");var myDiv = document.querySelector("#myDiv");var selected = document.querySelector(".selector");var img = document.body.querySelector("img.button");

如果傳入了不被支持的選擇符，querySelector()方法會拋出錯誤。

querySelectorAll()方法

接收的參數與querySelector()方法一樣，但是返回的是一個NodeList的實例。

//取得所有<p>元素中的所有<strong>元素var strongs = document.querySelectorAll("p strong");

matchesSelector()方法

傳入一個css選擇符，如果調用元素與該選擇符匹配，則返回true.很多瀏覽器還沒有支持matchesSelector()方法，各個瀏覽器實現的方法不同。如果要用則寫過包裝函數。

元素遍歷

對于元素間的空格，IE9及之前的版本不會返回文本節點，而其他瀏覽器都會返回文本節點。為了彌補這一差異，Element Traversal規范新定義了一組屬性。 childElementCount:返回子元素（不包括文本節點和注釋）的個數。 firstElementChild:指向第一個子元素 lastElementChild:指向最后一個子元素。 PReviousElementSibling:指向前一個同輩元素。 nextElementSibling:指向后一個同輩元素。

HTML5擴展DOM

getElementsByClassName()方法：接收一個參數，一個包含一或多個類名的字符串，返回帶有指定類的所有元素的NodeList。var selected = document.getElementById("myDiv").getElementByClassName("selected");classList屬性：HTML5新增了一種操作類名的方式。可以讓操作更簡單更安全。這個classList屬性時新集合類型DOMTokenList的實例。DOMTokenList有個length屬性，并有以下方法： add(value):將給定的字符串添加到列表中。 contains(value):表示列表中是否存在給定的值。 remove(value):從列表中刪除指定的字符串。 toggle(value):如果存在則刪除，不存在則添加。<div class="bd user disabled">...</div>div.classList.remove("disabled");div.classList.add("current");

支持classList屬性的瀏覽器有Firefox3.6+和Chrome.

焦點管理

HMTL5也添加了管理DOM焦點的功能。 document.activeElement：這個屬性始終會引用DOM中當前獲得了焦點的元素。

var button = document.getElementById("muButton");button.focus();alert(document.activeElement == button);//true

document.hasFocus()方法：用于確定文檔是否獲得了焦點。

HTMLDocument的變化

HTML5擴展了HTMLDocument。 1. readyState屬性：有兩個可能的值：loading(正在加載文檔（,complete(已經加載文檔).

if(document.readyState == "complete"){ //執行操作}兼容模式為了區分頁面的模式是標準的還是混雜的。IE為此給document添加了一個名為compatMode的屬性。標準模式下，document.compatMode的值為”CSS1Compat”,混雜模式下為”BackCompat”.

document.head引用文檔的元素。 document.charset:文檔中實際使用的字符集。 document.defaultCharset:瀏覽器設置的文檔默認的字符集。

自定義數據屬性

HTML5規定可以為元素添加非標準的屬性，但要添加前綴data-.

可以通過元素的dataset屬性來訪問自定義屬性的值。

var appId = div.dataset.appId;var myName = div.dataset.myname;

插入文本

innerText:但firefox不支持 textContent:firefox支持

function getInnerText(element){ return (typeof element.textContent == "string")?element.textContent:element.innerText;}

css規則

CSSRule對象表示樣式表中的每一條規則。

div.box{ background-color:blue; width:100px; height:200px;}假設這條規則位于頁面中的第一個樣式表中。var sheet = document.styleSheets[0];var rules = sheet.cssRules || sheet.rules;//取得規則列表var rule = ruless[0];alert(rule.selectorText);//div.boxalert(rule.style.cssText);//完整的CSS代碼alert(rule.style.backgroundColor);//blue

創建規則

insertRule(規則文本，表示在哪里插入規則的索引).

sheet.insertRule("body{backgournd-color:silver}",0);

但IE8及更早版本不支持此方法，而是另外一個方法：

sheet.addRule("body{backgournd-color:silver}",0);

刪除規則

deleteRule(pos):接受一個參數，要刪除的規則的位置。 IE支持的方法removeRule()。

元素大小

偏移量。

offsetHeight:元素在垂直方向上占用的空間大小。以像素計。包括元素的高度，水平滾動條的高度、上邊框高度和下邊框高度。 offsetWidth:元素在水平方向上占用的空間大小。 offsetLeft:元素的左外邊框至包含元素的左內邊框之間的像素距離。 offsetTop:元素的上外邊框至包含元素的上內邊框之間的像素距離。 offsetParent:對包含元素的引用。取得元素的左偏移量(上偏移量類似原理)。

function getElementLeft(element){ var actualLeft = element.offsetLeft; var current = element.offsetParent; while(current != null){ acrualLeft += current.offsetLeft; current = current.offsetParent; } return actualLeft;}

所有這些偏移量都是只讀的，而且每次訪問他們都需要重新計算。因此盡量避免重復訪問這些屬性。 2. 客戶區大小指的是元素內容及其內邊距所占據的空間大小。 clientWidth:元素內容區域寬度加上左右內邊距寬度。 clientHeight:元素內容高度加上上下內邊距高度。 3. 滾動大小 scrollHeight:在沒有滾動條的情況下，元素內容的總高度。 scrollWidth:在沒有滾動條的情況下，元素內容的總寬度。 scrollLeft:被隱藏在內容區域左側的像素數。通過設置這個屬性可變改變元素的滾動位置。 scrollTop:被隱藏在內容區域上方的像素數。

遍歷

“DOM2級遍歷和范圍”模塊定義了兩個用于完成順序遍歷DOM結構的類型：NodeIterator和TreeWalder. 能夠基于給定的起點對DOM結構執行深度優先的遍歷操作。檢測瀏覽器是否支持：

var supportsTraversals = document.implementation.hasFeature("Traversal","2.0);var supportNodeIterator= (typeof document.createNodeIterator == "function");var supportTreeWalder = (typeof document.createTreeWalder == "function");

document.createNodeIterator()方法接收四個參數： root:想要作為搜索起點的樹中的節點。 whatToShow:表示要訪問那些節點的數字代碼。 filter:一個NodeFilter對象，或者一個表示接受還是拒絕某種特定節點的函數。 entityReferenceExpansion:布爾值，表示是否要擴展實體引用。在HTML中沒有用。 whattoShow參數是一個位掩碼。

NodeFilter.SHOW_ALL:顯示所有類型的的節點。 NodeFilter.SHOW_ELEMENT:顯示元素節點。 NodeFilter.SHOW_TEXT:顯示文本節點。等等。

可以使用按位或操作符來組合多個選型。

var whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;

filter參數：可以傳入一個NodeFilter對象或者一個函數。每個NodeFilter對象只有一個方法，及acceptNode()方法。如果應該訪問給定的節點該方法返回NodeFilter.FILTER_ACCEPT,如果不應該訪問則返回NodeFilter.FILGER_SKip。傳入的函數與acceptNode()方法類似。

var filter = { acceptNode:function(node){ return node.tagName.toLowerCase() == "p"?NodeFilger.FILTER_ACCEPT:NodeFilter.FILTER_SKIP; }};var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false);

NodeIterator對象有兩個方法，nextNode()和previousNode()。第一次調用nextNode()返回根節點。

var div = document.getElementById("mydiv");var filter = function(node){ return node.tagName.toLowerCase() == "li"?NodeFilger.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;};var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false);var node = iterator.nextNode();while(node !== null){ alert(node.tagName); node = iterator.nextNode();}