判断DOM树创建完毕

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>判断DOM树创建完毕</title>
	</head>
	<body>
		<script type="text/javascript">

// 判断DOM树创建完毕
function domReady(fn) {

	var d = window.document, done = false,

	// 只执行一次用户的回调函数init()
	init = function () {
		if (!done) {
			done = true;
			fn();
		}
	};

	(function () {
		try {
			// DOM树未创建完之前调用doScroll会抛出错误
			d.documentElement.doScroll(‘left‘);
		} catch (e) {
			//延迟再试一次~
			setTimeout(arguments.callee, 50);
			return;
		}
		// 没有错误就表示DOM树创建完毕,然后立马执行用户回调
		init();
	})();

	//监听document的加载状态
	d.onreadystatechange = function() {
		// 如果用户是在domReady之后绑定的函数,就立马执行
		if (d.readyState == ‘complete‘) {
			d.onreadystatechange = null;
			init();
		}
	};
}

domReady(function(){
	// alert(‘测试‘);
	var data = document.getElementById(‘data‘);
	data.innerHTML = ‘测试‘;
});

		</script>
		<div id="data">原内容</div>
	</body>
</html>

  

时间: 2024-08-05 12:18:07

判断DOM树创建完毕的相关文章

jQuery学习笔记之DOM树、创建新节点、append方法

DOM树. 创建新节点.创建元素节点和文本节点. 创建元素节点/文本节点/属性节点 节点内部插入元素append方法 节点内部插入元素prepend方法 节点外部插入元素after方法 节点外部插入元素before方法 DOM树 创建div元素节点 创建元素节点和文本节点 创建元素节点.文本节点.属性节点 append方法 prepend方法 after方法 before方法

编码、解码形成DOM树的过程

浏览器从网络或硬盘中获得HTML字节数据后会经过一个流程将字节解析为DOM树: 编码: 先将HTML的原始字节数据转换为文件指定编码的字符. 令牌化: 然后浏览器会根据HTML规范来将字符串转换成各种令牌(如<html>.<body>这样的标签以及标签中的字符串和属性等都会被转化为令牌,每个令牌具有特殊含义和一组规则).令牌记录了标签的开始与结束,通过这个特性可以轻松判断一个标签是否为子标签(假设有<html>与<body>两个标签,当<html>

【VB6】使用VB6创建和访问Dom树【爬虫基础知识 】

使用VB6创建和访问Dom树 关键字:VB,DOM,HTML,爬虫,IHTMLDocument 我们知道,在VB中一般大家会用WebBrowser来获取和操作dom对象. 但是,有这样一种情形,却让我们纠结不已: 我们需要做爬虫,然后爬虫不需要太高的效率,但是我们被复杂的正则表达式给弄的头晕眼花. 不知道何去何从. 今天,下定决心研究下html的解析,终于掌握了对IHTMLDocument等接口对象的使用. 源代码放在:http://www.extencent.com 具体的文章将会放在博客园以

页面全部加载完毕和页面dom树加载完毕

dom树加载完毕 $(document).ready() //原生写法document.ready = function (callback) {            ///兼容FF,Google            if (document.addEventListener) {                document.addEventListener('DOMContentLoaded', function () {                    document.rem

从Chrome源码看浏览器如何构建DOM树

.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 15px; text-indent: 2em } #colorbox.crayon-colorbox,#cboxOverlay.crayon-colorbox,.crayon-colorbox #cboxWrapper { position: absolute; top: 0; left: 0; z-

coreDOM 处理dom树

处理HTML文档的第一步就是获得文档元素的引用,每一个元素在dom中就是一个节点,所有的元素在dom中就构成了一个dom树.可以通过某一个节点找到其他说有的节点. 1.一切皆是节点 就是html中的所有的内容都被描述为节点,只是用不同的类型进行描述的的. eg: <p  font="13px #CCC">我是本文节点</p> p是元素节点 font 是属性节点,有属性和值 我是文本节点:是文本节点 2.Node 接口定义的方法 HTML文档中解析为dom后,所有

JS的Dom树小结

一[DOM树节点] DOM节点分为三大类:元素节点.文本节点.属性节点 文本节点.属性节点,为元素节点的两个子节点: 通过getElement系列方法,可以去到元素节点. 二[查看节点] 1.getElementById:通过ID获取唯一的节点:多个同名ID,只会取第一个: 2.getElementsByName:通过Name取到一个数组,包含1到多个节点: 使用方式:通过循环,取到每一个节点.循环次数:从0开始,<数组.length 三[查看和设置属性节点] 1.查看属性节点: getAttr

DOM树操作

DOM 操作 访问与树关系(节点) 绘制 DOM 树: childNodes, attributes 从一个中心元素访问其所有的直系亲属元素 访问父节点: parentNode 访问上一个兄弟节点: previousSibling 访问下一个兄弟节点: nextSibling 访问第一个属性节点: attributes[ 1 ] 访问第一个子节点:fristChild 或 childNodes[ 0 ] 访问最后一个子节点: lastChild 或 childNodes[ childNodes.

dom树的介绍,及原理分析

三.解析和DOM树的构建 1.解析: 由于解析渲染引擎是一个非常重要的过程,我们将会一步步的深入,现在让我们来介绍解析. 解析一个文档,意味着把它转换为一个有意义的结构——代码可以了解和使用的东西,解析 的结果通常是一个树的节点集合,用来表示文档结构,它被称为解析树或者语法树. 例子: 解析表达式“2+3-1”,返回树如下图3.1 1).语法: 解析是基于文档所遵循的语法规则——书写所用的语言或格式——来进行的.每一种可以解析的格式必须由确定的语法与词汇组成.这被称之为上下文无关语法. 人类语言