js-12Dom节点对象

01Dom节点对象

1.dom角度

整个html文档看作一个文档对象document,
每个html标签元素看作dom节点对象,
每个html标签元素的内容、属性也被看作是dom节点对象

=> html文档中所有元素都被看作是dom节点对象

2.dom节点对象分类

- html标签元素   元素节点
- 标签内容		 文本节点
- 标签属性		 属性节点
...

3. 整个html文档dom节点构成一个树形结构

 						document
                            |
                       html(根节点)
                          |
                  -------------------     
                head              body
                 |                 |
            -------             ----------
            meta               div       ul
                               ---      ------
                                       |     |
                                |   *  li *  li  *  
                                h2      1    2
                                 |   
                                元素一
注意：* 代表空白文本节点
由于当前每次修改机器就会渲染一次，效率比较低下
后续 
将此结构进行映射得到虚拟节点进行修改
全部改完，再进行渲染，提高效率

4. 层次结构

节点关系：父节点 子节点 兄弟节点

5.元素节点之间有空白的文本节点

02获取节点对象 【重点】

1.getElements系列

2.querySelector系列

3.层次结构

 3.1查找元素节点:
  				父元素节点               parentElement
                所有子元素节点            children
                下一个兄弟元素节点        nextElementSibling
                上一个兄弟元素节点        previousElementSibling
                父节点的第一个子元素节点   firstElementChild
                父节点的最后一个子元素节点 lastElementChild            
	
3.2查找节点:  其中包括空白文本节点
				父节点               parentNode
                所有子节点            childNodes
                下一个兄弟节点         nextSibling
                上一个兄弟节点         previousSibling
                父节点的第一个子节点    firstChild
                父节点的最后一个子节点  lastChild
                
3.3非常规节点
               根节点 html:  document.documentElement
               body:  document.body
               head:  document.head

03.动态操作节点 【重点】

1.创建节点

1. 创建节点
              =>创建元素节点
                var divEle = document.createElement('div') //<div></div>
              =>创建文本节点
                var textNode = document.createTextNode('元素二')

2.添加节点

 2. 添加节点
              =>给父节点追加子节点 
                 父节点.appendChild('子节点')
              =>在父节点指定子节点前插入新的子节点
                 父节点.insertBefore('新子节点','指定子节点')

注意：开发中常用模板字符串来创建内容，将内容进行赋值，避免反复的创建节点追加节点

3.删除节点

3. 删除节点
              => 删除父节点下的子节点
                  父节点.removeChild(子节点)
                 子节点.remove() 【常用】
                 
 function test5(){
            //创建h2节点 模板字符
            var str = `<h2>我是模板字符串创建的h2</h2>`
            // 把内容给div
            document.body.firstElementChild.innerHTML = str
        }
        test5()

4.替换节点

4. 替换节点
              新节点替换父节点下的子节点
               父节点.replaceChild(新节点,旧节点)

5.复制 | 克隆节点

5. 克隆节点
              节点.cloneNode(true|false|不写)
                 <div>
                     <p>元素一</p>
                 </div>
              =>参数为true, 克隆节点和所有子节点 
              =>参数为false或者不写, 只克隆节点 div

 function test4(){
            //克隆节点
            var divEle = document.querySelector('div')
            var div = divEle.cloneNode(true)
            console.log(div);
        }
        test4()