document.createElement(tagName)
创建一个由tagName指定的HTML元素,需要注意这仅仅是创建出来,并没有加到HTML文档中,需要另一个API来加入到文档。
var div = document.createElement('div')//创建一个<div>
document.body.appendChild(div)//将div添加到body中
上面的appendChild可将创建的元素添加到文档的父元素中。
Node.parentNode
返回指定节点在DOM书中的父节点
![](https://img.haomeiwen.com/i15055066/a424d029e1c2c8f4.png)
![](https://img.haomeiwen.com/i15055066/5ea6d67c9c516cfb.png)
Node.parentElement
返回指定节点的父元素节点。如果父元素不是element(nodeType !== 1)则返回null。
![](https://img.haomeiwen.com/i15055066/ea72c871da13f869.png)
![](https://img.haomeiwen.com/i15055066/fac4de68f87aa3d1.png)
因为HTML标签的父节点不再是元素,所以返回了null。
parentNode和parentElement的区别
parentNode返回所有类型的节点,
parentElement如果父元素不是element(nodeType !== 1)则返回null。
Node.nodeType
返回指定节点的节点类型,返回的一个整数。
常量 | 返回数值 | 描述 |
---|---|---|
Node.ELEMENT_NODE | 1 | 元素节点,如<div> |
Node.TEXT_NODE | 3 | Element或者Attribute中的文字 |
Node.PROCESSING_INSTRUCTION_NODE | 7 | 用于XML文档的ProcessingInstruction,如<?xml-stylesheet ... ?>声明 |
Node_COMMENT_NODE | 8 | Comment节点 |
Node_DOCUMENT_NODE | 9 | Document节点 |
Node_DOCUMENT_TYPE_NODE | 10 | DocumentType节点,如<!DOCTYPE html> |
Node_DOCUMENT_FRAGMENT_NODE | 11 | DocumentFragment节点 |
![](https://img.haomeiwen.com/i15055066/10105aa46ff684f8.png)
返回值为1说明p是一个元素。
ParentNode.children
返回一个元素的所有子标签(不包括节点类型为文本(nodeType === 3)的标签)
![](https://img.haomeiwen.com/i15055066/febddd2b4f21db16.png)
![](https://img.haomeiwen.com/i15055066/3ddf75832cad1162.png)
ParentNode.childNodes
返回一个元素的所有子标签(包括节点类型为文本(nodeType === 3)的标签)
![](https://img.haomeiwen.com/i15055066/45cd0e67b79e3ea8.png)
![](https://img.haomeiwen.com/i15055066/4932f43f1e2b00b2.png)
Node.nextSibling
返回其父节点的childNodes列表中紧跟在其后面的一个节点(它的第一个弟弟节点),如果它是最后一个节点(最小的),返回null。
![](https://img.haomeiwen.com/i15055066/1f6e3ad5dddab90f.png)
![](https://img.haomeiwen.com/i15055066/4488d23056c72141.png)
咦怎么和想象中的不一样,不是应该返回<span>吗?看上一个例子可以知道,div的childNodes列表中p的下一个是text。想获取到span,需要这么写
![](https://img.haomeiwen.com/i15055066/1f3e7c576d8b9a74.png)
![](https://img.haomeiwen.com/i15055066/af904b027478cf7c.png)
下一个的下一个就是啦。
网友评论