动态创建并访问网页元素-CSDN博客

最近在做OCX控件，但这个控件并不是一打开网页就需要初始化的，而是根据需要动态创建；在控件初始化的时候需要在控件内部获取其在网页中的DOM对象；并且创建之后需要立刻调用控件的方法。

最开始的方法如下：

1 var ctrl = document.createElement('object');
2 ctrl.classid = 'CLSID:DCC16727-7A51-47B4-B38E-B020EAAF0584';
3 document.body.appendChild(ctrl);

这个方法在IE11中什么问题都没有；但在IE9中，控件初始化时获取不到其在网页中的DOM对象。

通过测试，直接在页面中添加相应的HTML代码是可以在控件初始化的时候获取到其在网页中的DOM对象的。

<HTML>
<HEAD>
<TITLE>ATL test page for object Test3</TITLE>
</HEAD>
<BODY>
<OBJECT ID="Test3" CLASSID="CLSID:DCC16727-7A51-47B4-B38E-B020EAAF0584"></OBJECT>
</BODY>
</HTML>

在网上搜了搜，搜到这么一篇文章《FAQ: 如何动态创建并访问网页元素》，他的思路是在OCX中用insertAdjacentHTML方法创建。这个方法无法解决“控件初始化时获取不到其在网页中的DOM对象”这问题。

看了这篇文章的实现思路，让我想起了以前看的DOM的过桥、重排与重绘的概念（参考《高性能JavaScript DOM编程以及重排与重绘》），调用getElementById会引起过桥，过桥会引起重排与重绘。

基于这个概念，于是就想通过innerHTML创建控件，是不是就跟一上来写好HTML代码是一样的。最终测试，这个方法可行。

最终代码如下：

var div = document.createElement('div');
div.innerHTML = '<OBJECT ID="Test4" CLASSID="CLSID:DCC16727-7A51-47B4-B38E-B020EAAF0584"></OBJECT>';
document.body.appendChild(div);
ctrl = document.getElementById('Test4');

如何在控件初始化时获取其在网页中的DOM对象，可参考我的另一篇文章《在OCX初始化时获取其在网页中的DOM对象》。

转载于:https://www.cnblogs.com/icedream/p/4804152.html