JavaScript学习3（DOM）

最新推荐文章于 2024-08-02 08:30:00 发布

养羊得亿

最新推荐文章于 2024-08-02 08:30:00 发布

阅读量87

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_40551957/article/details/114365699

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

DOM全称文件对象模型，w3c推荐的处理可扩展标记语言（html，或xml）的标准编程接口。可以改变网页的内容和结构，样式。

DOM树：
一个页面就是一个文档，document；
文档中含义多级多种标签，element；
网页的所有内容都是节点，node；
DOM中，把上面三种都看作对象；（可以用变量指向对象）

获取对象方式；
常用getElementById（）；

ele1=document.getElementById('对象id')

同理可以用getElementsByTagName（）
注意是标签名，所以会返回所有标签元素，加S；
也可以用类名（注意新版本支持以下类型）
getElementsClassname（‘类名’）返回所有标签元素；
document.querySelector(’.‘类名/’#id’/‘标签’)返回第一个标签元素
document.querySelectorAll(’.‘类名/’#id’/‘标签’)返回所有标签元素
现有标签，然后才能获取，即这些函数要在标签的下面使用。
特殊元素对象的获取
mybody=document.body;
myhtml=document.documentElement;
事件
事件可以理解为触发响应机制；
通常情况下，分三步，找到事件源（对象），确定事件类型（触发方式），运行事件处理程序（执行自定义函数）；
代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>唐伯虎</button>
    <script>
        //点击按钮弹出对话框
        var btn=document.querySelector('button')
        btn.onclick=function(){
            alert('秋香');
        }
    </script>
</body>
</html>

鼠标事件：
在这里插入图片描述
我们也可以不绑定事件，直接进行操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1></h1>
    <!-- 空标题 -->
    <script>
        var head1=document.querySelector('h1');
        head1.innerText='happy';
        // 对标签内容更换
    </script>
</body>
</html>

innerText或者innerHtml是标签的属性，可读写（赋值）
区别是innerText不识别HTML标签，而innerHtml识别；
都是修改属性。
修改元素：
在js中，我们用this代表被触发的对象。
修改元素内容：this.innerHtml=" "
修改元素属性：this.属性=" "
修改元素样式：this.style.属性=" "
还可以通过更改元素的类名实现元素变化