DOM方法总结及DOM库扩展

分手后的思念是犯贱 2022-06-08 14:08 165阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <td><b>常用DOM方法</b></td> 
  </tr> 
 </tbody> 
</table>

常用DOM方法：

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>document.getElementById(“id”);</td> 
   <td>通过元素的ID来获取元素对象</td> 
  </tr> 
  <tr> 
   <td>context.getElementsByTagName(“table”);</td> 
   <td>通过元素的标签名来获取元素对象,把容器中所有子子孙孙的元素都获取到</td> 
  </tr> 
  <tr> 
   <td>document.getElementsByName(“abc”);</td> 
   <td>通过元素的name属性来获取元素对象</td> 
  </tr> 
  <tr> 
   <td>context.getElementsByClassName(“abc”);</td> 
   <td>通过元素的class属性来获取元素对象</td> 
  </tr> 
  <tr> 
   <td>document.documentElement</td> 
   <td>返回文档的根节点</td> 
  </tr> 
  <tr> 
   <td>document.body</td> 
   <td>获取body元素</td> 
  </tr> 
  <tr> 
   <td>context.querySelector(“#id”);</td> 
   <td>移动端获取一个元素，节点集合不存在DOM映射</td> 
  </tr> 
  <tr> 
   <td>context.querySelectorAll(“#id”);</td> 
   <td>移动端获取多个元素，节点集合不存在DOM映射</td> 
  </tr> 
  <tr> 
   <td>appendChild(newListItem);</td> 
   <td>把元素添加到指定的容器中（末尾）</td> 
  </tr> 
  <tr> 
   <td>document.createElement(“div”);</td> 
   <td>创建一个元素标签对象</td> 
  </tr> 
  <tr> 
   <td>insertBefore(newItem,existingItem);</td> 
   <td>把新元素添加到老元素之前</td> 
  </tr> 
  <tr> 
   <td>removeChild();</td> 
   <td>删除元素</td> 
  </tr> 
  <tr> 
   <td>cloneNode(false/true);</td> 
   <td>克隆元素：false：只克隆当前元素；true：把元素内的子子孙孙都克隆</td> 
  </tr> 
  <tr> 
   <td>replaceChild(newnode,oldnode);</td> 
   <td>替换元素</td> 
  </tr> 
  <tr> 
   <td>getAttribute(“target”);</td> 
   <td>获取元素属性</td> 
  </tr> 
  <tr> 
   <td>setAttribute(“type”,”button”);</td> 
   <td>添加指定的属性，并为其赋指定的值，如：设置input元素的type属性为button，不能修改class属性</td> 
  </tr> 
  <tr> 
   <td>removeAttribute(“abc”);</td> 
   <td>删除属性</td> 
  </tr> 
  <tr> 
   <td>document.createDocumentFragment();</td> 
   <td>创建文档碎片</td> 
  </tr> 
  <tr> 
   <td>innerHTML</td> 
   <td>获取对象的内容或向对象插入内容</td> 
  </tr> 
 </tbody> 
</table>

DOM节点和关系属性：

<table> 
 <thead> 
  <tr> 
   <th>节点</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>childNodes</td> 
   <td>获取所有子节点</td> 
  </tr> 
  <tr> 
   <td>children</td> 
   <td>获取所有元素子节点</td> 
  </tr> 
  <tr> 
   <td>parentNode</td> 
   <td>获取父亲节点</td> 
  </tr> 
  <tr> 
   <td>previousSibling</td> 
   <td>获取上一个哥哥节点（所有节点，包括文本节点）</td> 
  </tr> 
  <tr> 
   <td>previousElementSibling</td> 
   <td>获取上一个哥哥节点（元素节点）</td> 
  </tr> 
  <tr> 
   <td>nextSibling</td> 
   <td>获取弟弟节点</td> 
  </tr> 
  <tr> 
   <td>firstChild</td> 
   <td>获取所有节点中的第一个</td> 
  </tr> 
  <tr> 
   <td>lastChild</td> 
   <td>获取所有节点中的最后一个</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>节点</th> 
   <th>nodeType</th> 
   <th>nodeName</th> 
   <th>nodeValue</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>元素节点（元素标签）</td> 
   <td>1</td> 
   <td>大写的标签名</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>属性节点</td> 
   <td>2</td> 
   <td>小写属性名</td> 
   <td>属性内容</td> 
  </tr> 
  <tr> 
   <td>文本节点（文字）</td> 
   <td>3</td> 
   <td><code>#text</code></td> 
   <td>文字内容</td> 
  </tr> 
  <tr> 
   <td>注释节点（注释）</td> 
   <td>8</td> 
   <td><code>#comment</code></td> 
   <td>注释内容</td> 
  </tr> 
  <tr> 
   <td>document</td> 
   <td>9</td> 
   <td><code>#document</code></td> 
   <td>null</td> 
  </tr> 
 </tbody> 
</table>

DOM的盒子模型：

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>clientWidth/clientHeight</td> 
   <td>width+左右padding；height+上下padding</td> 
  </tr> 
  <tr> 
   <td>clientTop/clientLeft</td> 
   <td>上边框的高度；左边框的宽度</td> 
  </tr> 
  <tr> 
   <td>offsetWidth/offsetHeight</td> 
   <td>clientWidth+左右边框；clientHeight+上下边框</td> 
  </tr> 
  <tr> 
   <td>offsetLeft/offsetTop</td> 
   <td>当前元素的外边框距离父级参照物的左偏移量；当前元素的外边框距离父级参照物的上偏移量</td> 
  </tr> 
  <tr> 
   <td>scrollWidth/scrollHeight</td> 
   <td>约等于真实内容的宽度(包含溢出的内容)+左padding；约等于真实内容的高度(包含溢出的内容)+上padding</td> 
  </tr> 
  <tr> 
   <td>scrollLeft/scrollTop</td> 
   <td>当前滚动条卷去的宽度；当前滚动条卷去的高度</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><b>DOM方法扩展</b></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>1.children——作用：获取某一个容器中所有的元素子节点（还可以筛选出指定标签名）</td> 
  </tr> 
 </tbody> 
</table>

HTML代码：

获取div1下的所有元素子节点(儿子级别)：

var oDiv = document.getElementById("div1");
    console.log(oDiv.children.length); //6

但是children方法在非标准浏览器下不兼容，故需重写children方法  
算法分析：首先获取所有的子节点（childNode），在所有的子节点中，把元素节点过滤出来，即nodeType===1。如果多传一个标签名，进行二次筛选，获取指定标签名的集合。代码如下：

<table> 
 <tbody> 
  <tr> 
   <td>2.getElementsByClass——作用：通过元素的样式类名获取一组元素集合（兼容所有浏览器）</td> 
  </tr> 
 </tbody> 
</table>

jQuery中没有此方法，但jQuery的一部分选择器也是基于这个方法的原理来实现的  
getElementsByClassName()原方法：写一个样式类名的话，只要包含这个样式类名就可以；写两个的话，只要同时包含这两个就可以，但和样式的顺序以及中间有多少个空格是没有关系的；如果不写，结果是一个空的集合

<table> 
 <tbody> 
  <tr> 
   <td>3.获取上一个哥哥元素节点（prev）、获取下一个弟弟元素节点（next）、获取所有的哥哥元素节点（prevAll）、获取所有的弟弟元素节点（nextAll）、获取相邻的两个元素节点（sibling）、获取所有的兄弟元素节点（siblings）</td> 
  </tr> 
 </tbody> 
</table>

获取上一个哥哥元素节点（prev）：  
prev算法分析：首先获取当前元素的上一个哥哥节点，判断是否为元素节点，不是的话基于当前的继续找上面的哥哥节点，一直找到哥哥元素节点为止，如果没有哥哥节点，返回null。代码如下：

--------------------

获取下一个弟弟元素节点（next）：  
代码如下：

--------------------

获取所有的哥哥元素节点（prevAll）：  
代码如下，prev方法见上：

function prevAll(curEle) { 
        var ary = [];
        var pre = prev(curEle);
        while (pre) {
            ary.unshift(pre); //放到开头，防止倒序
            pre = prev(pre);
        }
        return ary;
    }

--------------------

获取所有的弟弟元素节点（nextAll）：  
代码如下，next方法见上：

function nextAll(curEle) { 
        var ary = [];
        var nex = next(curEle);
        while (nex) {
            ary.push(nex);
            nex = next(nex);
        }
        return ary;
    }

--------------------

获取相邻的两个元素节点（sibling）：  
prev和next方法见上：

function sibling(curEle) { 
        var pre = this.prev(curEle);
        var nex = this.next(curEle);
        var ary = [];
        pre ? ary.push(pre) : null;
        nex ? ary.push(nex) : null;
        return ary;
    }

--------------------

获取所有的兄弟元素节点（siblings）：  
prevAll和nextAll方法见上：

function siblings(curEle) { 
        return this.prevAll(curEle).concat(this.nextAll(curEle));
    }

<table> 
 <tbody> 
  <tr> 
   <td>4.获取第一个元素子节点（firstChild）、获取最后一个元素子节点（lastChild）</td> 
  </tr> 
 </tbody> 
</table>

这两个方法jQuery中没有  
获取第一个元素子节点（firstChild）：

function firstChild(curEle) { 
        var chs = this.children(curEle);
        return chs.length > 0 ? chs[0] : null;
    }

获取最后一个元素子节点（lastChild）：

function lastChild(curEle) { 
        var chs = this.children(curEle);
        return chs.length > 0 ? chs[chs.length-1] : null;
    }

<table> 
 <tbody> 
  <tr> 
   <td> 5.获取当前元素索引（index）</td> 
  </tr> 
 </tbody> 
</table>

有几个哥哥索引就是几，代码如下：

function index(curEle) { 
        return this.prevAll(curEle).length;
    }

<table> 
 <tbody> 
  <tr> 
   <td> 6.prepend——作用：增加到某一个容器的开头（与appendChild对应）</td> 
  </tr> 
 </tbody> 
</table>

append：向指定容器的末尾追加元素（重新appendChild方法）：

function append(newEle,container) { 
        container.appendChild(newEle);
    }

prepend：增加元素到某一个容器的开头  
算法分析：把新的元素添加到容器中第一个子元素节点的前面，如果一个元素子节点都没有，就放在末尾即可

function prepend(newEle, container) { 
        var fir = this.firstChild(container);
        if (fir) {
            container.insertBefore(newEle, fir);
            return;
        }
        container.appendChild(newEle);
    }

<table> 
 <tbody> 
  <tr> 
   <td>7.insertAfter——作用：增加到容器中某一个元素的后面（与insertBefore对应）</td> 
  </tr> 
 </tbody> 
</table>

重写insertBefore：追加到指定元素的前面

function insertBefore(newEle, oldEle) { 
        oldEle.parentNode.insertBefore(newEle, oldEle);
    }

insertAfter相当于追加到oldEle弟弟元素的前面，如果弟弟不存在，也就是当前元素已经是最后一个了，把新的元素放在最末尾即可

function insertAfter(newEle, oldEle) { 
        var nex = this.next(oldEle);
        if (nex) {
            oldEle.parentNode.insertBefore(newEle, nex);
            return;
        }
        oldEle.parentNode.appendChild(newEle);
    }

<table> 
 <tbody> 
  <tr> 
   <td>8.hasClass——作用：判断是否存在某一个样式类名</td> 
  </tr> 
 </tbody> 
</table>

function hasClass(curEle, clasName) { 
        var reg = new RegExp("(^| +)" + clasName + "( +|$)");
        return reg.test(curEle.clasName);
    }

<table> 
 <tbody> 
  <tr> 
   <td>9.removeClass——作用：删除样式类名 </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>10.addClass——作用：给元素增加样式类名 </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> 11.getCss、setCss、setGroupCss获取/设置/批量设置css </td> 
  </tr> 
 </tbody> 
</table>

jQuery中统一叫css方法  
getCss代码：

--------------------

JS中给元素设置属性值，只能通过curEle.style\[attr\] = value这种方式给当前元素设置属性  
setCss：给当前元素的某一个样式属性设置值（增加在行内样式上），代码如下：

--------------------

setGroupCss：批量设置css属性  
代码如下：

--------------------

css:此方法实现了获取、单独设置、批量设置元素的样式值  
代码如下：