《DOM启示录》第二章

最新推荐文章于 2023-12-20 21:16:42 发布

chuomu8273

最新推荐文章于 2023-12-20 21:16:42 发布

阅读量132

点赞数

原文链接：https://my.oschina.net/u/1792175/blog/598015

版权

第二章 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>

转载于:https://my.oschina.net/u/1792175/blog/598015