Professional JavaScript for Web Developers 第四版學(xué)習(xí)筆記 CHAPTER 16:DOM Levels 2 and 3
DOM Changes 564
XML Namespaces 564
Changes to Node 566
Changes to Document 567
Changes to Element 567
Changes to NamedNodeMap 568
Other Changes 568
Changes to DocumentType 568
Changes to Document 569
Changes to Node 570
Changes to iframes 571
Styles 572
Accessing Element Styles 572
DOM Style Properties and Methods 573
Computed Styles 575
Working with Style Sheets 576
CSS Rules 577
Creating Rules 578
Deleting Rules 579
Element Dimensions 579
Offset Dimensions 579
Client Dimensions 581
Scroll Dimensions 582
Determining Element Dimensions 584
Traversals 584
NodeIterator 585
TreeWalker 588
Ranges 590
Ranges in the DOM 590
Simple Selection in DOM Ranges 591
Complex Selection in DOM Ranges 592
Interacting with DOM Range Content 593
Inserting DOM Range Content 596
Collapsing a DOM Range 597
Comparing DOM Ranges 597
Cloning DOM Ranges 598
Cleanup 598
Summary 599
這一章似曾相識(shí)，主要是介紹XML的拓展，下面這段由于語(yǔ)法優(yōu)美，我還整段背誦過(guò)。
The interesting problem with a document such as this is what happens when a method is called on the document to interact with nodes in the document. When a new element is created, which namespace does it belong to? When querying for a specific tag name, what namespaces should be included in the results? DOM Level 2 Core answers these questions by providing namespace-specific versions of most DOM Level 1 methods.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML page</title>
</head>
<body>
<s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" style="width:100%; height:100%">
<s:rect x="0" y="0" width="100" height="100" style="fill:red" />
</s:svg>
</body>
</html>
------------------------------------------------------
let newNode = document.importNode(oldNode, true); // import node and all children
document.body.appendChild(newNode);
let parentWindow = document.defaultView || document.parentWindow;
let doc = document.implementation.createDocument("", "root", null);
let doctype = document.implementation.createDocumentType("html", "-// W3C// DTD XHTML 1.0 Strict// EN","http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd");
let doc = document.implementation.createDocument("http://www.w3.org/1999/xhtml","html", doctype);
let div1 = document.createElement("div");
div1.setAttribute("class", "box");
let div2 = document.createElement("div");
div2.setAttribute("class", "box");
console.log(div1.isSameNode(div1)); // true
console.log(div1.isEqualNode(div2)); // true
console.log(div1.isSameNode(div2)); // false
let div = document.createElement("div");
div.setUserData("name", "Nicholas", function(operation, key, value, src, dest) {
if (operation == 1) {
dest.setUserData(key, value, function() {}); }
});
let newDiv = div.cloneNode(true);
console.log(newDiv.getUserData("name")); // "Nicholas"
contentDocument,contentWindow
--------------------------------------------------------
document.styleSheets
let sheet = document.styleSheets[0];
let rules = sheet.cssRules || sheet.rules; // get rules list
let rule = rules[0]; // get first rule
console.log(rule.selectorText); // "div.box"
console.log(rule.style.cssText); // complete CSS code
console.log(rule.style.backgroundColor); // "blue"
console.log(rule.style.width); // "100px"
console.log(rule.style.height); // "200px"
可以通過(guò)這個(gè)屬性，對(duì)非行內(nèi)的樣式表進(jìn)行精細(xì)化控制。
-------------------------------------------------
let filter = function(node) {
return node.tagName.toLowerCase() == "p" ?
NodeFilter.FILTER_ACCEPT :
NodeFilter.FILTER_SKIP;
};
let iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT,
filter, false);
--------------------------------
let div = document.getElementById("div1");
let walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);
walker.firstChild(); // go to <p>
walker.nextSibling(); // go to <ul>
let node = walker.firstChild(); // go to first <li>
while (node !== null) {
console.log(node.tagName);
node = walker.nextSibling();
}
-----------------------------------------------------------
setStart() ， setEnd()， deleteContents()， extractContents()，cloneContents()，insertNode()，surroundContents()，collapse()，collapsed，compareBoundaryPoints()，cloneRange()，detach()
let p1 = document.getElementById("p1"),
helloNode = p1.firstChild.firstChild,
worldNode = p1.lastChild,
range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);
let fragment = range.extractContents();
p1.parentNode.appendChild(fragment);