【DOM】

---

带你充分了解DOM

相信很多人都知道DOM,但是你是否对DOM充分了解呢

---

提示：以下是关于DOM的知识，下面案例可供参考

一、DOM的含义

DOM: 文档对象模型
html代码结构在js中的映射！(js操作DOM节点，需要获取到DOM节点)

二、DOM详解

1.DOM树

将html结构以树形图的方式展示出来

如下：

2.关于节点的操作

标签节点

拿

A.获取标签节点的方法

			   document.getElementById()
				document.getElementsByClassName()
				document.getElementsByTagName()
				document.querySelector('css选择器')
					只能获取到一个标签
				dcoument.querySelectorAll('css选择器')
					获取多个标签

B. 获取标签节点的一些属性

				children：返回当前标签对象的所有儿子节点
					标签对象.children

				nextElementSibling：下一个兄弟节点
					标签对象.nextElementSibling

				previousElementSibling:上一个兄弟节点
					标签对象.previousElementSibling

				parentNode：父节点
					标签对象.parentNode

				firstElementChild:获取当前标签对象的第一个子节点
					标签对象.firstElementChild

				lastElementChild：获取当前标签对象的最后一个子节点
					标签对象.lastElementChild

创

document.createElement(‘标签名称’)

用

            A. 标签对象.appendChild(标签对象);
               追加一个标签到另一个标签的末尾
			B. 
				父标签对象.insertBefore(新节点, 目标节点);
				将新节点插入到目标节点之前

			C.
				标签对象.cloneNode(false/true)
					克隆当前的标签对象
					false 默认值，表示只克隆当前的节点
					true, 克隆当前节点以及其子节点

			D. 
				父容器标签对象.removeChild(子节点对象); 
					删除父容器的某个子节点

			E. 
				父容器对象.replaceChild(newNode, oldNode);
					用新节点替换掉旧节点

属性节点

拿

		 标签对象.getAttribute(属性);

设

			标签对象.setAttribute(属性,值);

删

			标签对象.removeAttribute(属性);

总结

以上就是关于DOM的一些知识点总结。