谈一谈 null 和 undefined

「爱情、让人受尽委屈。」 2023-01-11 03:58 94阅读 0赞

### 目录 ###

*   *   *  谈一谈 null 和 undefined
         *   *  undefined出现的场景：
             *  null出现的场景：
         *  什么是DOM？
         *  什么是节点？节点类型有哪些？
         *  说出获取元素所有的方式
         *  获取html body head标签的方法
         *  兼容性获取第一个子元素的封装
         *  高频面试题

### 谈一谈 null 和 undefined ###

1.  Undefined 类型只有一个值，即 undefined。我们不会对一个值设置 undefined，一般都是出现错误的时候，才会被我们打印出来。
2.  null 类型是第二个只有一个值的数据类型，这个特殊的值是 null，null 值表示一个空对象指针，而这也正是使用 typeof 操作符检测null时会返回"object"的原因。

#### undefined出现的场景： ####

1.  变量被声明了，但没有赋值时，就等于 undefined。
2.  调用函数时，应该提供的参数没有提供，该参数等于 undefined。
3.  对象没有赋值的属性，该属性的值为 undefined。
4.  函数没有返回值时，默认返回 undefined。

#### null出现的场景： ####

1.  作为函数的参数，表示该函数的参数不是对象。
2.  作为对象原型链的终点。
3.  如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为 null 而不是其他值。
4.  将一个对象变为垃圾对象的时候，设置变量的值为 null。

### 什么是DOM？ ###

1.  DOM document object model 文档对象模型。
2.  是 W3C 指定的一套规范，规定了 js 脚本如何和 HTML 进行交互。
3.  DOM 规定了一系列的标准的接口，允许开发人员使用标准的方式操作网页的结构、内容、样式和行为。

### 什么是节点？节点类型有哪些？ ###

1.  在网页中 **所有的内容和对象** 都被称作为节点。
2.  节点是文档的最基本的组成单元，并且节点有很多的类型，并组成了完整的 DOM 树结构。
3.  常见节点：比如 元素节点 属性节点 文档节点 注释节点 文本节点等等。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]

### 说出获取元素所有的方式 ###

1.  通过标签名获取 是一个集合： getElementsByTagName(“元素名”)。
2.  通过 id 获取 单个元素： + getElementById(“元素名”)。
3.  通过类名获取是一个集合： + getElementsByClassName(“元素名”)。
4.  selectors API：使用css选择器的方式选择元素。
    
     *  querySelector(“选择器”) 单个元素
     *  querySelectorAll(“选择器”) 一个集合（nodeList对象）
5.  新旧方法的区别：
    
    1.  新方法获取的元素是静态的。
    2.  旧方法获取的元素是动态的。
    3.  静态/动态：获取的元素集合是否跟随节点的改变而改变。

### 获取html body head标签的方法 ###

1.  js 提供了获取 html body head 的简便方法。
2.  document.body: 获取 body 元素。
3.  documemt.head：获取 head 元素
4.  document.documentElement：获取 html 元素

### 兼容性获取第一个子元素的封装 ###

function getFirstChild(obj) { 
            return obj.firstElementChild || obj.firstChild;
        }

### 高频面试题 ###

[点我查看：前端高频面试题链接][Link 1]

此链接为CSDN内部链接，我收集整理的一些经常会问到的前端面试题，希望能对您所有帮助！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]: /images/20221119/b51de4a3389a48a2918695e97ad4a831.png
[Link 1]: https://blog.csdn.net/weixin_47021982/article/details/113572021