第二章 document节点
2.1 document节点
document节点的构造器是HTMLDocuemnt，HTMLDocument的原型的构造器是Document:
<!DOCTYPE html>
<html lang="en">
<body>
<script>
console.log(window.document instanceof Document);
console.log(window.document.constructor); //logs function HTMLDocument() { [native code] }
console.log(window.document.constructor.prototype instanceof Document);
console.log(window.document.nodeType); //logs 9, which is a numeric key mapping to DOCUMENT_NODE
</script>
</body>
</html>
2.2 HTMLDocument的属性和方法
<!DOCTYPE html>
<html lang="en">
<body>
<script>
//document自身的属性
console.log(Object.keys(document).sort());
//document所有的属性var documentPropertiesIncludeInherited = [];
for(var p in document){
documentPropertiesIncludeInherited.push(p);
}
console.log(documentPropertiesIncludeInherited.sort());
//document继承的属性
var documentPropertiesOnlyInherited = [];
for(var p in document){
if(
!document.hasOwnProperty(p)){documentPropertiesOnlyInherited.push(p);
}
}
console.log(documentPropertiesOnlyInherited.sort());
</script>
</body>
</html>
常见的属性：
doctype
- documentElement
- implementation.*
- activeElement
- body
- head
- title
- lastModified
- referrer
- URL
- defaultview
- compatMode
- ownerDocument
- hasFocus()
2.3
<!DOCTYPE html> <html lang="en"> <body> <script> var d = document; console.log(‘title = ‘ +d.title); console.log(‘url = ‘ +d.URL); console.log(‘referrer = ‘ +d.referrer); console.log(‘lastModified = ‘ +d.lastModified); //logs either BackCompat (Quirks Mode) or CSS1Compat (Strict Mode) console.log(‘compatibility mode = ‘ +d.compatMode); </script> </body> </html>
2.4 document的两个属性
<!DOCTYPE html> <html lang="en"> <body> <script> //This is the doctype/DTD console.log(document.childNodes[0].nodeType); //logs 10, which is a numeric key mapping to DOCUMENT_TYPE_NODE //This is the <html> element console.log(document.childNodes[1].nodeType); //logs 1, which is a numeric key mapping to ELEMENT_TYPE_NODE </script> </body> </html>
2.5 document提供了head，body，doctype的快捷方式
document.doctype refers to <!DOCTYPE>
- document.documentElement refers to <html lang="en">
- document.head refers to <head>
- document.body refers to <body>
2.6 使用document.implementation.hasFeature()检查DOM使用了DOM 2还是DOM3方案
<!DOCTYPE html> <html lang="en"> <body> <script> console.log(document.implementation.hasFeature(‘Core‘,‘2.0‘)); console.log(document.implementation.hasFeature(‘Core‘,‘3.0‘)); </script> </body> </html>
2.7 使用document.activeElement来获取当前激活的节点
<!DOCTYPE html> <html lang="en"> <body> <textarea></textarea> <script> //set focus to <textarea> document.querySelector(‘textarea‘).focus(); ?//get reference to element that is focused/active in the document console.log(document.activeElement); //logs <textarea> </script> </body> </html>
2.8 window.defaultView
<!DOCTYPE html> <html lang="en"> <body> <script> console.log(document.defaultView) //reference, head JS object. Would be window object in a browser. </script> </body> </html>
2.9 ownerElement
<!DOCTYPE html> <html lang="en"> <body> <iframe src="http://someFileServedFromServerOnSameDomain.html"></iframe> <script> //get the window.document that the <body> is contained within console.log(document.body.ownerElement); //get the window.document the <body> inside of the iframe is contained within console.log(window.frames[0].document.body.ownerElement); </script> </body> </html>
时间： 2024-10-06 00:29:16