ajaxcn.org 中一道编程题

用标准的DOM方法动态创建一个包含文本"Hello Ajax!"的DIV，用静态CSS定义或者用脚本设置style属性，使得该DIV高度宽度都为500px，文字颜色为黄色，背景色为红色，同时该DIV的文字垂直和水平方向都居中。

METHOD ONE:

< html >
< head >
     < meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "   />
     < title > Hello Ajax </ title >
</ head >
< script type = " text/javascript " >
window.onload = function () ... {
    var DivElement = document.createElement('div');
    var TextNode = document.createTextNode('Hello Ajax!');
    document.body.appendChild(DivElement); //不能漏掉
    DivElement.style.width = '500px';
    DivElement.style.height = '500px';
    DivElement.style.lineHeight = '500px';//不能写成DivElement.style.line-height = '500px '或DivElement.style.lineheight = '500px'
    DivElement.style.textAlign = 'center';
    DivElement.style.backgroundColor = '#ff0000';
    DivElement.appendChild(TextNode); 
}
</ script >
< body >
</ body >
</ html >

METHOD TWO:

< html >
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "   />
< title > Hello Ajax </ title >
< style type = " text/css " >
<!--
.CDiv  ... {
    color: #000000;
    width: 500px;
    height: 500px;
    background-color: #FF0000;
    line-height: 500px;
    text-align: center;
}
-->
</ style >
</ head >
< script type = " text/javascript " >
window.onload = function () ... {
   var  DivElement=document.createElement('div');
   DivElement.innerHTML='Hello Ajax!';
   DivElement.className='CDiv';
   document.body.appendChild(DivElement);
}
</ script >
< body >
</ body >
</ html >

ADDITIONAL:

getElementById(id)                            返回指定结点的引用
getElementsByTagName(name)       返回文档中所有匹配的元素的集合
createElement(name)                         创建指定类型的新结点
createTextNode(text)                         创建一个纯文本结点
element方法：
getAttribute(id)                                   返回指定属性的值
setAttribute(id,value)                         给属性赋值
removeAttribute(id)                           移除指定属性和它的值
getElementsByTagName(name)       返回结点内所有匹配的元素的集合
node方法：
appendChild(child)                             给指定结点添加一个新的子结点
removeChild(child)                             移除指定结点的子结点
replaceChild(newChild,oldChild)       替换指定结点的子结点
insertBefore(newChild,refChild)       在同一层级的结点前面插入新结点
hasChildNodes()                                 如果结点有子结点则返回true
node属性：
nodeName                                         以字符串的格式存放结点的名称
nodeType                                           以整型数据格式存放结点的类型
nodeValue                                          以可用的格式存放结点的值
parentNode                                        指向结点的父结点的引用
childNodes                                         指向子结点的引用的集合
firstChild                                            指向子结点结合中的第一个子结点的引用
lastChild                                             指向子结点结合中的最后一个子结点的引用