2024年Web前端最新你不知道的JavaScript--Item32 DOM基础详解2_dom里面的item(1)，腾讯前端面试必问

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

先上几张图简要看看DOM的一些方法属性：

大概这些就是常用的，下面具体聊聊。

节点类型的判断

其中元素节点Element的判定最为重要，下面给出4个主要的方法；

1、如何判断节点是元素节点

可以用isElement()方法

<div id="test">aaa</div>
<!--这是一个注释节点-->
<script>
var isElement = function (el){
 return !!el && el.nodeType === 1;
}
var a = {
 nodeType: 1
}
console.log(isElement(document.getElementById("test")));//true
console.log(isElement(document.getElementById("test").nextSibling));//false

//但是很容易伪造一个假的“对象节点”
console.log(isElement(a)); 
</script>

所以要避免这个的伪造，可以重写isElement()方法

<div id="test">aaa</div>
<!--这是一个注释节点-->
<script>
var testDiv = document.createElement('div');
var isElement = function (obj) {
 if (obj && obj.nodeType === 1) {//先过滤最简单的
 if( window.Node && (obj instanceof Node )){ //如果是IE9,则判定其是否Node的实例
 return true; //由于obj可能是来自另一个文档对象，因此不能轻易返回false
 }
 try {//最后以这种效率非常差但肯定可行的方案进行判定
 testDiv.appendChild(obj);
 testDiv.removeChild(obj);
 } catch (e) {
 return false;
 }
 return true;
 }
 return false;
}
var a = {
 nodeType: 1
}
console.log(isElement(document.getElementById("test")));
console.log(isElement(document.getElementById("test").nextSibling));
console.log(isElement(a));
</script>

2、如何判断节点是html或xml元素节点

XML与html对象均支持createElement（）方法，通过比较创建的元素时传入参数的【大小写】不同的情况下，元素的nodeName是否相同来判断是哪一种文档对象。如果nodeName相同则为html对象，反之为XML对象。

1、首先看一下Sizzle, jQuery自带的选择器引擎

//Sizzle, jQuery自带的选择器引擎
var isXML = function(elem) {
    var documentElement = elem && (elem.ownerDocument || elem).documentElement;
    return documentElement ? documentElement.nodeName !== "HTML" : false;
};
console.log(isXML(document.getElementById("test")));

//但这样不严谨，因为XML的根节点，也可能是HTML标签，比如这样创建一个XML文档
try {
    var doc = document.implementation.createDocument(null, 'HTML', null);
    console.log(doc.documentElement);
    console.log(isXML(doc));
} catch (e) {
    console.log("不支持creatDocument方法");
}

2、我们看看mootools的slick选择器引擎的源码：

var isXML = function(document) {
  return (!!document.xmlVersion) || (!!document.xml) || (toString.call(document) == '[object XMLDocument]')
          || (document.nodeType == 9 && document.documentElement.nodeName != 'HTML');
};

//精简版
var isXML = window.HTMLDocument ? function(doc) {
  return !(doc instanceof HTMLDocument);
} : function(doc) {
  return "selectNodes" in doc;
}

3、自己实现的方法—最简单

var isXML = function(doc) {
    return doc.createElement("p").nodeName !== doc.createElement("P").nodeName;
}

那接下来判断html节点时，就非常简单了

var isHTML = function(doc) {
   return doc.createElement("p").nodeName === doc.createElement("P").nodeName;
}
console.log(isHTML(document));

3、判断节点间的包含关系：

现代浏览器可以用contains()方法，aNode.contains(bNode)判断是否包含a>b。

<div id="p-node">
    <div id="c-node">子节点内容</div>
</div>
<script>
 var pNode = document.getElementById("p-node");
 var cNode = document.getElementById("c-node").childNodes[0];

 alert(document.contains(pNode));//但是在IE8浏览器不支持
 alert(pNode.contains(cNode));
</script>

但IE不支持文档类型节点和文本类型节点包含关系的判断，可以自定义实现一个兼容各浏览器的判断方法。

自定义实现fixContains()方法是对这个问题的修复。

  <div id="p-node">
<div id="c-node">子节点内容</div>
</div>


### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

> ![前端校招面试题精编解析大全](https://img-blog.csdnimg.cn/img_convert/9f94b718d7f8297923935932fd38ec59.webp?x-oss-process=image/format,png)

>子节点内容</div>
</div>


### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

> [外链图片转存中...(img-gt5WzyEG-1715451673576)]