较为文本文档部位

日期:2021-03-22 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统


1个很棒的 blog 文章内容,是 PPK 两年前写的,文章内容中解释了 contains() 和 compareDocumentPosition() 方式运作在她们各有的访问器上。从那起,我早已对这些方式做了很多的科学研究,而且早已在许多场所应用她们。在许多每日任务中,她们被证实是是非非常有效的(非常有关构造的抽象性 DOM 挑选器)。
1、DOMElement.contains(DOMNode)
这个方式先是用在 IE ,用来明确 DOM Node 是不是包括在另外一个 DOM Element 中。
当尝试提升 CSS 挑选器遍历(像:“#id1 #id2”),这个方式很有效。你能够根据 getElementById 获得元素,随后应用 .contains() 明确 #id1 具体上是不是包括 #id2。
留意点:假如 DOM Node 和 DOM Element 相1致,.contains() 将回到 true ,尽管,1个元素不可以包括自身。
这里有1个简易的实行包装,能够运作在:Internet Explorer, Firefox, Opera, and Safari。
function contains(a, b) {
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(arg) & 16);
}

2、NodeA.compareDocumentPosition(NodeB)
这个方式是 DOM Level 3 specification 的1一部分,容许你明确 2 个 DOM Node 之间的互相部位。这个方式比 .contains() 强劲。这个方式的1个将会运用是排列 DOM Node 成1个详尽精准的次序。
应用这个方式你能够明确有关1个元素部位的1连串的信息内容。全部的这些信息内容将回到1个比特码(Bit,比特,亦称2进制位)。
针对那些,人们知之很少。比特码是将多种数据信息储存为1个简易的数据(译者注:0 或 1)。你最后开启 / 关掉某些数目(译者注:开启/关掉对应 0 /1),将给你1个最后的結果。
这里是从 NodeA.compareDocumentPosition(NodeB) 回到的結果,包括你能够获得的信息内容。
Bits Number Meaning
000000 0 元素1致
000001 1 连接点在不一样的文本文档(或1个在文本文档以外)
000010 2 连接点 B 在连接点 A 以前
000100 4 连接点 A 在连接点 B 以前
001000 8 连接点 B 包括连接点 A
010000 16 连接点 A 包括连接点 B
100000 32 访问器的独享应用
如今,这代表着1个将会的結果相近于:
<div id="a">
<div id="b"></div>
</div>
<script>
alert( document.getElementById("a").compareDocumentPosition(document.getElementById("b")) == 20);
</script>

1旦1个连接点 A 包括另外一个连接点 B,包括 B( 16) 且在 B 以前( 4),则最终的結果是数据 20 。假如你查询比特产生的转变,将提升你的了解。
000100 (4) 010000 (16) = 010100 (20)
这个,没什么疑惑,有助于了解单独最错乱的 DOM API 方式。自然,他的使用价值实至名归的。
如今,DOMNode.compareDocumentPosition 在 Firefox 和 Opera 中是能用的。但是,有1些技能,大家能够用来在 IE 中实行他。
// Compare Position - MIT Licensed, John Resig
function comparePosition(a, b){
return a.compareDocumentPosition ?
a.compareDocumentPosition(b) :
a.contains ?
( a != b && a.contains(b) && 16 )
( a != b && b.contains(a) && 8 )
( a.sourceIndex >= 0 && b.sourceIndex >= 0 ?
(a.sourceIndex < b.sourceIndex && 4 )
(a.sourceIndex > b.sourceIndex && 2 ) :
1 ) :
0;
}

IE 出示给大家1些可使用的方式和特性。刚开始,应用 .contains() 方式(如大家前面所探讨的),便于给大家包括( 16)或被包括( 8)的結果。IE 也有1个 .sourceIndex 特性在全部的 DOM Element 对应着元素在文本文档中的部位,比如:document.documentElement.sourceIndex == 0。由于大家有这个信息内容,大家能够进行两个 compareDocumentPosition 困难:在前面( 2)和在后边( 4)。此外,假如1个元素不在当今的文本文档,.sourceIndex 将等于 ⑴,这个给大家此外1个回应( 1)。最终,根据这个全过程的推论,大家能够明确假如1个元素等于他自身,回到1个空的比特码( 0)。
这个涵数能够在 Internet Explorer、Firefox 和 Opera 中运作。但在 Safari 中却有残缺不全作用(由于他仅有 contains() 方式,而沒有 .sourceIndex 特性。大家只能获得 包括( 16),被包括( 8),别的的全部結果都将回到( 1)意味着1个断掉)。
PPK 出示了1个有关根据建立1个 getElementsByTagNames 方式使新作用能够被应用的很棒的事例。让大家改写他到大家的新方式中:

大家如今可使用他来顺次序搭建1个站点的文件目录:
getElementsByTagNames("h1, h2, h3");
尽管 Firefox 和 Opera 都采用了1些积极落实这1方式。我仍然希望看到更多的访问器进到,以协助向前促进。
汉语翻译自:《Comparing Document Position》
// Original by PPK quirksmode.org
function getElementsByTagNames(list, elem) {
elem = elem || document;
var tagNames = list.split(','), results = [];
for ( var i = 0; i < tagNames.length; i ) {
var tags = elem.getElementsByTagName( tagNames[i] );
for ( var j = 0; j < tags.length; j )
results.push( tags[j] );
}
return results.sort(function(a, b){
return 3 - (comparePosition(a, b) & 6);
});
}