700字范文 > JavaScript - WebAPI - 元素属性操作及注册事件

JavaScript - WebAPI - 元素属性操作及注册事件

时间：2019-01-16 19:31:58

01 - 获取页面元素

思考： css语言如何获取页面元素？通过选择器 id选择器 :#id名类选择器:.类名标签选择器:标签名子代选择器:ul>li后代选择器:ul lijs语言如何获取元素页面元素？也是通过选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>元素操作 - 多个</title></head><body><ul><li>🎃1</li><li>🎃2</li><li>🎃3</li><li>🎃4</li><li>🎃5</li><li>🎃6</li><li>🎃7</li><li>🎃8</li><li>🎃9</li><li>🎃10</li></ul></body><script>// 获取多个:document.querySelectAll('选择器') 获取多个let lis = document.querySelectorAll("ul li");console.log(lis);// document.querySelectAll('选择器') 拿到的一定是一个数组 :NodeList对象// 伪数组:拿到之后只有一个作用 : 遍历lis.forEach(function (li, index) {console.log(li, index);});// 如果获取不到,一定是伪数组:空数组const divs = document.querySelectorAll("div");console.log(divs);// 总结// 获取元素: 主要使用 document.querySelector('选择器') 获取一个// 批量获取: document.querySelectorAll('选择器')// 区别: querySelector() 永远是第一个, querySelectorAll()是所有// querySelector()拿不到是null, querySelectorAll()永远是数组// querySelector()拿到的是元素,可以直接用; querySelectorAll()拿到的是数组: 必须遍历</script></html>

02 - 操作元素属性

1.1- 元素属性操作

1.语法：元素.属性名(其实就是对象的取值赋值语法)

设置元素属性的值:元素.属性名 = 属性值

2.特点：

1.class在js中是一个关键字，如果要拿到类名需要使用className

2.只能获取到行内样式的属性值，无法得到行外(内联/外联)样式的属性值

3.一定是一个字符串，例如：div.style.height得到150px 得到的是一个带单位的字符串

4.如果css样式的属性有-

例如background-color,margin-top,使用js获取和设置这些属性的时候需要使用驼峰命名(因为-符号不符合js的命名规范)

例如:div.style.backgroundColor

3.注意点：修改类名需要注意会覆盖掉原本的类样式，所以一般我们不会直接修改类名，而是在原先类名的基础上加一个类，这里需要注意多个类名之间的空格

例如：div.className += " two";//字符串拼接添加类型，注意多个类名之间的空格

1.2-普通元素常用属性

翠花:" 上代码 ! "

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>属性操作 - 基本属性</title></head><body><div class="box" id="box">我是你大爷</div><a href="">百度</a><img class="a b c" src="./images/01.gif" alt="" /></body><script>// 选择器使用规则: id > 类 > 标签// 操作元素:先拿到元素const div = document.querySelector("#box");// console.log(div);const a = document.querySelector("a");const img = document.querySelector("img");// ✅ 1.id操作(一般不用)console.log(box.id, box["id"]); // 获取// box.id = xiaomage; //修改:不影响前面的代码console.log(div);// ✅ 2.类:class,js中class是一个关键字(有特殊使用),所以js修改了属性名字:通过 className 操作console.log(box.class); // undefinedconsole.log(box.className); // box// div.className = 'current' //修改类名,样式会被重新渲染// 添加类:元素.className +='类名' , // 为了不结合其他类名,应该在前面添加一个空格,与前面的类隔开div.className += " current";// 实际开发不推荐使用className:涉及到多个类的时候,很麻烦// img.className = "a c"; //肉眼编程// 💥 实际开发:使用classList(使用非常多)console.log(img.classList);// classList 是一个对象:提供了两个API// add(类名):添加类名// remove(类名):删除类名// 删除操作:元素.classList.remove(类名)img.classList.remove("b");// 添加操作:元素.classList.add(类名)img.classList.add("current");// ✅ 3.双标签之间的文本操作:innerTextconsole.log(div.innerText);div.innerText = "我不是你大爷";// 拼接:+=div.innerText += ",你大爷还是你大爷😏";// 单标签:无效console.log(img.innerText);img.innerText = "滚";// ✅ 4.href属性console.log(a.href);a.href = "";// ✅ 5.src属性console.log(img.src); // 拿到的是完整路径(会自动拼接)img.src = "images/02.png";img.id = "xiaoma"; 总结// 基本属性: 可以增\改\查, 实际开始主要是: 查和改// 基本属性的操作: 元素.属性名获取元素.属性名 = 值 (修改||新增)// 类操作: 属性名为className, 单一类名操作很好; 多个就很麻烦// 多个类: 建议使用元素.classList.add() || remove()</script></html>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>属性操作 - 样式属性</title><style>.box {width: 200px;background-color: rgb(12, 232, 248);}</style></head><body><div class="box">你不要过来啊~</div></body><script>// 样式属性:实际开发中使用最多(具体样式和类名)// 1.获取元素const box = document.querySelector(".box");// 2.样式获取:style属性console.log(box.style); // 拿到的是所有的标准样式. 🔔但是:只有行内的值可以拿到// 3.获取具体样式:元素.style.具体样式. 具体样式是小驼峰console.log(box.style.height); // 空console.log(box.style.width); //空 : 只能获取行内样式,行外获取不到// 4.设置样式,修改样式: 元素.style.具体样式 = '值'box.style.height = "100px";</script></html>

