DOM系统学习-基础

Posted 2020-09-01 前望

DOM介绍

    DOM介绍：

        D 网页文档

        O 对象，可以调用属性和方法

        M 网页文档的树型结构

    节点：

        DOM将树型结构理解为由节点组成。

    节点种类：

        元素节点、文本节点、属性节点等

查找元素

    获取元素：

        getElementById()

        getElementsByTagName()

        querySeletor()

    元素节点属性：

        tagName

        innerhtml

    HTML属性的属性：

        id

        title

        style

        className

    属性操作：

        getAttribute()

        setAttribute()

        removeAtrribute()

        PS：style和onclick有兼容问题，现在都支持自定义属性

DOM节点

   node节点属性：

        nodeName 节点名称

        nodeType 节点类型

        nodeValue 节点值，不解析html

    层次节点属性：

        子节点

            childNodes 获取某所有子节点，包括元素节点和文本节点

            firstChild 获取第一个节点

            lastChild 获取最后一个节点

        父兄节点

            parentNode 获取父节点

            previousSibling 获取上一个同级节点

            nextSibling 获取下一个同级节点

        ownerDocument 根节点 ele.ownerDocument === document

        attributes 属性节点的数组集合

    忽略空白节点的方法：

        忽略：

1 2 3 4 5 6 7 8 9 10 11 12

function filterSpaceNode(nodes) {     var ret = []; //新数组        for (var i = 0; i < nodes.length; i++) {         //如果识别到空白文本节点，就不添加数组            if (nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)) {             continue;         }         //把每次的元素节点，添加到数组里            ret.push(nodes[i]);     }     return ret; }

        移除：

1 2 3 4 5 6 7 8 9

function removeWhiteNode(element) {          var nodes = element.childNodes;          for (var i = 0; i < nodes.length; i++) {              if (nodes[i].nodeType === 3 && /^\s+$/.test(nodes[i].nodeValue)) {                  nodes[i].parentNode.removeChild(nodes[i]);              }          }          return element;      }

节点操作

    创建节点：

        document.createElement() 创建一个元素节点

        document.createTextNode(txt) 创建文本节点

    插入节点：

        ele.appendChild(newChild) 将新节点添加到某个节点的子节点末尾

        insertBefore(newChild,refChild) 指点节点前面插入新节点

        insertAfter() 需要自定义

        

1 2 3 4 5 6 7 8 9 10 11

function insertAfter(newElement, targetElement) {     //得到父节点              var parent = targetElement.parentNode;     //如果最后一个子节点是当前元素，那么直接添加即可              if (parent.lastChild === targetElement) {         parent.appendChild(newElement);     } else {         //否则，在当前节点的下一个节点之前添加                  parent.insertBefore(newElement, targetElement.nextSibling);     } }

    替换复制移除：

        replaceChild(newChild,refChild) 替换节点，必须是某元素的子节点

        cloneChild(deep) 克隆节点

        removeChild(oldChild) 移除节点