简易 Javascript DOM 包 | 元素水平垂直居中 | 动态执行 JS 代码 | 获取指定元素
这个简易的 DOM 包提供了三个功能，一是使特定的元素水平或者垂直居中；二是可以动态地执行字符串中的 JS 代码；三是最常用的一个操作，即：通过元素 ID 来获取指定的元素，返回单个元素引用或者多个元素引用的数组。
来看看源码：
/**
* jscript.dom package
* This package contains functions for accessing and manipulating the DOM.
*/
/*命名空间*/
if (typeof jscript == 'undefined') {
jscript = function() { }
}
jscript.dom = function() { }
/**
* Center a given layer on the screen horizontally.
*（水平居中一个元素 inObj）
* @param inObj A reference to the element (presumably a layer) to center.
*/
jscript.dom.layerCenterH = function(inObj) {
var lca;
var lcb;
var lcx;
var iebody;
var dsocleft;
iebody = (document.compatMode &&
document.compatMode != "BackCompat") ?
document.documentElement : document.body;/*判断 IE 中页面采用的渲染方式*/
if (window.innerWidth) {
lca = window.innerWidth;
} else {
lca = iebody.clientWidth;
}/*获取浏览器窗口的宽度*/
lcb = inObj.offsetWidth;/*获取 layer 的宽度*/
lcx = (Math.round(lca / 2)) - (Math.round(lcb / 2));
dsocleft = document.all ? iebody.scrollLeft : window.pageXOffset;
inObj.style.left = lcx + dsocleft + "px";
} // End layerCenterH().
/**
* Center a given layer on the screen vertically.
*（垂直居中一个元素）
* @param inObj A reference to the element (presumably a layer) to center.
*/
jscript.dom.layerCenterV = function(inObj) {
var lca;
var lcb;
var lcy;
var iebody;
var dsoctop;
iebody = (document.compatMode &&
document.compatMode != "BackCompat") ?
document.documentElement : document.body;
if (window.innerHeight) {
lca = window.innerHeight;
} else {
lca = iebody.clientHeight;
}
lcb = inObj.offsetHeight;
lcy = (Math.round(lca / 2)) - (Math.round(lcb / 2));
dsoctop = document.all ? iebody.scrollTop : window.pageYOffset;
inObj.style.top = lcy + dsoctop + "px";
} // End layerCenterV().
/**
* This function is used to execute all the script blocks found in a
* chunk of text. This is typically used to execute the scripts found in
* an AJAX response.
*（此函数用来执行 <script> 块里面的 js 代码，可以把它用在 AJAX 的 response 上，也就是用来执行 response 里面的 <script>）
* @param inText The text to parse scripts from to execute.
*/
jscript.dom.execScripts = function (inText) {
var si = 0;
while (true) {
// Finding opening script tag.（找到开始处的标签）
var ss = inText.indexOf("<" + "script" + ">", si);
if (ss == -1) {
return;
}
// Find closing script tag.（找到闭合处的标签）
var se = inText.indexOf("<" + "/" + "script" + ">", ss);
if (se == -1) {
return;
}
// Jump ahead 9 characters, after the closing script tag.（跳过 9 个字符）
si = se + 9;
// Get the content in between and execute it.
var sc = inText.substring(ss + 8, se);
eval(sc);
}
} // End execScripts().
/**
* This function accepts one or more DOM IDs and returns an array which
* contains a reference to all of them. If no arguments are passed in,
* null is returned. If a single ID is passed in, a single element is
* returned. If more than one ID is passed in, an array is passed back.
*（当传入一个 ID 的时候返回一个单独的 element，若传入多个 ID 的时候则会返回 elements 数组）
* @param ?? A variable number of arguments, each being a DOM ID to get a
* reference to (or a single ID).
* @return Null is no arguments passed in, or a reference to a single
* DOM element if one ID passed in, or an array of references to
* DOM elements if multiple IDs passed in.
*/
jscript.dom.getDOMElements = function() {
if (arguments.length == 0) {
return null;
}
if (arguments.length == 1) {
return document.getElementById(arguments[0]);
}
var elems = new Array();
for (var i = 0; i < arguments.length; i++) {
elems.push(document.getElementById(arguments[i]));
}
return elems;
} // End getDOMElements().
这个包提供了跨浏览器的实现，注意代码在 IE 中的处理，与 IE 的版本相关，判断采用的渲染方式：
iebody = (document.compatMode && document.compatMode != "BackCompat") ?
document.documentElement : document.body;
当 document.compatMode 等于 BackCompat（标准兼容模式关闭） 时，iebody 要取 document.body;
当 document.compatMode 等于 CSS1Compat （标准兼容模式开启）时，iebody 要取 document.documentElement。
来看看测试代码：
<a href="javascript:void(0);"
onClick="jscript.dom.execScripts('this is a string<script>alert(\'I am script within a string\');</script>more string');">
execScripts()-Execute the script blocks in a string
</a>
<br /><br />
<div id="testElem1">testElem1</div>
<div id="testElem2">testElem2</div>
<a href="javascript:void(0);"
onClick="alert(jscript.dom.getDOMElements('testElem1'));alert(jscript.dom.getDOMElements('testElem1','testElem2'));">
getDOMElements()-Get a single element, then multiple elements
</a>
<br /><br />
来看看测试效果：
execScripts()-Execute the script blocks in a string
testElem1
testElem2
getDOMElements()-Get a single element, then multiple elements
这里只测试了：execScripts() 和 getDOMElements() ，元素居中的函数可以自行测试下！：->