PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 访问器属性、闭包概念以及常用的DOM选择器

访问器属性、闭包概念以及常用的DOM选择器

再见羊肉串儿
再见羊肉串儿 原创
2021年07月30日 18:45:45 579浏览

访问器属性

  1. <script>
  2. // 访问器属性
  3. // 1读属性
  4. // 2写属性
  5. let staff = {
  6. data: { id: 1, name: "heihei", age: 18 },
  7. get age() {
  8. return this.data.age;
  9. },
  10. set age(a) {
  11. if (a >= 18 && a < 60) {
  12. return (this.data.age = a);
  13. }
  14. console.log("年龄不规范");
  15. },
  16. };
  17. console.log(staff.age);
  18. staff.age = 30;
  19. console.log(staff.age);
  20. console.log(staff.data.age);
  21. // 如果只是staff.age走的就是get方法,
  22. // 但是如果是staff.age=*,走的就是set方法
  23. </script>

闭包

  1. <script>
  2. function parent() {
  3. let m = 500;
  4. return function (a) {
  5. let b = 2;
  6. console.log(a, b, m);
  7. };
  8. }
  9. let f = parent();
  10. f(1);
  11. // 调用f(1)之后的结果是1,2,500
  12. // 理论上m是parent作用域的,但是竟然被调用了
  13. // parent()调用结束后,m理应被释放,结果却没有
  14. // 当父函数被调用后,如果父函数的成员被子函数引用,则这个成员不会被释放
  15. //这也就是闭包消耗内存的原因
  16. // 闭包:就是一个访问“自由变量”的函数
  17. </script>

DOM 选择器

1.document.querySelectorAll(“ul > li”):返回满足条件的元素集合,括号里面支持 css 写法,返回的是一个类数组;
2.document.querySelector(“#id”):返回的就是满足条件的第一个元素;
3.document.body:获取 body;
4.document.head:获取头部;
5.document.title:获取标题;
6.document.forms;获取 html 中的所有表单
document.forms.name 获取 html 中名字为 name 的表单 name 可以用 id

let ul = document.querySelector(“.list”);
7.ul.childNodes:查看 ul 中的所有子节点(不区分节点类型)甚至包括换行空格
8.ul.children:返回元素类型的节点
9.ul.lastElementChild:获取 ul 中的最后一个子元素
10.ul.firstElementChild:获取 ul 中第一个子元素
11.ul.firstElementChild.nextElementSibling:获取第一个元素的下一个兄弟元素
12.ul.lastElementChild.previousElementSibling:获取最后一个元素的上一个兄弟元素

  • 页面 CURL

    13.append:在父级元素最后追加一个子元素
    14.prepend:在父级元素最前追加一个子元素
    15.insertAdjacentElement(“插入位置”, 元素)
    插入位置有四个
    1.afterBegin:开始标签之后,第一个元素
    2.beforeBegin:开始标签之前,是他的前一个兄弟元素
    3.afterEnd:结束标签之后,他的下一个兄弟元素
    4.beforeEnd:结束标签之前,它的最后一个子元素

如果是自定义属性,该怎么获取:

  1. <input type="" id="user" data-email="12" />

一般情况下通过找到该元素获取 id 值通过上面的 2 方法:
document.querySelector(“input”).id;
但是获取自定义属性 data-email 就不能这么干
需要 document.querySelector(“input”).dataset.email;
注意这个自定义属性必须是 data-这种形式的;

class 操作

一般给元素添加 class 最初的方法是:
document.querySelector(“h2”).classsName = “red”; //red 为设定好的叫做 red 的类样式;但是这种方法已经被淘汰了;现在采用如下方式:
h2 = document.querySelector(“h2”);
h2.classList.add(“red”);


h2.style.fontSize 可以查看元素的内联元素样式;
但是如果不是内敛样式元素,浏览器自己的样式呢就需要其他方式:
styles = window.getComputedStyle(h2 , null);
这就获取了这个元素的所有样式,例如我们想看 height
styles.getPropertyValue(“height”);

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议