DOM面试题 ==

谁借莪１个温暖的怀抱￠ 2022-12-27 07:27 255阅读 0赞

# DOM面试题 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]

## DOM ##

> JavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。 有这几个概念：文档、元素、节点  
> 整个文档是一个文档节点  
> 每个标签是一个元素节点  
> 包含在元素中的文本是文本节点  
> 元素上的属性是属性节点  
> 文档中的注释是注释节点

## DOM本质 DOM树： ##

> DOM树是结构，树是由DOM元素和属性节点组成的，DOM的本质是把html结构化成js可以识别的树模型；  
> 有了树模型，就有了层级结构，层级结构是指元素和元素之间的关系父子，兄弟。

#### 下图为html文档： ####

![在这里插入图片描述][20201208183230192.png]

#### OM树形如一颗倒长的树。 ####

> 它很容易表明家族成员之间的关系，把复杂的关系简明地表示出来  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]

## DOM 节点操作 ##

*  ###### 新增节点 ######
 *  ###### 查询子节点 ######
 *  ###### 查询父节点 ######
 *  ###### 删除节点 ######

1. 创建新节点  （document调用）
    
    createDocumentFragment() //创建一个DOM片段
    createElement() //创建一个具体的元素
    createTextNode() //创建一个文本节点
    
    2. 添加、移除、替换、插入  （父元素调用）
    appendChild() //添加
    removeChild() //移除
    replaceChild() //替换
    insertBefore() //插入
    
    3. 查找 （document调用）
    getElementsByTagName() //通过标签名称 一组元素
    getElementsByName() //通过元素的Name属性的值 一组元素
    getElementById() //通过元素Id，唯一性单个元素
    getElementByClassName()//通过c元素lass获取 一组元素
    qurySelectorAll('选择器') // 通过选择器获取一组元素
    querySelector("选择器") // 通过选择器获取单个元素
    
    4. 关系  （元素调用前三个父元素调用 ）
     
    childNodes // 获取所有的子节点
    children  // 获取所有的子元素节点 (常用)
    firstElementChild   获取第一个元素
    lastElementChild  获取最后一个元素
    parentNode	获取当前节点的父节点
    previousElementSibling	获取当前节点的前一个兄弟元素
    nextElementSibling 获取当前节点的后一个兄弟元素

## Dom节点的Attribute和Property有和区别？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 3]

## DOM性能 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 4]

#### 如何提高Dom性能，优化页面？ ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 5]

## DOM相关面试题 ##

问题1、dom是哪种基本的数据结构？ 
    树结构
    问题2、Dom操作的常用API有哪些？ 
    ①获取DOM节点，以及节点的property和Attribute 
    ②获取父节点，获取子节点  childNodes/ parentNode
    ③新增节点，删除节点 
    问题3、Dom节点的Attribute和Property有和区别？ 
    ①property只是一个JS对象的属性的修改 
    ②Attribute是对html标签属性的修改
    问题4、DOM性能优化。
    将频繁的操作改为一次性操作，通过创建文档碎片，最后一次性加入文档碎片。

===================================================================

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]: /images/20221120/5e6db98b5510496d9b029306c2eeaac7.png
[20201208183230192.png]: /images/20221120/04b7f05e1f2441f4868131a7f17177b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]: /images/20221120/b5e010b37e5e4aec81d66afb907b991f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 2]: /images/20221120/7eabd811948a4972b0529944b1d91ef6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 3]: /images/20221120/ac4def0eec964a90a1abf00b5551f933.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 4]: /images/20221120/e88e6c635f99461e8a3c2c71b86fb91d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 5]: /images/20221120/b442adf5addb421882a24adb304dafd1.png