javaScript之DOM(文档对象模型)和事件的使用

最新推荐文章于 2022-11-23 23:30:00 发布

家里有只mini猫

最新推荐文章于 2022-11-23 23:30:00 发布

阅读量115

点赞数

分类专栏：知识的宝库文章标签： javascript

本文链接：https://blog.csdn.net/qq_41256238/article/details/106944213

版权

本文介绍了JavaScript中的DOM文档对象模型，包括Element元素操作、Attribute属性操作和Text文本操作，并详细讲解了事件的概念及常见的事件绑定方法。

摘要由CSDN通过智能技术生成

DOM介绍

DOM(Document Object Model)：文档对象模型。
将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。
图示

在这里插入图片描述

DOM文档对象模型就是将我们的html页面，转化为一个dom树，html中的所有标签、元素、属性都在这颗dom树中得以体现。

Element元素操作

语法

方法名	说明
getElementById(id属性值)	根据id获得一个元素
getElementsByTagName(标签名称)	根据标签名称获得多个元素
getElementsByName(name属性值)	根据name属性获得多个元素
getElementsByClassName(class属性值)	根据class属性获得多个元素
子元素对象.parentElement属性	获取当前元素的父元素
createElement(标签名)	创建一个新元素
appendChild(子元素)	将指定子元素添加到父元素中
removeChild(子元素)	用父元素删除指定子元素

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的获取</title>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class="cls">div3</div>
    <div class="cls">div4</div