Professional JavaScript for Web Developers 第四版学习笔记 CHAPTER 14:The Document Object Model
Hierarchy of Nodes 492
The Node Type 492
The nodeName and nodeValue Properties 493
Node Relationships 494
Manipulating Nodes 495
Other Methods 497
The Document Type 498
Document Children 498
Document Information 499
Locating Elements 500
Special Collections 502
DOM Conformance Detection 503
Document Writing 504
The Element Type 506
HTML Elements 507
Getting Attributes 510
Setting Attributes 511
The attributes Property 511
Creating Elements 513
Element Children 513
The Text Type 514
Creating Text Nodes 515
Normalizing Text Nodes 516
Splitting Text Nodes 517
The Comment Type 517
The CDATASection Type 518
The DocumentType Type 518
The DocumentFragment Type 519
The Attr Type 520
Working with the DOM 521
Dynamic Scripts 521
Dynamic Styles 523
Manipulating Tables 525
Using NodeLists 528
Mutation Observers 529
Basic usage 529
The observe() method 529
Working with Callbacks and MutationRecords 530
The disconnect() method 532
Multiplexing a MutationObserver 532
Reusing a MutationObserver 533
Controlling the Observer scope with MutationObserverInit 534
Observing attribute mutations 535
Observing character data mutations 536
Observing child mutations 537
Observing subtree mutations 539
Async Callbacks and the Record Queue 540
Behavior of the Record Queue 540
The takeRecords() method 541
Performance, Memory, and Garbage Collection 541
MutationObserver References 541
MutationRecord References 542
Summary 542
------------------------------------------------------
appendChild(),insertBefore(),replaceChild(),removeChild(),cloneNode(),normalize()
-----------------------------------------------
documentElement always points to the <html> element in an HTML page.
----------------------------------------------
document.domain
A further restriction in the browser disallows tightening of the domain property once it has been loosened.
// page from p2p.wrox.com
document.domain = "wrox.com"; // loosen - succeeds
document.domain = "p2p.wrox.com"; // tighten - error!
--------------------------------------------------
attributes
The one area where the attributes property is useful is to iterate over the attributes on an element.
function outputAttributes(element) {
let pairs = [];
for (let i = 0, len = element.attributes.length; i < len; ++i) {
const attribute = element.attributes[i];
pairs.push(`${attribute.nodeName}="${attribute.nodeValue}"`);
}
return pairs.join(" ");
}
----------------------------------------------------
The other way to specify JavaScript code is inline.
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try {
script.appendChild(document.createTextNode(code));
} catch (ex){
script.text = code;
}
document.body.appendChild(script);
}
loadScriptString("function sayHi(){alert('hi');}");
-------------------------------------------------
MutationObserver
let observer = new MutationObserver(() => console.log('<body> attributes changed'));
observer.observe(document.body, { attributes: true });
document.body.className = 'foo';
console.log('Changed body class');
// Changed body class
//<body> attributes changed