DOM元素子父节点的操作-蒲公英云

DOM元素子父节点的操作

:) 零散的注意事项
1. offsetLeft/offsetTop/offsetHeight/...都是值，无单位
2. 火狐是在页面加载完后才能得到offsetHeight的值的
3. offsetHeight是某一对象的高
4. document.documentElement.clientHeight是用户可以看到的html的高，若html的高度大于浏览器的高，则该值为浏览器的高
5. token:   转换中或者传送中格式有误
6. 无论是动态加载还是静态加载，只有在js下部内嵌时所有元素才可获取，若在前部内嵌js或者外部js中操作，还是要写到`window.onload`中

1. 获取当前元素的子元素的个数 `对象名.childElementCount`

子元素只包含标签元素

2. 获取当前元素的子节点集合`对象名.childNodes` ——>`NodeList集合`

注意：回车和文字（回车和回车、回车和空行、纯文本和空行、多个回车、多个纯文本）在一起时，只计算一次（即两者是一个结点）。

子节点包括：标签元素、文本元素

3.对某一节点的内容获取

① 节点对象.nodeType: 其中1代表标签元素，3代表文本元素
② 节点对象.nodeName: 节点对应的名称（li/#text/ul）
③ 节点对象.nodeValue: 节点内的值(只有文本节点元素可以获取到，标签元素通过常规的方式获取：对象.value/对象.innerHTML/对象.innerText)

4. 获取当前元素的同胞兄弟元素

下列两种获取方式不会获取到文本元素

对象.nextElementSibling：获取当前元素的下一个同胞兄弟元素
对象.previousElementSibling：获取当前元素的前一个同胞兄弟元素

下面两种方式会获取到文本元素

对象.nextSibling：获取当前元素的下一个同胞兄弟元素（可能为文本元素）
对象.previousSibling：获取当前元素的前一个同胞兄弟元素（可能为文本元素）

5. 获取当前元素的子元素集合`对象.children`——>`htmlCollection集合`

该子元素集合不包含文本元素

6. 获取当前元素的第一个和最后一个元素

下面两种方式不包含文本元素

对象.firstElementChild
对象.lastElementChild

下面两种方式包含文本元素

对象.firstChild
对象.lastChild

7. 通过子元素来获取父元素

下面两种方式获取到的父元素是相同的（因为标签元素无法做父元素）

子元素对象.parentNode
子元素对象.parentElement

8. dom元素创建

var ele = document.createElement("标签名")

将子元素追加到父元素的所有内容之后

父元素.appendChild(ele)

将子元素插到某一兄弟元素之前

父元素.insertBefore(新的子元素，新元素插入的参考元素)
eg:

//ele元素插到了block的第一个子元素的前面
    var ele = document.createElement("div")
    var block = document.getElementByClassName("block")[0]
    block.insertBefore(ele,block.firstChild)