大家好，这里是「 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（二）对样式的操作，获取元素的方式
原文地址：https://www.cnblogs.com/lvonve/p/9184513.html