DOM小测28期直播答疑文字版整理

╰半夏微凉° 2022-01-17 22:07 79阅读 0赞

### 一、题目与考察点 ###

题目地址：[github.com/zhangxinxu/…][github.com_zhangxinxu]

题目内容如下（点击查看大图）：

本题主要考察如何判断DOM节点文档前后位置，父子关系等。我看了下最后的回答，近9成的回答使用了非常啰嗦的方法，比例之高，实在出乎意料。实际上，本题有非常简单、寥寥数行就能实现的方法，只要你知道下面这两个很有用的DOM原生API，一个是`contains()`方法，判断DOM元素或节点是否有包含关系；另外一个是`compareDocumentPosition()`方法，更强悍的DOM或节点位置关系判断，无论是前后、内外还是跨文档都可以。

本次B站答疑直播在周六上午10:34分开始，持续约30分钟，有录播，可以点击[这里][Link 1]观看，建议1.5倍速食用。

### 二、DOM包含关系判断contains() ###

`contains()`方法是一个很古老的API，用来判断两个DOM节点之间的包含关系，语法如下：

node.contains(otherNode)复制代码

返回布尔值，表示`node`是否包含`otherNode`，或者就是`node`本身。

例如：

document.documentElement.contains(document.body);    // 返回值是true
    document.body.contains(document.body);               // 返回值是true
    document.body.contains(document.documentElement);    // 返回值是false复制代码

此API兼容性良好，IE5就开始支持了，使用非常方便，我们无需专门遍历祖先元素用判断两个节点之间的嵌套关系。

#### 其它 ####

如果判断的两个节点元素是跨iframe文档的，则会被认为是`false`。例如我们直接[借助Blob动态创建一个非外链iframe][Blob_iframe]，代码如下：

var htmlIframe = '<img id="img" src="https://.../mm.jpg" onclick="console.log(window.parent.document.body.contains(this))">';
    var iframe = document.createElement('iframe');
    var blob = new Blob([htmlIframe], { 'type': 'text/html'});
    iframe.src = URL.createObjectURL(blob);
    iframeBlob1.appendChild(iframe);复制代码

点击图片，可以看到控制台输出结果如下：

如果想要知道iframe内外的包含关系，则需要使用另外的API：`compareDocumentPosition()`。

### 三、任意位置判断compareDocumentPosition ###

本题中图片DOM元素前后位置的比对完全不需要写循环进行遍历，有现成的API可以实现我们想要的效果，那就是`Node.compareDocumentPosition` API。

此API颇有深度，我专门写了篇文章介绍这个API，可参见这里：“[深入Node.compareDocumentPosition API][Node.compareDocumentPosition API]”。

例如：

var compareValue = img.compareDocumentPosition(compareImg);
    if (compareValue == 2) {
      // compareImg在前
    } else if (compareValue == 4) {
      // compareImg在后
    } else if (compareValue == 0) {
      // 就是compareImg元素自身
    } else {
      // 其它位置关系
    }复制代码

如果`compareValue`是`2`，则表示`compareImg`在`img`的前面；如果是`4`，则表示`compareImg`在`img`的后面。

由此我们可以轻松判断点击图片和对比图片之间的文档位置关系，寥寥几行代码的事情。

不过需要注意的是，如果是判断其他非替换元素的位置关系，则不能使用数值比对，因为可能`compareDocumentPosition()`方法执行后的值是一个混合数值，例如：

// 返回值是 10，8 + 2
    document.body.compareDocumentPosition(document.documentElement);
    // 返回值是 20，16 + 4
    document.documentElement.compareDocumentPosition(document.body)复制代码

我们需要使用单个`&`符合和对应目标值进行与位运算的结果来判定，例如：

if (document.body.compareDocumentPosition(document.documentElement) & 2) {
       // document.documentElement在document.body前面
       // ...
    }复制代码

如果不是很理解，可以访问我刚写的专门[深入介绍compareDocumentPosition][Node.compareDocumentPosition API]的文章。

### 四、如何判断click元素是图片 ###

例如：

container.onclick = function (event) {
      // event.target ...
    }复制代码

业界用的比较多的方法是使用tagName值进行判断，如下：

event.target.tagName == 'IMG'  // true或false复制代码

所有浏览器都返回大写标签名，当然，如果你不放心（以后变了，或者遇到SB浏览器），可以更严格比对下：

/^img$/i.test(event.target.tagName)    // true或false复制代码

event.target.tagName.toLowerCase() == 'img'    // true或false复制代码

我们还可以使用nodeName进行判断，例如：

event.target.nodeName == 'IMG'    // true或false复制代码

最后，在介绍一种对象类型判断方法，如下：

event.target instanceof Image    // true或false复制代码

也是可以的。

### 五、答疑要点总结 ###

1.  包含关系推荐使用`Node.contains()`方法；
2.  判断当前元素是否是IMG，可以 ：
    
        event.target.tagName/nodeName == 'IMG'复制代码
    
        /^img$/i.test(event.target.tagName)复制代码
    
        event.target.tagName.toLowerCase() == 'img'复制代码
    
        event.target instanceof Image复制代码
3.  前后节点关系判断使用`Node.compareDocumentPosition()`。

**关于直播答疑**

每周三会在这个[项目][Link 2]的[issues][]中发布小测题，依次CSS，JS和DOM，每周六上午10:00~11:00之间直播答疑。

有兴趣参与的可以多多关注下，免费的。

以上~

转载于:https://juejin.im/post/5c7de662f265da2dce1f63a9

[github.com_zhangxinxu]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fzhangxinxu%2Fquiz%2Fissues%2F9
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fwww.bilibili.com%2Fvideo%2Fav45096006
[Blob_iframe]: https://link.juejin.im?target=https%3A%2F%2Fwww.zhangxinxu.com%2Fwordpress%2F2017%2F08%2Fiframe-html5-blob-code-view%2F
[Node.compareDocumentPosition API]: https://link.juejin.im?target=https%3A%2F%2Fwww.zhangxinxu.com%2Fwordpress%2F%3Fp%3D8527
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fzhangxinxu%2Fquiz
[issues]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fzhangxinxu%2Fquiz%2Fissues