【前端笔试】原始JS对DOM对象的操作：增删改查插

骑猪看日落 2022-06-08 09:10 116阅读 0赞

看书、看控制台、看文档一点点总结的~有疏忽的地方，请不吝赐教~

## 1. 增 ##

创建元素节点 ：document.createElement(“div”);  
创建text节点 ：document.createTextNodet(“内容”);  
复制一个节点： var newNode = node.cloneNode();//参数为true复制所有子节点，参数为false只执行一次浅复制。

## 2. 删 ##

removeChild()；//该方法不是在待删除的节点上调用，而是在它的父元素节点上调用。  
node.parentElement.removeChild(node);  
replaceChild()；//删除一个子节点，并用一个新的节点取代它。第一个参数是新节点，第二个参数是要删除的节点。  
node.parentElement.replaceChild(newNode,node);

## 3. 改 ##

许多时候需要对节点**属性**和**内容**进行修改。  
***对属性的修改***  
属性分为标准HTML属性和非标准的HTML属性。  
\* **HTML属性作为Element的属性**  
HTML Element 定义了通用的HTTP属性，像id、标题lang和dir的属性，以及事件的处理程序属性（onclick）。特定的element子类型还有特定的属性，如img的src属性。

var oImg = document.getElementById("img1");
    oImg.id = "newID";
    oImg.className = "className";
    oImg.src = "...";

**获取和设置非标准的HTML属性**  
Element定义了getAttribute和setAttribute方法来查询和设置非标准属性，hasAttribute和removeAttribute来检测命名属性是否存在和完全删除属性。

***对内容的修改***  
innerHTML：包含标签的内容  
innerText（火狐支持不好）：纯文本的元素内容  
textContent（IE不支持）：纯文本的元素内容

## 4. 查 ##

*  **一步查找到位**  
    document.getElementById() 返回对拥有指定 id 的第一个对象的引用。  
    document. getElementsByClassName() 返回文档中所有指定类名的元素集合。  
    document.getElementsByName() 返回带有指定名称的对象集合。  
    document.getElementsByTagName() 返回带有指定标签名的对象集合。
 *  **查找父子兄弟**  
    对于一个Node节点，包含很多种，像：Document节点、Text节点、Comment节点、Element节点，我们常常需要获得的是元素节点，忽略掉Text和Comment节点：  
    firstElementChild,lastElementChild；  
    children => 数组类型：children\[0\] ,第一个子节点  
    nextElementSibling,previousElementSibling => 兄弟节点  
    parentElement => 父亲节点

## 5. 插 ##

Node有方法appendChild（）和insertBefore（）。  
parent.appendChild(child); // 插入到最后  
parent.insertBefore(newNode,node);//插入到node之前