前端学习 day9 : DOM操作,获取DOM元素,绑定事件,修改属性_dom获取元素后如何绑定属性-优快云博客

本文链接：https://blog.youkuaiyun.com/whosedad/article/details/121459074

本文详细介绍了前端开发中的DOM操作，包括DOM的定义、获取元素的方法。同时，讲解了事件的基础知识，如事件三要素和事件触发的不同方式。此外，还探讨了如何对元素属性进行操作，如表单、CSS样式以及阻止a标签默认跳转，并讨论了不同类型的事件，如鼠标和键盘事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.DOM操作

1.1 啥是DOM

事件基础文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM又称为文档树模型

文档：一个网页可以称为文档

节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

元素：网页中的标签

属性：标签(元素)的属性

html中模拟文档树结构

1.2 获取DOM元素的方式

    // 1 根据ID获取DOM对象,返回单个对象
    var box1 = document.getElementById('box1');
    console.log(box1);

    // 2 根据class获取DOM对象,返回伪数组
    var box2 = document.getElementsByClassName('box2');
    console.log(box2);

    // 3 根据name属性获取,返回伪数组
    var box3 = document.getElementsByName('box3');
    // 4 根据标签名获取,返回伪数组
    var divs = document.getElementsByTagName('div');

    // 5 querySelector : 获取选择器对应的元素对象,只会返回单个,如果找到了多个,则只返回第一个
    var box1 = document.querySelector('#box1');
    var box2 = document.querySelector('.box2');

    // 6 querySelelectorAll : 获取选择器对应的所有元素对象,返回伪数组
    var divs = document.querySelectorAll('div');

2.事件初识

事件：触发-响应机制

Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

2.1 事件三要素

事件源:触发(被)事件的元素

事件类型:事件的触发方式(例如鼠标点击或键盘点击)

事件处理程序:事件触发后要执行的代码(函数形式)

2.2 事件的基本使用

<script>
var box = document.getElementById('box');
box.onclick = function () {
console.log('代码会在box被点击后执行');
};
</script>

2.3 事件触发的多种写法

HTML内部书写所有

HTML行内触发方法

HTML外部书写

3.对属性进行操作

3.1 非表单和CSS样式属性

因为img这个标签中,自带属性宽度,高度,还有图片源src这几个属性那么可以直接调用

但是有的标签是css样式中的,所以需要通过.style.来调用

 // 事件绑定
            changeImg.onclick = function () {
                // 标签属性,直接用对象.属性即可
                img.src = './images/1.jpg';
                // console.log(img.src);
            }
            changeSize.onclick = function () {
                // 通过标签属性更改
                img.width = 200;
                // 通过css设置, font-size 这种 要这样写 fontSize ,把-换成首字母大写
                img.style.height = '300px';
            }
            hide.onclick = function () {
                img.style.display = 'none';
            }
            show.onclick = function () {
                img.style.display = 'block';
            }
            changeClass.onclick = function () {
                console.log(img.className);
                // 重新赋值新的class属性
                // img.className = 'img2';
                // 新增class属性,注意空格
                // img.className+=' xxx';
                // 获取所有的class,返回伪数组(因为有多类名)
                // console.log(img.classList);
                if (img.classList.contains('img1')) {
                    img.className = 'img2';
                } else {
                    img.className = 'img1';
                }

3.2 表单操作

表单操作中要读取用户输入的内容需要用到Value属性,当用户输入后为防止出错,将提交按钮禁用,用disabled属性

                // 获取输入框数据
                var usernameValue = username.value;
                var passwordValue = password.value;
                // 禁用按钮
                // 避免连续点击两次导致发送两次
                login.disabled=true;

3.3 阻止a标签跳转

<body>
    //第一种方式是行内
    <a href="http://www.baidu.com" onclick="return false;">xxxxxxxxxxxxxxxx</a>
    <a href="xxxx">ddddddddddddddd</a>
</body>
<script>
    //第二种方式是内部
    var a = document.getElementsByTagName('a')[1];
    a.onclick=function(){
        return false;
    }
</script>

3.4 自定义属性

    var btn  = document.getElementById('btn');
    var div = document.getElementById('box1');
    btn.onclick=function(){
        div.style.backgroundColor='red';
        // 更改class
        div.className = 'box2';
        // 通过setAttribute设置
        div.setAttribute('xxx','asd');
        div.setAttribute('style','height:100px;background-color:red');

        // 通过setProperty
        div.style.setProperty('background-color','green');

        // cssText
        div.style.cssText = "height:200px;background-color:pink";
    }

3.5 文本属性

innerText 和 innerHTML的区别

    var div = document.getElementById('dv');
    console.log(div.innerText,div.innerHTML);
    // innerText 只有文本,如果有标签,也不会被页面解析,会进行转义
    // div.innerText = '123<h1>标题</h1>';
    // innerHTML 可以通过这样的方式设置子标签
    div.innerHTML = '123<h1>标题</h1>';

4.事件类型

4.1 一些鼠标事件

    var lis = document.getElementsByTagName('li');
    for (let i = 0; i < lis.length; i++) {
        // 会发生冒泡
        // 移入
        lis[i].onmousemove = mouseover;
        // 移出
        lis[i].onmouseout = mouseout;
        // onmouseenter  onmouseleave  不会发生冒泡
    }
    function mouseover() {
        this.style.fontSize = '40px';
    }
    function mouseout() {
        this.style.fontSize = '20px';

    }

    var inp = document.getElementById('inp');
    // 获得焦点
    inp.onfocus = function(){
        console.log('准备输入....');
    }
    // 失去焦点
    inp.onblur=function(){
        console.log('输入完成,值为:'+(this.value));
    }

    // 键盘按下
    inp.onkeydown = function(e){
        console.log('按下:'+e.keyCode+"-"+e.key);
    }
    // 键盘松开
    inp.onkeyup=function(e){
        console.log('松开:'+e.keyCode+"-"+e.key);
    }