从零开始学 Web 之 DOM（二）对样式的操作，获取元素的方式

大家好，这里是「 Daotin的梦呓」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓」公众号，欢迎大家订阅关注。在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

1、对样式的操作

1.1、点击按钮设置 div 的宽高和背景颜色

<body>

<input type="button" value="显示颜色" id="btn">

<div id="dv"></div>

<script src="common.js"></script>

<script>

    my$("btn").onclick = function () {

        my$("dv").style.width = "200px";

        my$("dv").style.height = "100px";

        my$("dv").style.backgroundColor = "pink";

    };

</script>

</body>

凡是 css 属性时由多个单词构成的，那么在 js 中设置的时候需要把 "-" 去掉，然后除第一个单词的首字母大写即可。

比如：css里面的 background-color，在js里面的写法是 backgroundColor.

1.2、点击按钮隐藏和显示 div 标签

<body>

<input type="button" value="hide" id="btn">

<div id="dv" style="width: 200px; height: 100px; background-color: pink;"></div>

<script src="common.js"></script>

<script>

    my$("btn").onclick = function () {

        if(this.value === "hide") {

            my$("dv").style.display = "none";

            this.value = "show";

        }else if(this.value === "show") {

            my$("dv").style.display = "block"; // block是显示标签

            this.value = "hide";

        }

    };

</script>

</body>

1.3、网页开关灯

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .cls {

            background-color: #000;

        }

    </style>

</head>

<body class="">

<input type="button" value="ON/OFF" id="btn">

<script src="common.js"></script>

<script>

    my$("btn").onclick = function () {

        document.body.className = document.body.className !== "cls" ? "cls" : "";

    };

</script>

</body>

document.body 可以选中 body 标签。

1.4、阻止超链接默认跳转

<body>

<!--方式一-->

<a href="http://www.baidu.com" onclick="alert('------'); return false;">百度</a>

<!--方式二-->

<a href="http://www.baidu.com" onclick="return f1()">百度</a>

<script>

    function f1() {

        alert("---------");

        return false;

    }

</script>

<!--方式三-->

<a href="http://www.baidu.com" id="ah">百度</a>

<script>

    document.getElementById("ah").onclick = function () {

        alert("------");

        return false;

    };

<!--方式四-->

<a href="http://www.baidu.com" id="ah">百度</a>

<script>

    document.getElementById("ah").onclick = function (e) {

        alert("------");

        e.preventDefault();

    };

</script>

</body>

阻止超链接的跳转：返回给 onclick 事件一个 return false，而不单单是 false。

方式二：当使用内联 js 的时候，onclick 里面是 f1() 而不是 f1。是函数的执行，而不是函数体本身。但是在外面写 js 的时候，赋值给 onclick 的是函数体本身，认不是函数的执行。

方式二中之所以加 return，是因为 f1() 执行后返回的是 false，而不是 return false，所以要加一个 return。

方式四：调用事件参数对象的 preventDefault() 方法：e.preventDefault(); 可以阻止超链接跳转。注意 IE8 不支持。

1.5、点击小图在小图下显示大图

<a href="images/2.JPG" id="ah"><img src="images/Daotin.png"></a>

<img src="" id="im">

<script src="common.js"></script>

<script>

    my$("ah").onclick = function () {

        my$("im").src = this.href;

        return false;

    };

</script>

使用 return false; 阻止链接原本的跳转。

1.6、列表高亮显示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        ul {

            list-style: none;

            cursor: pointer;

        }

    </style>

</head>

<body>

<ul>

    <li>哈哈哈</li>

    <li>哈哈哈</li>

    <li>哈哈哈</li>

</ul>

<script src="common.js"></script>

<script>

    var liObjs = document.getElementsByTagName("li");

    for(var i=0; i<liObjs.length; i++) {

        // 鼠标进入事件

        liObjs[i].onmouseover = function () {

            this.style.backgroundColor = "pink";

        };

        // 鼠标离开事件

        liObjs[i].onmouseout = function () {

            this.style.backgroundColor = ""; // 空表示恢复之前的颜色

        };

    }

</script>

</body>

</html>

1.7、通过 name 属性获取元素

<input type="button" value="按钮" id="btn"><br>

<input type="text" value="lvonve" name="nm1"><br>

<input type="text" value="lvonve" name="nm2"><br>

<input type="text" value="lvonve" name="nm1"><br>

<input type="text" value="lvonve" name="nm3"><br>

<input type="text" value="lvonve" name="nm1"><br>

<script src="common.js"></script>

<script>

    my$("btn").onclick = function () {

        var inputs = document.getElementsByName("nm1");

        for (var i = 0; i < inputs.length; i++) {

            inputs[i].value = "Daotin";

        }

    };

</script>

通过 name 属性获取元素适用于表单标签，基本标签没有 name 属性

基本标签：div,p,h1,ul,li,br等

表单标签：input, select,option,form,textarea,datalist,label等

1.8、根据类样式的名字获取元素

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .cls {

            background-color: yellow;

        }

    </style>

</head>

<body>

    <p class="cls">第一个p标签</p>

    <p>第二个p标签</p>

    <span class="cls">第一个span</span><br>

    <span>第二个span</span>

    <div>第一个div</div>

    <div class="cls">第二个div</div>

    <input type="button" value="按钮" id="btn">

    <script src="common.js"></script>

    <script>

        my$("btn").onclick = function () {

            var objs = document.getElementsByClassName("cls");

            for(var i=0; i<objs.length; i++) {

                objs[i].style.backgroundColor = "red";

            }

        };

    </script>

