JS里面的DOM操作(1)

Myth丶恋晨 2023-07-03 08:28 7阅读 0赞

## 节点操作 ##

1.  **appendChild()** 向childnodes列表的末尾添加一个节点.
2.  **instertBefore()** 添加节点 此方法接受两个参数: 要插入的节点和作为参照的节点 . 插入节点后,被插入的节点会变成参照节点的前一个同胞节点. 如果参照节点是null,则与appendChild()执行相同的操作.
3.  **replaceChild()** 替换节点 此方法接受两个参数: 要插入的节点和要替换的节点 . 要替换的节点从文档中删除,同时要插入的节点占据它的位置.
4.  **removeChild()** 移除节点, 只接受一个参数: 要移除的节点. 使用该方法后,节点消失 ,失去文档中已有的位置.  
    \#\# **总结**  
    …前面四种方法操作的都是某个节点的子节点. 也就是说这几个方法必须先取得父节点 **----另外不是所有类型的节点都有子节点,如果在不支持子节点的节点上调用了这些方法,将导致错误发生----**

## **Document类型** ##

1.  **document.getElementById()**;  
    \---------此方法接受一个参数,要取得的元素的ID,如果有则返回该元素 如果不存在则返回null . **注意:这里的ID必须与页面中原书的id特性严格匹配,包括大小写.**
2.  **document.getElementsByTagName()**;  
    \-------此方法接受一个参数, 即要获取的元素的标签名.  
    —当然如果要获取文档中所有元素,就可以向该方法传"\*";就可以取得页面中所有的元素.返回时–按照元素的出现先后顺序列出来–
3.  **document.getElementByName()**;  
    \------- 接受一个参数(属性name的值) ,这个方法会返回带有给定name特性的所有元素.
4.  **document.getElementsByClassName()**  
    \-----接受一个参数,通过类名来获取元素,如果有多个类名相同的元素,则返回的是一个集合.  
    **document.querySelector()**  
    \----接受一个参数,即选择器.会根据指定选择器返回第一个元素对象.  
    **document.querySelectorAll()**  
    \----接受一个参数.返回的是指定选择器的所有元素对象集合.  
    \--------**这3个方法都是H5新增的**\----------
5.  **document.createElement()**;  
    \-----这个方法可以创建新元素 该方法接受一个参数,即要创建元素的标签名.

先写这么多啦 还有的方法我后面会慢慢整理出来…