【浅析】JS之DOM的增删查改

选择DOM元素

Node节点

Node 是一个接口，各种类型的 DOM API 对象会从这个接口继承。

他有一些方法：

名字	描述
Node.firstChild	返回该元素的第一个子元素
Node.lastChild	返回该元素的最后一个子元素
Node.parentNode	返回该元素的父元素
Node.previousSibling	返回该元素的同辈的前一个元素

查

document.getElementById()

根据id查找dom元素，自上而下查找，如果有多个重名元素，则返回第一个。

document.getElementsByClassName()

根据类名查找元素，多个类名用空格分隔。不仅仅是document，其它元素也支持 getElementsByClassName 方法。返回一个DOM元素集合。

document.getElementsByTagName()

根据标签名字去查找元素，标签名字是如div、h1、span这样的。
同样是返回一个DOM元素集合

document.getElementsByName()

根据元素的name属性去查找元素，也是返回一个DOM元素合集

document.querySelector()

用选择器查找元素，跟在css里用的一样，可以用first-child等伪元素。只返回第一个查找到的元素

document.querySelectorAll

也是用选择器查找元素，不过返回的是DOM元素集合

document.forms

查找所有表单，返回一个DOM元素集合

创建虚拟DOM元素

document.createElement()

传入一个字符串表示元素标签。创建一个虚拟的DOM元素（不在DOM树里）

只有document对象才有这个方法。

添加DOM元素

appendChild()

传入一个Node对象，将这个Node对象添加到一个节点中。

insertBefore(newNode, referenceNode)

将newNode插入在referenceNode之前。

删除DOM

removeChild()

传入一个Node节点，将其从父元素中删除。

修改DOM

replaceChild(oldNode, newNode)

将父元素中的oldNode用newNode替换。

getAttribute(attributeName)

获取某个节点的某个属性

如：box.getAttribute("id")，就能获取box的id属性

setAttribute(attributeName, value)

将某个节点的某个属性设定为特定值。

如：box.setAttribute("id","box1")，就能将box的id属性设置为box1

.style

访问某个节点的css样式表,可以进一步访问或修改该节点的css样式。

如:box.style.height="500px";,可以把box的高度设置为500px。

注意，传入的css样式值都是字符串！

---

操作dom小玩具：

    <style>
    .replace>div {
     
        width: 30px;
        height: 50px;
        overflow: hidden;
        background-color: pink;
    }
    
    body {
     
        display: flex;
        flex-wrap: wrap;
    }
    
    div {
     
        margin-top: 5px;
        margin-right: 20px;
        width: 300px;
        height: 300px;
        box-shadow: 3px 3px 2px #666;
        overflow: scroll;
    }