JavaScript的DOM类型

读这篇文章需要具备HTML和CSS的基础知识，也需要知道js是什么。
··
想讨论更多编程话题
加入qq群聊：1090397302
翠花欢迎你的到来QAQ~~
··

JavaScript常用的DOM类型

创建元素：createElement
父元素里面添加子元素：appendChild
元素里面添加属性：setAttribute
返回父元素：parentNode
删除节点：removeChild
绑定元素：addEventListener

创建元素：createElement

创建元素就是说在js里面创建一个HTML里面的div
创建元素需要用到的代码就是：createElement
为方便理解，我给大家展示一段代码：

<script type="text/javascript">
			//创建元素
			var div = document.createElement("div");
			//在body里面显示创建的这个div
			document.body.appendChild(div);
		</script>

上面的这段代码就是创建元素的意思，先用var声明一个变量，变量的名字为div，document是文件的意思，后面的createElement就是我们的主角了，在括号里面写出你要创建的元素标签，记得要加上引号！但是我们创建了元素，并没有把它放进body里面，因此实现不了我们想要的效果，所以我们创建过元素后还需要把元素放进body里面，这样才是完整的创建元素的过程 ，创建元素就完成了。

父元素里面添加子元素：appendChild

在父元素里面添加子元素，比如，我们上面创建了一个div，我现在想在这个div里面加上一个p标签，就可以这样：

<script type="text/javascript">
			//创建div
			var div = document.createElement("div");
			//在body里面显示创建的这个div
			document.body.appendChild(div);

			//创建p标签
			var p = document.createElement("p")
			//把p标签放进div里面
			div.appendChild(p)
		</script>

这个是接着上面的代码写的，不过思路跟上面是一样的，在div里面添加了一个p标签。

返回父元素：parentNode

返回父元素，我们上面创建了一个div，div里面又创建了一个p标签
返回父元素就是 比如 我想把p返回父元素，把p返回到div，来看代码;

<script type="text/javascript">
			//创建元素
			var div = document.createElement("div");
			document.body.appendChild(div);
			//创建p标签
			var p = document.createElement("p")
			//把p标签放进div里面
			div.appendChild(p)
			//使p返回父元素
			var x = p.parentNode
		</script>

这段代码 我把p标签返回父元素了，返回父元素也就这一行代码，比较好理解。

删除节点：removeChild

删除节点就是把一个元素（div或者其他标签）删除，但是给一些动态效果使用这个删除节点的话，它不会删除，而是隐藏元素。

<div id="div1">
			<p id="p1">这是一个段落。</p>
			<p id="p2">这是另一个段落。</p>
		</div>
		<script>
			/*找到父元素*/
			var parent = document.getElementById("div1");
			/*找到子元素*/
			var child = document.getElementById("p1");
			/*将子元素从父元素中删除*/
			parent.removeChild(child);
		</script>

这段代码就是删除了一个父元素里面的子元素，删除了另一个段落，也是比较容易理解的，不算特别难。

绑定元素：addEventListener

最后一个就是绑定元素，就是给一个元素添加事件监听器，事件监听器就是用户点击按钮时触发的事件监听器。
js的监听事件就是相当于注册一个监听器，随时检测对应事件有没有发生，如果发生了自动调用定义好的函数来处理。

        <h2>这是一个标题</h2>
		<p>这是一个段落</p>
		<button id="my">试一试</button>
		<p id="de"></p>
		<script>
			document.getElementById("my").addEventListener("click", displayDate);
			function displayDate() {
				document.getElementById("de").innerHTML = Date();
			}
		</script>

这段代码上面写了一个触发按钮事件，当鼠标点击按钮时，会在下面出现一段文字，一般情况下 监听事件是对应于dom元素而言的，同时也需要声明所监听事件种类。

讲解完毕，嘿嘿嘿嘿嘿~