2021年8月12日学习笔记

1.DOM

事件基础文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,既有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作

2.获取元素的方式

        1、根据id获取元素

  var div1 = document.getElementById("box1");

        2、通过类名获取元素

 var p1Arr = document.getElementsByClassName("p1");

   console.log(p1Arr instanceof Array);//false

  console.log(Array.isArray(p1Arr));//false

  console.log(p1Arr.length);

  console.log(p1Arr[0]);

  console.log(p1Arr[1]);

伪数组定义:

        1、拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解)
        2、不具有数组所具有的方法

伪数组,就是像数组一样有 length 属性,也有 012等属性的对象,看起来就像数组一样,但不是数组

常见的参数的参数 arguments,DOM 对象列表(比如通过 document.getElementsByTags 得到的列表)

        3.

/*  p1Arr.push(100);

   console.log(p1Arr); */

  /*  p1Arr.forEach(function (value, index) {

     console.log(value);

   }) */

        3、通过标签名获取元素

var tag1 = document.getElementsByTagName("div");

   console.log(tag1);

   console.log(tag1[0]);

        4、通过name名获取元素

 var userList = document.getElementsByName("user");

  console.log(userList);

  for (var i = 0; i < userList.length; i++) {

    console.log(userList[i]);

  }

       通过选择器的querySelector获取元素

querySlector():获取指定选择器的第一个元素,参数就是选择器的名称

  var div1 = document.querySelector(".box1");

  console.log(div1);

  var li1 = document.querySelector("ul>li");

  console.log(li1);

  var user_1 = document.querySelector("#user_1");

  console.log(user_1)

       通过选择器的querySelectorAll获取元素

querySelectorAll():获取指定选择器的所有的元素,参数就是选择器的名称

 var boxList = document.querySelectorAll(".box1");

  console.log(boxList);

  var listLi = document.querySelectorAll("ul li");

  console.log(listLi);

  1. 事件初识

事件:触发-响应机制

Event接口表示在DOM中发生的任何事件,一些是用户生成的(例如鼠标或键盘事件),而其他由API生成。

(1)、事件三要素

事件源:触发()事件的元素

事件类型:事件的触发方式(例如鼠标点击或键盘点击)

事件处理程序:事件触发后要执行的代码(函数形式)

(2)、事件的基本使用

鼠标单击事件:onclick    浏览器加载完成事件:onload

(3)、事件触发的多种写法

HTML内部书写所有

HTML行内触发方法

HTML外部书写

  1. 非表单元素的属性操作

hreftitleidsrcclassName width height等等

  1. 添加src属性值显示图片

imgBox.src = "images/jie.jpg";

  1. 改变图片大小

imgBox.width = 750;

    imgBox.height = 500;

  1. 通过style改变宽高

imgBox.style.width = 750 + "px";

imgBox.style.height = 500 + "px";

//通过样式属性设置宽高、位置的属性类型是字符串,需要加上px

凡是css中这个属性是多个单词的写法,js代码中DOM操作的时候.-干掉,后面的单词的首字母大写即可

  1. 通过类名改变宽度

  imgBox.className = "imgCl";

//className 会覆盖之前设置好的类名!

  1. 隐藏元素

1src=""

2display=none; 不占位置的

3visibility="hidden

  1. this的指向问题
      •  普通函数中,this指向window
      •   构造函数中,this指向实例化对象
      •   对象函数中,this指向当前的对象
      •  事件函数中,this指向事件源
  1. 表单元素属性操作

value 用于大部分表单元素的内容获取(option除外)

type 可以获取input标签的类型(输入框或复选框等)

disabled 禁用属性checked 复选框选中属性

selected 下拉菜单选中属性

checked

  1. InnerText

返回被选元素的文本内容

 var p1 = document.getElementById("p1");

  console.log(p1.innerText);

设置被选元素的文本内容

btn1.onclick = function () {

    // 设置文本

    p1.innerText = "文本改变了哈";

    console.log(p1.innerText);

  }

 

你可能感兴趣的:(2021年8月12日学习笔记)