DOM基本操作

属性相关

常用的nodeType返回值

节点.nodeType用来获取当前节点的节点类型，一共有12种不同的类型，具体如下

其中，常用的有元素节点，属性节点和文本节点

<div>
    divdiv
</div>
<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<script>
    var oUl = document.querySelector("ul");
    var oDiv = document.querySelector("div");
    console.log(oUl.nodeType);//1
    console.log(oUl.attributes[0].nodeType);//2
    console.log(oDiv.childNodes[0].nodeType)//3
</script>

对于每种节点类型，nodeName 和 nodeValue 属性的返回值：

元素.attributes

以类数组的方式返回当前元素的属性列表

元素.childNodes

以类数组的方式返回当前元素的所有子节点

元素.children

以类数组的方式返回当前元素的所有子元素节点

元素.parentNode

返回当前元素的父节点，最顶层的父节点为document,在往上就返回null

元素.nextSibling

返回当前元素的下一个兄弟节点，如果当前元素为最后一个子节点，返回null

找当前元素的下一个兄弟元素节点用元素.nextElementSibling

元素.previousSibling

返回当前元素的上一个兄弟节点，如果当前元素为第一个子节点，返回null

找当前元素的上一个兄弟元素节点用元素.previousElementSibling

元素.firstChild

返回当前元素的第一个子节点，如果没有，返回null

找当前元素的第一个子元素节点用元素.firstElementChild

元素.lastChild

返回当前元素的最后一个子节点，如果没有，返回null

找当前元素的最后一个子元素节点用元素.lastElementChild

节点操作

创建节点

document.createElement(元素)

在最后插入一个子节点

父级.appendChild(要被插入的元素)

在某个节点前面插入节点

父级.insertBefore(要被插入的元素，哪一个元素之前)

移除某个节点

父级.removeChild(要被移除的元素)

替换某个节点

父级.replaceChild(要插入的元素，要被替换的元素)