DOM元素子父节点的操作

淩亂°似流年 2021-11-04 15:28 380阅读 0赞

:) 零散的注意事项
    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)

###### 9. 之前的所讲的前四种动态获取方式以及两种静态获取方式是对于动态创建元素之前而言的，即当在js中在动态创建元素之前通过前四种方式可获取到该元素，但是通过两种静态方式无法获取到。在已经动态创建元素后，可通过任意一种方式获取到页面中的所有元素。（后两种特殊获取可获取到动态创建的元素！！） ######