1.3-表单元素常用属性

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>属性操作 - 表单属性</title></head><body>用户名:<input type="text" name="username" id="un" /><br />性别: <input type="radio" name="gender" id="male" />男 <input type="radio" name="gender" id="female" />女<br />爱好: <input type="checkbox" name="hobby" checked />篮球 <input type="checkbox" name="hobby" />足球 <input type="checkbox" name="hobby" />羽毛球 <input type="checkbox" name="hobby" />乒乓球</body><script>//表单属性:value值 checked选中,disabled禁用const un = document.querySelector("#un");const male = document.querySelector("#male");const female = document.querySelector("#female");console.log(un, male, female);// 属性选择器 : [属性名 = 值]const hobby = document.querySelectorAll('[name="hobby"]');console.log(hobby);// ✅ 1.value:输入框的值(所有表单都有value值)console.log(un.value);un.value = "我被修改了";// ✅ 2. disabled: 控制是否可以被用户操作// true: 禁用// false: 可用console.log(male.disabled, female.disabled);male.disabled = true;// ✅ 3. checked: 选中console.log(male.checked);male.checked = true;female.checked = true;// ✅ 4. 让所有的爱好都被选中: hobby是一个数组, 所有的属性操作都是元素的, 数组是js的,里面包含的是元素: 必须要遍历取出元素, 然后给元素操作hobby.forEach(function (item) {console.log(item.checked);item.checked = true;});</script></html>

03 - 事件介绍及注册事件

1.事件：js处理用户交互的一种机制交互：什么元素在什么时刻做什么事 2.事件的三要素：组成事件的三要素事件源：什么元素（div p）事件类型：什么时刻（鼠标点击onclick 鼠标移入：onmouseover）事件处理函数：做什么事（一段代码：函数） 3.注册事件:本质是给元素属性赋值事件源.事件类型 = 事件处理函数box.onclick = function(){}4.事件工作原理a.事件在注册的时候，不会执行（函数在声明的时候不会执行）

b.一旦元素注册事件之后，当用户触发了这个事件的时候，浏览器会自动捕捉到这个事件，然后帮我们调用元素对象的事件处理函数

5.页面中任何元素都可以注册很多个事件(点击，移入等)

04-获取元素语法补充

重点掌握选择器获取,其他仅做了解

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="box">我是物业张三</div><input class="item" type="text" name="username" /><input class="item" type="radio" name="gender" />男 <input class="item" type="radio" name="gender" />女</body><script>// 1. id属性的值: 可以直接代表这个元素// 2. getElementById() : 通过Id值获取元素let box = document.getElementById("box");console.log(box);// 3. getElementsByTagName() : 通过标签名获取所有元素let input = document.getElementsByTagName("div");let input1 = document.getElementsByTagName("div")[0];console.log(input, input1);// 4. getElementsByClassName() : 通过类名获取元素(多个)let in1 = document.getElementsByClassName("item");let in2 = document.getElementsByClassName("item")[0];let in3 = document.getElementsByClassName("item")[1];let in4 = document.getElementsByClassName("item")[2];console.log(in1);console.log(in2, in3, in4);// 5. getElementsByName() : 通过name属性的值获取表单元素(多个)let name = document.getElementsByName("gender");let name1 = document.getElementsByName("gender")[0];let name2 = document.getElementsByName("gender")[1];console.log(name);console.log(name1, name2);</script></html>

