DOM

• DOM是啥？
• DOM和HTML有啥区别？
• DOM操作？

解答

1. DOM就内存中树，是对HTML和XML的标准API
2. DOM操作就是树的操作，节点的操作，获取、新增、修改、删除

DOM概述

• 节点名称 nodeName
• 节点类型 nodeType
• 节点内容 nodeData
• 父节点、子节点、兄弟节点

DOM操作

• 获取节点

        // 1.ID获取
        document.getElementById()
        
        // 2.TagName获取 
        document.getElementsByTagName()
        
        // 3.ClassName获取
        document.getElementsByClassName()
        
        // 4.Css选择器获取
        document.querySelectorAll()

• 操作属性

       <div id="d1" class="divC" style={border:1px solide blue}>
       // 获取dom.操作dom属性
        const dom = document.getElementById('d1')  
        
        // 1.property形式  修改js变量的属性，对标签不产生影响
        dom.style 
        dom.id
        dom.className
         dom.nodeName
        dom.nodeType
        
       // 2.attr形式   修改标签的属性
       dom.setAttribute(k,v)
       dom.getAttribute(k)

• DOM结构操作

        const dom = document.getElementById('d1')
        // 1.创建新节点
        const p1 = document.createElement('p')
        p1.innerHTML=' this is p1'
        
        // 2.添加节点
        dom.appendChild(p1)
        
        // 3.获取子元素列表
        dom.ChildNodes      // 所有元素
        Array.prototype.slice.call(dom.childNodes).filter(child=>{
         if(child.nodeType === 1) return true
         return false
        })
        
        // 3.获取父元素
        dom.parentNode
        
        // 4.删除子元素
        dom.removeChild(dom[0])

DOM性能

• 避免频繁DOM操作
• DOM查询做缓存
• 频繁的操作改成一次性操作