javascript - Dom常用操作(element)

HTML DOM Element 对象

最近在看react状态驱动视图的具体实现，里面通过creatElement方法将dom字符串转换成dom元素，进而绑定事件；然后又使用insertBefore和removeChild方法通过state的变化重新调用render方法刷新视图；看到这顺便整理一下dom中对元素增删改查的基本方法，方便后面使用查看….

HTML DOM 节点

在 HTML DOM （文档对象模型）中，NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。每个部分都是节点：

• 文档本身是文档节点
• 所有 HTML 元素是元素节点
• 所有 HTML 属性是属性节点
• HTML 元素内的文本是文本节点
• 注释是注释节点

appendChild() 向元素添加新的子节点，作为最后一个子节点。

let childDom = document.createElement('span');
let childDomTextNode = document.createTextNode('hello world');
childDom.appendChild(childDomTextNode);

// <span>hello world</span>

removeChild() 方法指定元素的某个指定的子节点。

let childDom = document.createElement('span');
let childDomTextNode = document.createTextNode('hello world');
childDom.removeChild(childDomTextNode);

// <span></span> hello world被移除

insertBefore(newItem,existingItem) 方法在您指定的已有子节点之前插入新的子节点。

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

let target = document.getElementById('myList');
let childDom = document.createElement('span');
let childDomTextNode = document.createTextNode('hello world');
childDom.appendChild(childDomTextNode);
target.insertBefore(childDom,target.childNodes[0]);

// <span></span> hello world被移除