从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式
2018-06-14 18:53
696 查看
大家好,这里是「 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 之 HTML5(二)表单,多媒体新增内容,新增获取操作元素,自定义属性
- 从零开始学 Web 之 jQuery(二)获取和操作元素的属性
- 从零开始学 Web 之 jQuery(三)元素操作,链式编程,动画方法
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
- JavaScript-获取DOM元素的三种方式
- [乐意黎转载]从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
- Struts2中访问web元素的四种方式及前台jsp页面获取后台值的方式
- 从零开始学 Web 之 DOM(六)为元素绑定与解绑事件
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
- 从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件
- 从零开始学习jQuery (四) jQuery中操作元素的属性与样式
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
- jquery通过操作dom来获取第一个子元素
- JS获取dom元素计算样式大小
- struts2获取requestd session 等web元素的四种方式
- 04——javascript Dom 动态创建元素 操作样式
- 从零开始前端学习[53]:js中的获取元素的方式
- 获取iframe中的内容、查找获取指定元素(关于用c++调用WEBBROWSER控件,使用相关接口操作web页面元素的一些方法)
- JavaScript基础插曲—获取标签,插入元素,操作样式