09 DOM-CSDN博客

本文链接：https://blog.csdn.net/wyjue/article/details/127278997

DOM概述:
DOM(document object model)文档对象模型
DOM是个遵从文档流的语句,所以他是同步机制

DOM分类:
   1.document       dom操作中最大的对象(表示当前操作的html文档)
   2.elemen           元素对象(表示的是对应的标签元素)
   3.attribute       属性对象(表示所有的html标签里面的属性)
   4.text
   (表示在html代码中写的所有文本)

document(文本对象)
   方法:
       document.getElementByid 通过id值获取对应的元素(Element)
       document.getElementsByClassName 通过classname获取(HTMLCollection)
       document.getElementsByTagName 通过标签获取(HTMLCollection)
       document.getElementsByName 通过name属性获取(nodeList)
       document.querySelector 通过选择器获取第一个(Element)
       document.querySelectorAll 通过选择器获取所有(NodeList)
       document.getRootNode 获取根节点(Node)

   创建的相关方法创建对应的节点对象
       1.document.createElement 创建元素节点
       2.document.createAttribute 创建属性节点
       3.document.createTextNode 创建文本节点

   属性:
       获取属于文档的相关内容
           1.document.body       获取body
           2.document.head       获取head
           3.document.froms       获取froms(返回一个HTMLCollection)

Element 元素对象
   方法
       获取的方法(在元素里面获取元素)跟对应的document的获取元素方法一致
           element.getElementByid()
           element.getElementsByClassName()
           element.getElementsByName()
           element.getElementsByTagName()
           element.querySelector()
       添加的方法(在元素里面添加元素或者是添加text 添加到对应的元素中去)
           追加到末尾的方法
               append (追加多个支持里面传入字符串(字符串会被识别为文本))
               appedChild (追加一个仅支持node对象)
           插入到某个子元素之前
               insertBefore 插入元素到某个子元素之前(参数1需要传入的元素,参数2子元素)
               insertAdjacentElement 插入element
               insertAdjacentHTML 插入HTML代码
               insertAdjacentText 插入文本
           删除方法
               remove 删除自身
               removeChild 删除子元素
           修改方法
               replaceChild 一对一替换
               replaceChildren 替换所有（可以传递多个参数支持字符串）
           克隆的方法
               cloneNode
           属性操作的相关方法(对于所有的属性都可以进行操作)
               获取 getAttribute(attrName)
               设置 setAttribute(attrName,attrValue)
               删除 removeAttribute(attrName)

属性
   基础属性
       id 属性（获取/设置 id值）
       className 属性（获取/设置 class值）
       style 属性（获取对应的一个样式对象 / 设置相关样式）
       title 属性（获取/设置 title属性）
       tagName 属性（只读属性）
       innerHTML 属性（显示的html内容编译对应的html代码）
       innerText 属性 (显示的文本不能编译html代码)

   节点相关属性（只读属性,不能修改）
       previousElementSibling 前面的元素
       nextElementSibling 后面的元素
       parentElement 父元素
       children 子元素集合（HTMLCollection）

   相关获取元素内属性节点集合的属性(只读属性)
       attribute

Node
   DOM中的节点分类
       元素节点       element
       属性节点       attributeNode
       文本节点       textNode

节点相关的属性
   节点划分的属性
       nodeName   节点名
       nodeType   节点类型
       nodeValue   节点值
   节点关系的属性
       父子
           parentElement   父元素
           parentNode   父节点
           childNode   所有的子节点
           children       所有的元素节点
       兄弟关系
           previousElementSibling   上一个元素节点
           previousSibling       上一个节点
           nextElementSibling       下一个元素节点
           nextSibling       下一个节点
       第一个子节点和最后一个子节点
           fristChild       第一个子节点
           fristElementChild   第一个子元素节点
           lastChild       最后一个子节点
           lastElementChild   最后一个子元素节点
   节点相关的方法
       replaceChild       替换子节点
       appendChild        添加子节点
       removeChild        删除子节点
       insertBefore        插入节点到子节点前面
       cloneNode        克隆节点
       replaceChildren        替换所有子节点
       append            添加多个子节点
       remove            移除自己及所有的子节点
   操作属性节点的方法
       setAttributeNode       （属性节点 Attribute对象）设置
       getAttributeNode        （返回的是一个属性节点 Attribute）获取
       removeAttributeNode    （根据对应的属性节点删除）删除

删除空文本节点的相关方法

<div>
        <a href="">嘻嘻</a>
        <b>哈哈</b>
        hello
    </div>
    <script>
        var div = document.querySelector('div')
        //获取div的所有子节点
        console.log(div.childNodes.length);//5
        //传入一个元素 删除里面的空文本节点
        function deleteEmptyTextNode(element){
        //获取所有的子节点
            var nodes = element.childNodes
            //遍历所有的子节点
            for(var node of nodes){
                //进行判断 判断当前是否为空文本节点
                if(node.nodeType == 3 && /^\s+$/.test(node.nodeValue)){
                //删除对应的空文本节点
                element.removeChild(node)
                }
            }
        }
        deleteEmptyTextNode(div)
        console.log(div.childNodes.length);//3
    </script>