月度归档:2013年10月

document.write 到底做了什么?

在使用document.write()时,经常会遇到奇怪的现象,比如说下面这段代码。注释里是一些怪异的现象。
<html>
<head>
<title></title>
    <script language="javascript" type="text/javascript">
        var div=document.createElement("div");
        div.innerHTML="被添加的div";
        //如果直接document.body.appendChild(div); 则失败.  
        //document.write("<span></span>");  //添加这行,document.body.appendChild(div) 显示“被添加的div”.
        //document.write("&nbsp;");         //document.body.appendChild(div); IE下显示“被添加的div”,Firefox,Chrome不显示.
        //document.write(" ");              //document.body.appendChild(div); 不显示.
        document.body.appendChild(div);
    </script>
</head>
<body>
</body>
</html>
可以看出,这些现象主要是两类:一是结果与预想不一致,二是浏览器的兼容性问题。我们就来看看document.write()到底干了什么?
document.write()的作用是将html标签和javascript代码写到页面中。但是它的具体过程并不是这句话说的那么简单,它的背后其实隐藏着一个复杂的过程。在载入页面后,浏览器输出流自动关闭;在此之后,任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流。它将清除当前页面内容(包括源文档的任何变量或值)、因此.假如希望用脚本生成的HTML替换当前页面,就必须把HTML内容连接起来赋给一个变量、使用一个document.write()方法完成写操作,不必清除文档并打开一个新数据流,一个document.write()调用就可完成所有的操作。

<html>
<body>

<p>Note that write() does NOT add a new line after each statement:</p>

<pre>
<script>
document.write(“Hello World!”);
document.write(“Have a nice day!”);
</script>
</pre>

</body>

</html>

上面这一段代码用浏览器打开,显示一行”Hello World!Have a nice day!”。如果要显示多行,可以用document.writeln()。

关于document.write()方法还有一点要说明的是它的相关方法document.close()。脚本向窗口(不管是本窗口或其他窗口)写完内容后.必须关闭输出流。在延时脚本的最后一个document.write()方法后面.必须确包含有document.close()方法,不这样做就不能显示图片和表单。并且,任何后面调用的document.write()方法只会把内容追加到页面后,而不会清除现有内容来写入新值。

document是引擎开始解析代码前就初始化,放到作用域,推到作用域链的末端,不过这时作用域链是空的,所以document是处于顶端,也就是我们所说的全局变量
初始化工作类似 var document = new Document();
而Document是拥有body,getElementById,getElementsByName,write等方法的类
所以document就拥有了Document的原型方法与其成员变量,但getElementById这些是基于body已经加载完成才能使用,这就是为什么当页面没加载完成时,我们使用不了getElementById的原因,而write并不需要,所以我们可以在页面还没加载完之前调用document.write方法
并且调用document.write方法的同时,会调用open与close的方法,具体会这么实现
document.open();
document.write();
document.close();
当open的时候将会打开一个文档流来输入内容,当文档已存在的时候,则先清空
write就是写入内容,close就是关闭文档流了
而文章开头的例子,当第一次使用document.write的时候,文档还没存在,所以它不会清空,而会将内容是直接附加到文档流中,当有内容附加在文档流后,body自然就会创建了,大家可以用firebug断点就清晰看到第一次document.write之前body为null,当document.write之后,body就为“body”了,所以为什么document.write之后能使用document.body.appendChild了。

html5布局

HTML5中,新增了以下与结构相关的元素:

  1. section
    表示页面中的一个内容区块,比如章节、页眉、或页面中的其他部分。
    可以与h1、h2、h3、h4、h5、h6等元素结合使用,标示文档结构。
    HTML5使用方法:
    <section>  </section>
  2. article
    表示页面中的一块与上下文不相关的独立内容。
    HTML5使用方法:
    <article>  </article>
  3. aside
    表示article元素的内容之外的与article元素的内容相关的辅助信息。
    HTML5使用方法:
    <aside>  </aside>
  4. header
    表示页面中一个内容区块或整个页面的标题
    HTML5使用方法:
    <header>  </header>
  5. hgroup
    用与对整个页面或页面中一个内容区块的标题进行组合。
    HTML5使用方法:
    <hgroup>  </hgroup>
  6. footer
    表示整个页面或页面中一个内容区块的脚注。
    一般包括创作作者的姓名、创作日期以及创作者联系信息。
    HTML5使用方法:
    <footer>  </footer>
  7. nav
    表示页面中导航链接的部分
    HTML5使用方法:
    <nav>  </nav>
  8. figure
    表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。
    使用figcaption元素为figure元素组添加标题。
    HTML5使用方法:
    <figure>
    <figcaption>第一</figcaption>
    <p>第一个例子</p>
    </figure>

比如说下图中的布局,html标签就可以用html5的结构标签来写,这些标签不代表布局,但语义上与它们的内容是一致的。

<header>
<h2>页头</h2>
</header>
<nav>
<h2>导航</h2>
</nav>
<aside>
<h2>侧边栏</h2>
</aside>
<article>
<h2>内容区</h2>
</article>
<footer>
<h2>页尾</h2>
</footer>

media queries-阿里巴巴前端在线笔试

这是一个前端响应式布局问题,记录下来,以免要用的时候找不到。

实现如下图所示的布局

要求:sidebar 固定宽度200px,content和header宽度自适应
当window宽度小于600px时,变成三行布局
宽度小于600px时如下

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>笔试题</title>
<style type=”text/css”>
@media (min-width:600px){
*{ margin:0px; padding:0px;}
.header{
width:auto;
background-color:#333;
}
.sidebar{
float:left;
width:200px;
margin-right:-200px;
background-color:#00F;
}
.content{
float:left;
width:100%;
background-color:#900;
margin-left:200px;
}

}
@media (max-width:600px){
*{ margin:0px; padding:0px;}
.header{
width:auto;
background-color:#333;
}
.sidebar{
width:auto;
background-color:#00f;
}
.content{
background-color:#900;
margin:0 auto;
}
}

</style>
</head>

<body>
<div class=’header’>
<h1>header</h1>
</div>
<div class=”sidebar”>
<h1>sidebar</h1>
</div>
<div class=”content”>
<h1>content</h1>
</div>
</body>
</html>