JavaScript的DOM类型

桃扇骨 2023-06-13 09:22 15阅读 0赞

### JS中常用的DOM类型 ###

*   *  JavaScript常用的DOM类型
     *  创建元素：createElement
     *  父元素里面添加子元素：appendChild
     *  返回父元素：parentNode
     *  删除节点：removeChild
     *  绑定元素：addEventListener

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

## JavaScript常用的DOM类型 ##

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

## 创建元素：createElement ##

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

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

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

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

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

## 返回父元素：parentNode ##

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

这段代码 我把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元素而言的，同时也需要声明所监听事件种类。

讲解完毕，嘿嘿嘿嘿嘿~