好好学习，天天向上

本章主要内容是：非表单元素的属性和一些案例、获取标签内部内容的属性、表单元素属性和一些案例、自定义属性操作、style 样式属性操作

一、非表单元素的属性

  • 例如：href、title、id、src 等
  • 调用方式：元素对象打点调用属性名，例如 obj.href
  • 注意：部分的属性名跟关键字和保留字冲突，会更换写法
    • class → className
    • for → htmlFor
    • rowspan → rowSpan
  • 属性赋值：给元素属性赋值,等号右侧的赋值都是字符串格式
<body><a href="http://www.lagou.com" title="跳转到拉钩招聘" id="link"> 跳转 </a><img src="data:images/a.jpg" alt="图片" class="pic" id="pic"><script>// 获取元素var link = document.getElementById("link");var pic = document.getElementById("pic");// 调用元素对象的属性，从而操作 html 中标签的属性console.log(link.href);console.log(link.title);console.log(link.id);console.log(pic.src);console.log(pic.alt);console.log(pic.className);// 等号赋值，值必须是字符串类型pic.src = "images/b.jpg";</script>
</body>

案例：

1、点击按钮切换图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>点击按钮切换图片</title>
</head>
<body><input type="button" value="点击" id="btn"> <br><img src="data:images/a.jpg" id="pic"><script>// 获取元素var btn = document.getElementById("btn");var pic = document.getElementById("pic");// 通过一个变量作为判断条件，变量值为 1 加载的是 a 图片，2 为 b 图片var num = 1;// 给按钮添加点击事件btn.onclick = function (){// 给图片换 src 的属性值// 通过 if 语句判断，如果是 a 图片就换乘 b 图片，反之换乘 a 图片if (num === 1){pic.src = "images/b.jpg";// 数字要对应发生变化num = 2;} else {pic.src = "images/a.jpg";num = 1;}};</script>
</body>
</html>

2、点击按钮显示隐藏 div

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>点击按钮显示隐藏元素</title><style>div {width: 200px;height: 200px;background-color: skyblue;}.hide {display: none;}.show {display: block;}</style>
</head>
<body><input type="button" value="点击隐藏" id="btn"><div id="box"></div><script>// 获取元素var btn = document.getElementById("btn");var box = document.getElementById("box");// 点击按钮，让 div 显示或隐藏// box.style.display = "none";// btn.onclick = function (){//     // 元素 div 当前是显示的，需要让它隐藏//     // 判断，根据按钮的 value 进行条件判断//     if (btn.value === "点击隐藏"){//         box.className = "hide";//         btn.value = "点击显示";//     } else {//         box.className = "show";//         btn.value = "点击隐藏";//     }// };// 在事件函数内部有一个 this，指向事件源/*区分一下不同函数内部的 this 指向普通函数 --> window 对象构造函数 --> 指向的是生成的实例对象对象的方法 --> 指向的是对象本身事件函数 --> 指向的是事件源*/btn.onclick = function (){// 元素 div 当前是显示的，需要让它隐藏// 判断，根据按钮的 value 进行条件判断if (this.value === "点击隐藏"){box.className = "hide";this.value = "点击显示";} else {box.className = "show";this.value = "点击隐藏";}};</script>
</body>
</html>

