document 和 window.document

DOM访问差异详解

最新推荐文章于 2023-03-20 14:18:37 发布

最新推荐文章于 2023-03-20 14:18:37 发布 · 622 阅读

文章标签：

#document #对象

html 同时被 2 个专栏收录

3 篇文章

订阅专栏

document

3 篇文章

订阅专栏

本文通过实验对比了在不同浏览器环境下，使用document、window.document及window.parent.document获取元素的区别。通过具体的HTML示例代码展示了这些方法如何针对不同上下文中的元素进行操作。

今天看讲document 和 window.document区别的文章，自己测试了I8+和chrome，document 和window.document都指向了同一个对象，而window.document和window.parent.document是指向不同的对象。window.document指向当前文档对象，window.parent.document指向父窗体的当前文档对象

现放上代码：

main.html

<!DOCTYPE HTML>
<html>
	<head>
		<title>main</title>
	</head>
	<body>
		<input id='input1' type='text' name='name1' value='input1' />
		<iframe src='sub.html' > </iframe>
	</body>
</html>

sub.html

<!DOCTYPE HTML>
<html>
	<head>
		<title>sub</title>
	</head>
	<script type="text/javascript">
		function showA() {
			alert(document.getElementById('input2').value);
		}

		function showB() {
			alert(window.document.getElementById('input2').value);
		}
		
		function showC() {
			alert(window.parent.document.getElementById('input1').value);
		}
	</script>
	<body>
		<input id='input2' type='text' name='name2' value='input2' />
		
		<input type='button' name='but1' value='showA()' onclick='javascript:showA();' />
		
		<input type='button' name='but2' value='showB()' onclick='javascript:showB();' />
		
		<input type='button' name='but3' value='showC()' onclick='javascript:showC();' />
		
	</body>
</html>