第一节:浏览器对象模型

JS的DOM操作

想必大家学习完之前的内容,已经知道了css选择器本质就是css与html两种语法建立关联的特定标识符,那在JS语言的语法中,也有特点的方式与html语言编写的表情建立关联,我们就称之为JS选择器。

1、getElement系列

// 1.通过id名获取唯一满足条件的页面元素
document.getElementById('id名');
// 该方法只能由document调用

// 2、通过class名获取所有满足条件的页面元素
document.getElementsByClassName('class名');
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组结果的对象,使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])

// 3.通过tag名获取所有满足条件的页面元素
document.getElementsByTagName('tag名');
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组结果的对象,使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])

2、querySelect系列

// 1.获取第一个匹配到的页面元素
document.querySelector('css3语法选择器');
// 该方法可以由document及任意页面对象调用

// 2.获取所有匹配到的页面元素
document.querySelectorAll('css3语法选择器');
// 该方法可以由document及任意页面对象调用
// 返回值为NodeList (一个类数组结果的对象,使用方式同数组)
// 没有匹配到任何结果返回空NodeList对象 ([])

2-1 案例:

<body>
    <div id="box" class="box"></div>
    <script>
        var box1 = document.getElementById('box');
        var box2 = document.querySelector('.box');
        // box1 === box2,就代表页面id为box,class为box的div标签
    </script>
</body>

3、JS页面操作

我们学习完JS的基本语法后,知道如何简单使用JS语言,有掌握了JS选择器,就可以与页面建立起联系,那我们可以通过哪些方式与页面标记进行交互?有可以在交互的过程中对标签进行哪些具体的操作呢?

3-1 鼠标事件

我们先来看一下交互的方式,叫做标签对象的事件绑定,可以绑定的事件有:

/*
onclick:鼠标点击
ondblclick:鼠标双击
onmousedown:鼠标按下
onmousemove:鼠标移动
onmouseup:鼠标抬起
onmouseover:鼠标悬浮
onmouseout:鼠标移开
oncontextmenu:鼠标右键
*/

3-2 事件的绑定

具体绑定事件的方式:

<body>
    <div class="box">绑定点击事件后可以完成点击交互</div>
    <script>
        var box = document.querySelector('.box');
        // 页面class为box的div被鼠标点击后会有弹出框
        box.onclick = function() {
            alert("box标签被点击了")
        }
    </script>
</body>

那么绑定完事件后又可以怎样具体操作页面标签呢?

3-3 操作行间式样式

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box" style="background-color: red"></div>
    <script>
        var box = document.querySelector('.box');
        // 语法:页面对象.全局style属性.具体的样式名
        box.onclick = function() {
            // 读:获取行间式样式值 
            var bgColor = box.style.backgroundColor;  
            // 写:对行间式样式进行赋值,初始没有该条行间式样式,相同会自动添加设置好的行间式
            box.style.backgroundColor = 'orange';  // css3多个单词的属性名采用小驼峰命名法
        }
    </script>
</body>

3-4 只读 计算后 样式

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box" style="background-color: red"></div>
    <script>
        var box = document.querySelector('.box');
        // 语法:getComputedStyle(页面元素对象, 伪类).样式名;
        // 注:我们不需要考虑伪类的范畴,直接用null填充即可
        box.onclick = function() {
            // 只读:获取计算后样式值 
            var width = getComputedStyle(box, null).width;  
        }
    </script>
</body>

3-5 操作标签class名

<body>
    <div class="box">class名操作</div>
    <script>
        var box = document.querySelector('.box');
        // 查看类名
        var cName = box.className;
        // 修改类名
        box.className = "ele";
        // 增加类名
        box.className = " tag";  // 添加后的结果class="ele tag",所以赋值时一定注意tag前有个空格字符串
        // 删除所有类名
        box.className = "";
    </script>
</body>

3-6 操作标签全局属性值

<body>
    <img src="https://www.baidu.com/favicon.ico" class="image" />
    <script>
        var img = document.querySelector('.image');
        // 查看全局属性值
        var imgSrc = img.getAttribute('src');
        // 修改全局属性值
        img.setAttribute('src', 'img/bg_logo.png');
        // 删除全局属性值
        img.setAttribute = ('src', '');;
    </script>
</body>
上一篇
下一篇
Copyright © 2022 Egon的技术星球 egonlin.com 版权所有 帮助IT小伙伴学到真正的技术