DOM 节点操作

一、获取节点

方法名	只能document调用	返回单一的值	返回动态集合
getElementById	√	√
getElementsByTagName			√
getElementsByClassName			√
querySelectorAll
querySelector		√

二、增加节点

//创建节点

document.createElement(tagName); 

举个栗子: document.createElement(li); ---创建一个 li 元素节点

//插入节点

elementParent.appendChild(elementChild) --- 在『elementParent元素』中的『最后位置』，插入『elementChild元素』。

举个栗子： ul.appendChild(li); ---在 ul 中的最后位置插入li

elementParent.insertBefore(elementChild)------ 在『elementParent元素』中的『开头位置』，插入『elementChild元素』。

举个栗子：ul.insertBefore(li,ul.firstChild);---在 ul 中的第一个元素之前插入 li

三、删除节点

elementParent.removeChild(elementChild) --- 在 『elementParent元素』中将 『elementChild元素』删除。

举个栗子: var users2=users.getElementsByClassName(‘user’)[1]; //查找要删除的目标

                 user2.parentNode.removeChild(user2); //删除

                其中 parentNode 指的是 父节点

四、element.innerHTML ---节点的HTML内容---建议仅用于『创建、插入新节点』，且内容可控

element.innerHTML=’’; //清空element下的所有html元素

li.innerHTML = ’<img src=”4.jpg”><a href=”/user/4”>lifeng</a>’;  //创建节点，插入节点，设置了属性

 

用innerHTML时的bug:

// innerHTML 修改节点之前如果节点已经绑定事件，此时『事件』会驻留到内存当中，导致内存泄漏。

//innerHTML 内容在插入到节点时，浏览器会不做检查的直接展现出来，那么用户就可以自己加入脚本执行。