简易 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() ，元素居中的函数可以自行测试下！：->