节点:js的DOM核心编程 ,每个元素都是一个节点,而每个节点有不同的节点信息。
.nodeName(获得节点的名称):
如果是元素节点返回为大写的元素标签,例如:P标签。
若是文本节点则会返回#text
![](https://i-blog.csdnimg.cn/blog_migrate/6a5a93b5847f624ed2038cd4fb3335e5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8fb5f73896693a0dbcb87f8c939a96bf.png)
.nodeType(节点的类型):
若为元素节点返回1,文本节点则返回3。ps:1~9都是有节点的。
![](https://i-blog.csdnimg.cn/blog_migrate/4954c51f11704c9f4ccb3cf6fa071972.png)
![](https://i-blog.csdnimg.cn/blog_migrate/dd2fa372d7523386f0e96b1b3360ca5e.png)
.nodeValue(节点的值):
若为元素节点则返回:none,文本节点则会返回文本的内容。
![](https://i-blog.csdnimg.cn/blog_migrate/f62d24629612d15a795e6b41c34f6e9e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/47f9c9dac7523997e77fd23ce28a8860.png)
节点的关系:
父子节点
.parentElement(父节点)
.firstElementChild(第一个子节点)
.lastElementSibling(最后一个子节点)
.children(所有的子节点)
兄弟节点:
previousElementSibling(上一个兄弟节点)
nextElementSibling(下一个兄弟节点)
![](https://i-blog.csdnimg.cn/blog_migrate/ff5afc746d8a4bfe1dbdfb9d25ce118e.png)
例:单,击减数值-1,单击加数值+1
![](https://i-blog.csdnimg.cn/blog_migrate/9a81c677d23058a10ad2763d84fd9849.png)
![](https://i-blog.csdnimg.cn/blog_migrate/40ecd0a32977bf9318dff8afe67924c2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4950b33e2f88b8758b63d8ff76242487.png)
节点的操作:
document.createElement() :创建节点
.remove(): :删除节点
复制节点:
.cloneNode(false): 复制节点不带子节点
.cloneNode(true): 复制节点带子节点
.insertBefore(新的节点,相关节点) 插入节点:把新的节点插入到相关节点的前面
parent.appendChild(elem) 插入节点:将elem插入到parent最后面
表格的操作:
删除行:.deletRow()
插入行: .insertRow()
插入列:.insertCell
设置列的内容: .innerText="xxx"