如何获取 Element 的 XPath [PHP/Javascript]

这两天研究 HTML 的 DOM 需要寻找某个 Element 元素的完整 XPath 路径,由于使用的是 PHP Simple HTML DOM Parser 开源库,这个库类的使用方法几乎兼容 Javascript 的 DOM 语法并附带 DOM 选择器。虽然功能强大但是并不能直接获取 Element 的 XPath。这个怎么办呢,依稀记得 Firebug 有一个功能,选择某个元素在它的控制台可以显示 XPath。嗯,着手实践一下发现不仅可以显示而且还可以复制 XPath。

于是想,如果可以找到 Javascript 版的相关代码就一定可以改成 PHP 版本的,结果在 Google 搜索找到了…

var elt = document.getElementById('table');
var xpath = getElementXPath(elt);
alert(xpath);

// Get full XPath of an element
function getElementXPath(elt)
{
	var path = "";
	for (; elt && elt.nodeType == 1; elt = elt.parentNode)
	{
		idx = getElementIdx(elt);
		xname = elt.tagName;
		if (idx > 1) xname += "[" + idx + "]";
		path = "/" + xname + path;
	}

	return path;
}

// Get Idx of an element
function getElementIdx(elt)
{
    var count = 1;
    for (var sib = elt.previousSibling; sib ; sib = sib.previousSibling)
    {
        if(sib.nodeType == 1 && sib.tagName == elt.tagName)	count++
    }

    return count;
}

PHP 改进版:

// Use it before import PHP Simple HTML DOM Parser
$html = file_get_html('http://www.google.com/');
// find a sample element by id
$elt1 = $html->find('#footer', 0);
// find a sample element by tag name
$elt2= $html->find('div', 10);

// it will return if found it: //*[@id="footer"]
$xpath = getElementXPath($elt1);

// it will return if found it: html/body/div[10]
$xpath = getElementXPath($elt2);

function getElementXPath($elt)
{
	$path = '';
	$first = TRUE;
	for(; ($elt AND $elt->nodetype == 1); $elt = $elt->parent())
	{
		$xname = $elt->tag;
		$idx = getElementIdx($elt);

		if ($first AND isset($elt->attr['id']))
		{
			$path = '//*[@id="' . $elt->attr['id'] . '"]';
			break;
		}

		if ($idx > 1)
		{
			$xname .= '[' . $idx . ']';
		}

		$path = '/'.$xname.$path;

		$first = FALSE;
	}

	return $path;
}

function getElementIdx($elt)
{
    $count = 1;
    for($sib = $elt->prev_sibling(); $sib ; $sib = $sib->prev_sibling())
    {
        if($sib->nodetype == 1 && $sib->tag == $elt->tag)
        {
        	$count++;
        }
    }

    return $count;
}

大家同样可以把上面的代码直接 crack 到 PHP Simple HTML DOM Parser 库中。

jquery Selectors:让你迅速了解 jquery

jquery 作为一个风靡流行 JavaScript 框架,一直在互联网开发做着重要的角色,其实它上手也很简单,今天在订阅的 Gr 发现了这个 labs 性的 jquery Selectors。打开这个页面,你会看到在左侧有很多的 jquery 选择器,大家可以通过点击各种的按钮可以在右侧清楚的看到实现选择了那个元素。同时还配有文档说明,很棒的教学学习资料:)

如果你想给离线的朋友使用,那也没有关系,它提供了源码的下载,就在右侧的顶部(点击这里也可以下载)。

看到它这样页面的顶部信息让我有发现了两个很不错 jquery 学习资料网站:LearningjQuery | codylindley

BTW,人家顶部信息说了:FYI (ie6 != supported),难道你还在用 IE6 开发么? XD

Blackbird:JavaScript调试,对alert说拜拜

最近就在用 JavaScript 写公司系统的报表文件生成编辑器工具。调试的头胀闹大的。尤其是加入 alert()  调试框,一不小心就会进入慢长的循环,点不掉的 alert 框…幸好在 webappers 发现了 Blackbird 提供一种非常酷的 JavaScript 调试信息显示方法。直接让我告别了 alert() 时代。:)

Blackbird 支持当前的主流版本浏览器(IE 6+,Firefox 2+,Safari 2+,Opera 9.5),可以区别输入 debug,info,warn,error,profile。同时可以通过热键来控制显示/隐藏,情况记录调试信息等操作!
使用方法也很简单,加载 js 和 css 文件并加载到 header 区域,直接使用就可以输出调试信息:

log.debug( 'this is a debug message' );
log.info( 'this is an info message' );
log.warn( 'this is a warning message' );
log.error( 'this is an error message' );

演示:http://www.gscottolson.com/blackbirdjs/

下载:当前版本 blackbirdjs v1.0

Devunity:随心所欲在线编程

http://www.devunity.com/user

Devunity 是一个极具创意性的在线编程服务网站,使用它就像是在使用系统的文本编辑器一样,支php,Python,Javascript,Perl,Html,Asp,Css,Ruby语言语法高亮,行数显示,支持 Tags。最大的特性还属创建项目,从SVN服务导入代码,支持多种服务的API(如 Twitter,Flickr,BOSS,Google Apps Engine,,Digg,Facebook等等)接口编程到团队协作,添加 Todos。

DevunityTechCrunch 最新评出来的 TC50 之一。目前这个服务还属于开发当作,之前只是申请才能获得邀请,过了一个10.1终于给了邀请,碰巧通过内测用户邀请是可以直接申请到用户,所以,如果你想尝试一下,留下你的 Email 地址吧:)

图片保护脚本:dwProtector

网站的图片保护是一个热门话题,为什么呢?你想想如果您辛辛苦苦花了两个小时设计出来个设计,你会希望它被别人无情的PS,修改做别人的东西吗?当然是被允许的,这就是dwProtector产生的原因。

dwProtector是基于mootools开发的插件。那么,dwProtector的功能强度有多大呢,看下面列表:

  • 守护右键“(图片)另存为”(”Save Image As”)
  • 守护右键“背景图片另存为”(”Save Background As”)
  • 守护拖拽图片到桌面
  • 甚至是守护右键

Continue reading