</body>

注意：getElementsByClassName 在IE8等低版本浏览器不支持。

2、获取元素的方式总结

1、根据 id 的属性的值获取元素，返回值是一个元素对象

document.getElementById("id属性的值");

2、根据标签名获取元素，返回值是包含多个元素对象的伪数组

document.getElementsByTagName("标签名字");

3、根据 name 属性的值获取元素，返回值是包含多个元素对象的伪数组

document.getElementsByName("name属性的值");

4、根据 class 类样式的名字获取元素，返回值是包含多个元素对象的伪数组

document.getElementsByClassName("class类样式的值");

5、根据 CSS 选择器获取元素，返回值是一个元素对象

document.querySelector("#id属性的值");

document.querySelector("标签的名字");

document.querySelector(".class类样式的值");

6、根据 CSS 选择器获取元素，返回值是包含多个元素对象的伪数组

document.querySelectorAll("#id属性的值");

document.querySelectorAll("标签的名字");

document.querySelectorAll(".class类样式的值");

注意区分是名字还是值。

3、案例：模拟搜索框

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        input {

            color: gray;

        }

    </style>

</head>

<body>

    <input type="text" value="请输入搜索内容">

    <script src="common.js"></script>

    <script>

        // 获取文本框对象

        var inputObj = document.getElementsByTagName("input")[0];

        // 为文本框注册获取焦点事件

        inputObj.onfocus = function () {

            if(this.value === "请输入搜索内容") {

                this.value = "";

                this.style.color = "#000";

            }

        };

        // 为文本框注册失去焦点事件

        inputObj.onblur = function () {

            if(this.value.length === 0) {

                this.value = "请输入搜索内容";

                this.style.color = "gray";

            }

        };

    </script>

</body>

文本框注册失去焦点事件的时候使用 this.value.length === 0，而不使用 this.value === "请输入搜索内容" 是因为数字的比较比字符串的比较效率更高。

从零开始学 Web 之 DOM（二）对样式的操作，获取元素的方式的更多相关文章

从零开始学 Web 之 DOM（一）DOM的概念，对标签操作
大家好,这里是「 Daotin的梦呓」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性
大家好,这里是「 Daotin的梦呓」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
从零开始学 Web 之 DOM（五）元素的创建
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... +-------------------------------------------------------- ...
从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... +-------------------------------------------------------- ...
从零开始学 Web 之 DOM（七）事件冒泡
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... +-------------------------------------------------------- ...
从零开始学 Web 之 DOM（四）节点
大家好,这里是「 Daotin的梦呓」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
selenium3 web自动化测试框架二：页面基础操作、元素定位方法封装、页面操作方法封装
学习目的: 掌握自动化框架中需要的一些基础web操作正式步骤: 使用title_contains检查页面是否正确 # -*- coding:utf-8 -*- import time from se ...
从零开始学 Web 系列教程
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:http:/ ...
从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...

随机推荐

《C#从现象到本质》读书笔记（九）第11章C#的数据结构
<C#从现象到本质>读书笔记(九)第11章C#的数据结构 C#中的数据结构可以分为两类:非泛型数据结构和泛型数据结构. 通常迭代器接口需要实现的方法有:1)hasNext,是否还有下一个元 ...
nginx图解
1.Http代理,反向代理:作为web服务器最常用的功能之一,尤其是反向代理. 这里我给来2张图,对正向代理与反响代理做个诠释,具体细节,大家可以翻阅下资料. Nginx在做反向代理时,提供性能稳定, ...
CentOS查找目录或文件
查找目录:find /(查找范围) -name '查找关键字' -type d查找文件:find /(查找范围) -name 查找关键字 -print 如果需要更进一步的了解,可以参看Linux的命令 ...
20175316 盛茂淞 2018-2019-2 《Java程序设计》实验一 Java开发环境的熟悉实验报告
20175316 盛茂淞 2018-2019-2 <Java程序设计>实验一 Java开发环境的熟悉实验报告一.实验要求 1.使用JDK编译.运行简单的Java程序: 2.使用IDEA ...
Python12/25--前端之BOM/DOM
一.DOM 1. 什么是DOM 文档对象模型 Document Object Model 文档对象模型是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可扩展标 ...
第一周Access课总结
一.问:这节课学到了什么知识? 答:这周课程迎来新的学习领域,作为初次学Access有了一定的了解,Access是office办公软件中的一个极为重要的组成部分,它可以对大量的数据进行存储,查找,统计 ...
ESP32作为接入点AP
作为接入点的第一个任务是使用esp_wifi_set_mode()函数设置ESP32 函数并传递请求,作为接入点,可以把ESP32设置为AP或者APSTA,即 esp_wifi_set_mode(WI ...
hdu 4027 Can you answer these queries？[线段树]
题目题意: 输入一个 :n .(1<=n<<100000) 输入n个数 (num<2^63) 输入一个m :代表m个操作 (1<=m<<100 ...
WCF学习笔记一之通过配置web.config可以通过http访问接口
一.准备这里涉及到三个文件,现在只是简单的把代码贴出来,后面再详细的讲一下. 三个文件分别是(都是wcf服务应用程序项目下的): 1.IService1.cs 2.Service1.svc 3.We ...
【算法】实现字典API：有序数组和无序链表
参考资料 <算法(java)> — — Robert Sedgewick, Kevin Wayne <数据结构> ...