JS中常用的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元素而言的,同时也需要声明所监听事件种类。
讲解完毕,嘿嘿嘿嘿嘿~