3、相册

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相册</title><style>body {font-family: "Helvetica", "Arial", serif; color: #333; background-color: #ccc;margin: 1em 10%;}h1 {color: #333;background-color: transparent;}a {color: #c60;background-color: transparent;font-weight: bold;text-decoration: none;}ul { padding: 0;}li {float: left;padding: 1em;list-style: none;}#imagegallery {}#imagegallery a {margin: 0px 20px 20px 0px;padding: 0px;display: inline;}#imagegallery a img {border: 0;}</style>
</head>
<body><div id="imagegallery"><a href="images/1.jpg" title="第1张图片"><img src="data:images/1-small.jpg" width="100px" alt="图片1"></a><a href="images/2.jpg" title="第2张图片"><img src="data:images/2-small.jpg" width="100px" alt="图片2"></a><a href="images/3.jpg" title="第3张图片"><img src="data:images/3-small.jpg" width="100px" alt="图片3"></a><a href="images/4.jpg" title="第4张图片"><img src="data:images/4-small.jpg" width="100px" alt="图片4"></a></div><div style="clear:both"></div><img id="image" src="data:images/placeholder.png" alt="" width="450px" /><p id="des">选择一个图片</p><script>// 1、获取元素var imagegallery = document.getElementById("imagegallery");var links = imagegallery.getElementsByTagName("a");var image = document.getElementById("image");var des = document.getElementById("des");// 2、遍历数组.添加点击事件for (var i = 0; i < links.length; i++){links[i].onclick = function (){// alert("aaa");// 3、更改 image 内部的 src 属性值// this 关键字指代的是触发事件的真正事件源image.src = this.href;// 4、更改 des 内部的文字内容des.innerText = this.title;// 取消 a 标签的默认跳转效果return false;}}// for 循环内部添加的绑定事件，在触发时，所有的批量添加的事件已经成功，触发事件时都是在循环结束之后// 批量绑定的事件的事件函数内部如果有变量 i，要注意，函数执行时已经是在循环结束后// 循环内部定义的变量是一个全局变量，在循环后执行的 I  变量值是 i 跳出循环时的值// image.src = links[i].href;// console.log(i); // 4 </script></body>
</html>

二、获取标签内部内容的属性

  • 获取标签内部内容的属性有两个：innerHTML 和 innerText
  • innerHTML属性，在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取的内容包括空白换行等
  • innerText属性，在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，获取的 内容会去掉换行和缩进等空白

更改标签内容

  • 可以通过两个属性给双标签内部去更改内容：

    • innerHTML 设置属性值，有标签的字符串，会按照 HTML 语法中的标签加载
    • innerText 设置属性值，有标签的字符串，会按照普通的字符加载
  • 对比使用场景
    • innerText：在设置纯字符串时使用
    • innerHTML：在设置有内部子标签结构时使用
<body><div id="box">这是一个 div 标签<span> 这是一个 span 标签 </span></div><script>var box = document.getElementById("box");// 打印 box 对象console.dir(box);// 调用标签内部内容console.log(box.innerHTML);console.log(box.innerText);// 设置标签内部的内容// box.innerHTML = "<h1> haha </h1>"; box.innerText = "<h1> haha </h1>";</script>
</body>

三 、表单元素属性

  • value 用于大部分表单元素的内容获取 (option除外)
  • type 可以获取input标签的类型 (输入框或复选框等)
  • disabled 禁用属性
  • checked 复选框选中属性
  • selected 下拉菜单选中属性
  • 注意：在 DOM 中元素对象的属性值只有一个时，会被转成布尔值显示
    • 例如：txt.disabled = true;
<body><input type="button" value="按钮" id="btn"> <br><input type="text" id="txt" disabled="disabled"><select id="list"><option value="bj">北京</option><option value="sh">上海</option></select><script>// 获取元素var btn = document.getElementById("btn");var txt = document.getElementById("txt");var list = document.getElementById("list");var opts = list.getElementsByTagName("option");   // valueconsole.log(btn.value);console.log(txt.value);console.log(opts[0].value);console.log(opts[0].innerHTML);// 更改 input 标签的 valuebtn.value = "点击";txt.value = "请输入内容";// 表单元素特有的一些属性，属性名和属性值时一致的console.log(txt.disabled);btn.disabled = true;</script>
</body>

案例

1、检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框

<body><input type="text" id="name"><input type="text" id="pw"><input type="button" id="btn" value="提交"><script>// 1、获取元素var btn = document.getElementById("btn");var username = document.getElementById("name");var pw = document.getElementById("pw");// 2、添加点击事件btn.onclick = function (){// 用户名的位数是否在 3-6 位，不满足需要高亮显示if (username.value.length < 3 || username.value.length > 6){username.className = "bg";return;} else {username.className = "";}// 密码是否在 6-8 位if (pw.value.length < 6 || pw.value.length > 8){pw.className = "bg";return;} else {pw.className = "";}// 模拟提交数据console.log("提交数据");};</script>
</body>

2、随机设置下拉框中的选中项

<body><input type="button" value="选择" id="btn"><br><select id="food"><option>烧烤</option><option>火锅</option><option>小龙虾</option></select><script>// 1、获取元素var btn = document.getElementById("btn");var food = document.getElementById("food");var opts = food.getElementsByTagName("option");// 2、给按钮添加点击事件btn.onclick = function (){// 3、随机选择一个 option// 每次点击需要获取一个 opts 数组的随机下标// Math.random()  [0,1)// Math.random()*3  [0,3)var n = Math.floor(Math.random() * opts.length);// 设置对应的随即项的属性opts[n].selected = true;};</script>
</body>

3、搜索文本框

<style>.gray {color: gray;}.black {color: black;}
</style><body><input type="text" class="gray" value="请输入搜索关键字" id="txtSearch"><input type="button" value="搜索" id="btnSearch"><script>// 获取元素var txtSearch = document.getElementById("txtSearch");var btnSearch = document.getElementById("btnSearch");// 1、获取焦点时，可以使用一个 onfocus，如果文本框内容是默认，清空文字，让文字加载黑色txtSearch.onfocus = function (){// 判断是否时默认的提示文字if (this.value === "请输入搜索关键字"){this.value = "";this.className = "black";}};// 2、失去焦点时，可以使用一个 onblur,如果文本框为空，需要更改为默认提示内容，让文字加载灰色txtSearch.onblur = function (){// 如果用户输入的内容是默认文本相同，失去焦点时，也让文字变为灰色// 判断内容是否为空    if (this.value === "" || this.value === "请输入搜索关键字"){this.value = "请输入搜索关键字";this.className = "gray";}};</script>
</body>

4、全选反选

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0; width: 300px;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td { font: 14px "微软雅黑";}tbody tr { background-color: #f0f0f0; }tbody tr:hover {cursor: pointer;background-color: #fafafa;}</style></head>
<body><div class="wrap"><table><thead><tr><th><input type="checkbox" id="all" /></th><th>商品</th><th>价钱</th></tr></thead><tbody id="tb"><tr><td><input type="checkbox" /></td><td>iPhone8</td><td>8000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Pro</td><td>5000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Air</td><td>2000</td></tr><tr><td><input type="checkbox" /></td><td>Apple Watch</td><td>2000</td></tr></tbody></table><input type="button" value="  反 选  " id="btn"></div><script>// 获取元素var all = document.getElementById("all");var tb = document.getElementById("tb");var btn = document.getElementById("btn");var tb_inputs = tb.getElementsByTagName("input");// 1、全选：让子选项的选择效果始终与全选保持一致all.onclick = function (){// 遍历所有的子选项for (var i = 0; i < tb_inputs.length; i++){// 每一个子选项的 checked 属性值与全选保持一直tb_inputs[i].checked = all.checked;}};// 2、单独选择子选项过程// 给每一次点击人格一个子选项进行判断for (var i = 0; i < tb_inputs.length; i++){tb_inputs[i].onclick = function (){// 判断所有的子选项是否都是选中的状态，如果斗选中，让全选选中，如果没有，取消全选allChecked();};}// 3、反选btn.onclick = function (){// 让所有子选项与之前的状态相反for (var i = 0; i < tb_inputs.length; i++){// 让属性值去原来相反的值tb_inputs[i].checked = !tb_inputs[i].checked;}// 控制全选效果，也需要进行取反allChecked();}// 定义一个 all 是否被选中的函数function allChecked (){// 使用一个中间过渡变量，初始认为所有的子选项都是被选中的var isAllCheaked = true;// 遍历所有的子选项，进行判断for (var j = 0; j < tb_inputs.length; j++){// 一旦有一个没有被选择，让变量变为 falseif (tb_inputs[j].checked === false){isAllCheaked = false;break;}}// 如果循环内部条件一直不成立，说明子选项都是被选中的 isAllCheaked 的值没有发生变化// 给 all 元素设置 checked 属性all.checked = isAllCheaked;}</script>
</body>
</html>

四、自定义属性操作

  • getAttribute(name) 获取标签行内属性
  • setAttribute(name，value) 设置标签行内属性
  • removeAttribute(name) 移除标签行内属性
  • 与element.属性的区别: 上述三个方法用于获取任意的行内属性，包括自定义的属性
<body><div id="box" age="18" sex="male">小明</div><script>// 获取元素var box = document.getElementById("box");// 元素自有属性console.log(box.id);// console.log(box.age); // undefined// 元素自定义的新属性不能用点语法直接调用// 可以调用元素对象的获取自定义属性的方法console.log(box.getAttribute("age"));// 也可以调用自有的属性console.log(box.getAttribute("id"));// 设置属性,添加新的自定义属性或者自有属性box.setAttribute("age", "20");box.setAttribute("city", "BeiJing");box.setAttribute("class", "demo");// 移除属性box.removeAttribute("age");box.removeAttribute("class");</script>
</body>

五、style 样式属性操作

  • 使用 style 属性方式设置的样式显示在标签行内
  • element.style 属性的值，是所有行内样式组成的一个样式对象
  • 样式对象可以继续点语法调用或更改 css 的行内样式属性，例如 width、height 等属性
  • 注意1：类似 background-color 这种复合属性的单一属性写法，是由多个单词组成的，要 修改为驼峰命名方式书写 backgroundColor
  • 注意2：通过样式属性设置宽高、位置的属性类型是字符串，需要加上 px 等单位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bg {background-color: skyblue;}</style>
</head>
<body><input type="button" value="按钮" id="btn"><div id="box" style="width: 100px;" class="bg"> 文字 </div><script>// 获取元素// 定义一个获取元素的函数function my$ (id){return document.getElementById(id);}var btn = my$("btn");var box = my$("box");// 1、更改类名的方式去更改样式// 2、根据对象的 style 属性去操作样式console.log(btn.style);// 元素对象的 style 属性的值是一个行内样式组成对象，对象内部封装了所有的行内的样式属性及属性值// 元素的样式属性对象可以继续大点调用，获取或设置相关的相关样式属性console.log(box.style);console.log(box.style.width);console.log(box.style.backgroundColor);box.style.width = "200px";</script>
</body>
</html>

六、className 类名属性操作

  • 修改元素的 className 属性相当于直接修改标签的类名
  • 如果需要修改多条 css 样式，可以提前将修改后的样式设置到一个类选择器中，后续通过 修改类名的方式，批量修改 css 样式

获取点击按钮的元素_Web API - DOM元素属性操作相关推荐

  1. 点击按钮返回数组 ages 中所有元素都大于输入框指定数值的元素和 $set()

    返回数组 ages 中所有元素都大于输入框指定数值的元素: <body><p>点击按钮返回数组 ages 中所有元素都大于输入框指定数值的元素.</p> <p ...

  2. 点击按钮创建一个表格 点击按钮创建一个表格 权限选择 元素的value属性操作

    点击按钮创建一个表格 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

  3. jQuery—常用API（jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作）

    1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href,比如 <input> ...

  4. html网页获取点击按钮获取当前时间

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 点击文字弹出一个DIV层窗口代码 【或FORM表单 并且获取点击按钮的ID值】

    点击不同按钮咨询不同的 专家 <?php for($i=1;$i<5;$i++){$uid=$i; //用户ID ?> <a class="a_click" ...

  6. python 获取点击按钮名称_python如何获取tkinter组件的名称？比如按下多个Button中的一个，返回这个被按下的Button的text？...

    import tkinter as tk window = tk.Tk() window.title('计算器') window.geometry('360x435') window.attribut ...

  7. 谷歌地图获取点击时候的具体经纬度api

    map.addListener('click', function(e) {console.log(e.latLng.lat(),e.latLng.lng());}); // 注意如果直接打印e.la ...

  8. jquery获取点击按钮的id

    $("button[id^='btn_']").click(function (e) {     var btnId = $(e.target).attr('id'); });

  9. html dom取父节点jq,querySelector获得兄弟DOM元素 父级DOM元素 子级DOM元素

    一.js定位兄弟,父级,子级元素 所有DOM方法var el = document.getElementById('xxx');var el = document.getElementByName(' ...

  10. vue点击按钮切换显示不同内容_邂逅Vue

    01 什么是Vue.js Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架. 看到这里,你就会问了,什么是渐进式? 渐进式就是你可以将Vue作为一个项目中的部分组件改 ...

最新文章

  1. 【Scratch】青少年蓝桥杯_每日一题_4.19_考试成绩
  2. WEB接口测试之Jmeter接口测试自动化 （四）（持续构建）
  3. keil编译器如何生成二进制bin文件
  4. 【历史上的今天】8 月 17 日：Oracle 创始人出生；第一个 COBOL 程序成功跑通！...
  5. pycharm的terminal无法识别到命令 pytest 不是内部或外部命令，也不是可运行的程序 或批处理文件。
  6. 推荐系统：参数协同过滤
  7. 笔记：Html.Partial和Html.Action
  8. UNIX环境高级编程学习之路
  9. python xps_python处理xps文件_从XPS文档中提取文本
  10. Linux丢包故障的解决与思路
  11. 【五校联考3day2】C
  12. element上传多个视频/多个图片与限制数量
  13. 达索Catia许可证优化管理方案
  14. 算法提高 盾神与砝码称重
  15. 关于彭先生和我的未来呀~
  16. 执行python除法的符号_python 除法
  17. 创业与投资 - 别沉浸于 to vc
  18. 企业短视频团队运营策划工作SOP方案计划表
  19. 订阅切换按钮（subscribe toggle button）
  20. 更改安卓系统开机画面

热门文章

  1. 云原生时代，分布式系统设计必备知识图谱（内含22个知识点）
  2. php原始 实现双向队列,用PHP实现一个双向队列
  3. 【三维路径规划】基于matlab麻雀算法求解无人机三维路径规划问题【含Matlab源码 212期】
  4. 【图像聚类】基于matlab GUI K-means算法图像聚类【含Matlab源码 1787期】
  5. 【TSP】基于matlab GUI改进的遗传算法求解旅行商问题【含Matlab源码 926期】
  6. 动态瑜伽 静态瑜伽 初学者_使用计算机视觉对瑜伽姿势进行评分
  7. 随笔记----关于python 和C++ 里面的与或问题
  8. crate和mysql结合利用_create和grant配合使用，对Mysql进行创建用户和对用户授权
  9. swagger2 配置访问路径_有了Swagger2 再也不用担心API文档的维护了
  10. 南信大考研真题c语言_考研经验分享---南京信息工程大学计算机考研