document.evaluate

Returns an XPathResult based on an XPath expression and other given parameters.

Syntax

var xpathResult = document.evaluate(
 xpathExpression, 
 contextNode, 
 namespaceResolver, 
 resultType, 
 result);

  • xpathExpression is a string representing the XPath to be evaluated.
  • contextNode specifies the context node for the query (see the [http://www.w3.org/TR/xpath XPath specification). It's common to pass document as the context node.
  • namespaceResolver is a function that will be passed any namespace prefixes and should return a string representing the namespace URI associated with that prefix. It will be used to resolve prefixes within the XPath itself, so that they can be matched with the document. null is common for HTML documents or when no namespace prefixes are used.
  • resultType is an integer that corresponds to the type of result XPathResult to return. Use named constant properties, such as XPathResult.ANY_TYPE, of the XPathResult constructor, which correspond to integers from 0 to 9.
  • result is an existing XPathResult to use for the results. null is the most common and will create a new XPathResult

 

Example

From the Mozilla XPath Tutorial:

   var headings = document.evaluate("//h2", document, null, XPathResult.ANY_TYPE, null);   
   /* Search the document for all h2 elements.   
    * The result will likely be an unordered node iterator. */  
   var thisHeading = headings.iterateNext();   
   var alertText = "Level 2 headings in this document are:\n";  
   while (thisHeading) {  
     alertText += thisHeading.textContent + "\n";  
     thisHeading = headings.iterateNext();  
   }  
   alert(alertText); // Alerts the text of all h2 elements  

 

Notes

  • XPath expressions can be evaluated on HTML and XML documents.
  • While using document.evaluate() works in FF2, in FF3 one must use someXMLDoc.evaluate() if evaluating against something other than the current document.

Result types

(Merge with Template:XPathResultConstants?

These are supported values for the resultType parameter of the evaluate method:

Result Type Value Description
ANY_TYPE 0 Whatever type naturally results from the given expression.
NUMBER_TYPE 1 A result set containing a single number. Useful, for example, in an XPath expression using the count() function.
STRING_TYPE 2 A result set containing a single string.
BOOLEAN_TYPE 3 A result set containing a single boolean value. Useful, for example, an an XPath expression using the not() function.
UNORDERED_NODE_ITERATOR_TYPE 4 A result set containing all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.
ORDERED_NODE_ITERATOR_TYPE 5 A result set containing all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.
UNORDERED_NODE_SNAPSHOT_TYPE 6 A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.
ORDERED_NODE_SNAPSHOT_TYPE 7 A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.
ANY_UNORDERED_NODE_TYPE 8 A result set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.
FIRST_ORDERED_NODE_TYPE 9 A result set containing the first node in the document that matches the expression.

Results of NODE_ITERATOR types contain references to nodes in the document. Modifying a node will invalidate the iterator. After modifying a node, attempting to iterate through the results will result in an error.

Results of NODE_SNAPSHOT types are snapshots, which are essentially lists of matched nodes. You can make changes to the document by altering snapshot nodes. Modifying the document doesn't invalidate the snapshot; however, if the document is changed, the snapshot may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed.

Specification

DOM Level 3 XPath

 

YUI Grids布局原理

YUI Grids布局原理

(对外版)

主要内容

  • 学习使用YUI Grids布局

布局

  • 布局是网页的骨架,网页开发的第一步
  • 结构 模块 最终页面

不同的布局思路

(照片出自http://flickr.com/photos/ckalinw/)
(照片出自http://flickr.com/photos/my_soul_insurance2004/)
实例 实例

YUI Grids的好处

  • 解决重复劳动
  • 稳定
  • 黑盒系统
  • 自由安排内容的下载顺序
  • ~4K,支持>1000种页面布局
  • 适应所有IAB广告标准

开始

<body>
<div>
<div id="hd"> </div>
<div id="bd"> </div>
<div id="ft"> </div>
</div>
</body>
一个页面的最原始结构

引用YUI Grids CSS文件
<link rel="stylesheet" type="text/css" href="http://cn.yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">

第一步:决定页面的宽度(1)

<body>
<div id="doc">
<div id="hd"> </div>
<div id="bd"> </div>
<div id="ft"> </div>
</div>
</body>
  • #doc - 750px居中 (适合800x600)
  • #doc2 - 950px居中 (适合1024x768)
  • #doc3 - 100%液态 (适合everybody)
  • #doc4 - 974px居中 (适合1024x768)
  • #doc-custom - 自定义宽度

第一步:决定页面的宽度(2)

<body>
<div id="doc-custom">
<div id="hd"> </div>
<div id="bd"> </div>
<div id="ft"> </div>
</div>
</body>
<style> div#doc-custom{width:960px;} </style>

第二步:划分基本的内容块(1)

任何结构的页面都可划分为Main block和Secondary block。

第二步:划分基本的内容块(2)

<div id="bd"> 
<!--start: 财经要闻 {> ... <!--} end: 财经要闻>
<!--start: 证券要闻 {> ... <!--} end: 证券要闻>
<!--start: 理财消费 {> ... <!--} end: 理财消费>
<!--start: 能人观点 {> ... <!--} end: 能人观点>
<!--start: 最新股票 {> ... <!--} end: 最新股票>
<!--start: 收益排行榜 {> ... <!--} end: 收益排行榜>
</div>

第二步:划分基本的内容块(3)

<div id="bd"> 

	<div class="yui-b"> 
		<!--start: 财经要闻 {> ... <!--} end: 财经要闻>
		<!--start: 证券要闻 {> ... <!--} end: 证券要闻>
		<!--start: 理财消费 {> ... <!--} end: 理财消费>
	</div>

	<div class="yui-b"> 
		<!--start: 能人观点 {> ... <!--} end: 能人观点>
		<!--start: 最新股票 {> ... <!--} end: 最新股票>
		<!--start: 收益排行榜 {> ... <!--} end: 收益排行榜>
	</div>

</div>

第二步:划分基本的内容块(4)

<div id="bd"> 

	<div id="yui-main"> 
		<div class="yui-b"> 
			<!--start: 财经要闻 {> ... <!--} end: 财经要闻>
			<!--start: 证券要闻 {> ... <!--} end: 证券要闻>
			<!--start: 理财消费 {> ... <!--} end: 理财消费>
		</div>
	</div>

	<div class="yui-b"> 
		<!--start: 能人观点 {> ... <!--} end: 能人观点>
		<!--start: 最新股票 {> ... <!--} end: 最新股票>
		<!--start: 收益排行榜 {> ... <!--} end: 收益排行榜>
	</div>

</div>

第三步:选择模板

<body>
<div id="doc" class="yui-t1">
<div id="hd"> </div>
<div id="bd"> 
......
</div>
<div id="ft"> </div>
</div>
</body>

.yui-t1 - 2栏, 窄栏在左侧, 160px
.yui-t2 - 2栏, 窄栏在左侧, 180px
.yui-t3 - 2栏, 窄栏在左侧, 300px
.yui-t4 - 2栏, 窄栏在右侧, 180px
.yui-t5 - 2栏, 窄栏在右侧, 240px
.yui-t6 - 2栏, 窄栏在右侧, 300px
 

小结一下

  • 第1步 第2步
  • 第3步 第4步
  • 第5步 效果

内嵌布局

  • 内嵌布局
  • 格子Unit (.yui-u)
  • 网格Grid (.yui-g, .yui-gb, .yui-gc, .yui-gd, .yui-ge, .yui-gf)
  • 首格子 (.first)

网格类型

  • 两列
    .yui-g 1/2 - 1/2 (均匀分布)

    .yui-gc 2/3 - 1/3
    .yui-gd 1/3 - 2/3
    .yui-ge 3/4 - 1/4
    .yui-gf 1/4 - 3/4
  • 三列
    .yui-gb 1/3 - 1/3 - 1/3 (均匀分布)

使用Grids

  • 实例
  • ~2分钟
  • Grids的灵活性: 演示

多段布局(中国特色)

  • 演示
  • 段 (.section)
    .section{margin-bottom:10px;}
    .section:after{content:".";display:block;clear:both;visibility:hidden;height:0;}
    	

Homework

实例

要求:用YUI Grids手写完成上面Mockup的布局效果。

好好学习,天天向上!

Made with Eric A Meyer's S5