1.1-innerText与innerHTML

作用完全不同（只是有些类似）类似点：获取到的都是string类型字符串innerText:获取元素文本innerHTML:获取元素内容（文本+标签）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>获取元素补充 - innerText 和 innerHTML 的区别</title></head><body><div class="box"><a href="#">小区保安</a>业主小丹</div></body><script>// innerText:双标签文本(文字)// innerHTML:双标签内容(所有)const box = document.querySelector(".box");// 获取console.log(box.innerText); // 拿到所有文字:不论子代还是后代console.log(box.innerHTML); // 拿到所有内容// 赋值:innerText全是文本,innerHTML会解析html结构let str = `<span>张三</span>`;box.innerText = str; // 当成文本输出box.innerHTML = str; // span当成标签解析了console.log(box.innerText);console.log(box.innerHTML);// 总结// 如何选择? 纯文本,两个都可以; 带标签,一定是innerHTML(innerText效率高)// 从今以后: document.write()再也不要使用: innerHTML可以完全代替,而且更好</script></html>

05-attribute语法学习

1.1-attribute操作自定义属性语法

标签元素属性: （1）行内标准属性：input.id（针对行内）（2）行内自定义属性：开发追加的，html自己不能使用（3）js动态添加属性：可以是行内属性（系统自带的），或者自定义属性（4）行外属性 1.attribute方式 1.获取属性：元素.getAttribute ( “id” ) ==== 行内属性（元素.id）如果是类型直接使用class，无需使用className，因为这种方式用的是字符串语法获取属性 2.设置属性：元素.setAttribute(‘属性名’,属性值); ==== 元素.id = 值3.删除属性：元素.removeAttribute(‘属性名’); ==== delete 元素.id用attribute方式设置的属性只能使用attribute方式来获取2.注意点 js点语法能获取到的属性：（1）行内标准属性（2）js点语法动态添加的自定义属性不能获取到的属性：（1）行内自定义属性(2)行外属性 getAttribute能获取到的属性：（1）行内标准属性（2）行内自定义属性（3）setAttribute动态添加的属性不能获取到的属性：（1）js点语法动态添加的自定义属性（2）行外属性3.总结：js点语法操作属性与attribute语法操作属性场景(语义不同)标准属性操作：使用js点语法（代码简洁）自定义属性操作：用attribute（易读性更高）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>属性补充 attribute系列 - 自定义属性.html</title><style>.box {width: 200px;height: 200px;background-color: #6cf;}</style></head><body><div class="box" data-index="1">我是一名保安</div></body><script>// 非标准属性特点:标准语法无法操作元素.属性名无效const box = document.querySelector(".box");// 标准属性:点语法类名classNameconsole.log(box.className);// 非标准属性 : 不行// console.log(box.data-index); // 语法错误: - 当成建好,index当成变量console.log(box["data-index"]); // undefined : 找不到这个属性// 解决方案: attributes系列// 1. 获取属性值: getAttribute('名字')// 2. 设置属性值: setAttribute('名字','值')// 3. 删除属性: removeAttribute('名字')// 获取console.log(box.getAttribute("data-index")); // 1// 设置box.setAttribute("data-index-color", "green"); // 成功:页面可见// 删除box.removeAttribute("data-index"); // 成功,页面可见// 拓展一下:attributes系列是用来操作非标准自定义属性的,但是这个可以操作任意属性console.log(box.getAttribute("class")); // 走路去北京(性能很低)// 标准的操作(点语法) 比非标准操作(attributes系列) 性能高而且稳定// 非标准属性 : 用来存储数据的</script></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。