前端第七天 DOM操作/属性操作与事件

1.webapi介绍

1. 、api的概念   

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。例如：alert()、 prompt()、log()、reverse()、getMonths()

任何开发语言都有自己的API

API的特征输入和输出(I/O)

API的使用方法(console.log())

1. 、webapi的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

我们可以通过API去操作DOM和BOM

此处的web API特指浏览器提供的API(一组方法)，web API在后面的课程中有其它含义

1. 、JavaScript的组成

 

2.DOM概念

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

DOM又称为文档树模型

 

文档：一个网页可以称为文档

节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

元素：网页中的标签

属性：标签(元素)的属性

3.模拟文档树结构

 

那么我们该如何去操作DOM呢？

1. 获取元素的方式

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 属性，也有 0、1、2、3 等属性的对象，看起来就像数组一样，但不是数组

常见的参数的参数 arguments，DOM 对象列表（比如通过 document.getElementsByTags 得到的列表）

/*  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]);

  }

1. 通过选择器的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)

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)、事件的基本使用

<script>

var box = document.getElementById('box');

box.onclick = function () {

console.log('代码会在box被点击后执行');

};

</script>

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

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

HTML内部书写所有

HTML行内触发方法

HTML外部书写

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

href、title、id、src、className 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. 隐藏元素

1、src=""

2、display=none; 不占位置的

3、visibility="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);

  }

案例扩展

1. 、隔行换色

案例一：完成对无序列表的隔行换色（原理~~~通过循环获取元素得到的伪数组进行取余逻辑判断操作）

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

var liObj = document.getElementById("list").getElementsByTagName("li");

console.log(liObj);

  btn.onclick = function () {

//第一种

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

      console.log(liObj[i]);

      /* if (i % 2 == 0) {

        liObj[i].style.color = "red";

      } */

      liObj[i].style.color = "red";

    }

    //第二种 

    /* for (var i = 0; i < liObj.length; i++) {

      console.log(liObj[i]);

      if (i % 2 == 0) {

        liObj[i].style.color = "red";

      }

    } */

  }

思考代码还有没有能优化的空间(是不是还可以使用三元表达式）

1. 、美女画廊

效果展示:

 

点击小图完成大图切换

思路：遍历伪数组，给四张小图绑定单击事件，让当前被单击的小图的src属性值赋给大图的src属性值，让小图的title的属性值，赋给下侧文本内容。

<script>

  /*

    步骤：

    1、页面的搭建

    2、获取元素

    3、遍历伪数组

    4、给四个小美女绑定单击事件

    5、把事件源的src属性值赋给大图的src属性值

    6、把事件源的title属性值赋给标题的innerText属性值

   */

  // 获取小图

  var smallPic = document.getElementById("smallPicObj").getElementsByTagName("img");

  // 获取大图

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

  // 获取文本

  var title = document.querySelector("#text");

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

    smallPic[i].onclick = function () {

      bigPic.src = this.src;

      title.innerText = this.title;

    }

  }

</script>

2.阻止a链接跳转

三种写法

<!-- 第一种方法 -->

  <a href="https://www.baidu.com" onclick="alert('单击链接了！'); return false">百度一下</a>

  <a href="https://www.baidu.com" onclick="fn1(); return false">百度两下</a>

 function fn1() {

    alert("单击链接了哈");

  }

第一种缺点：代码不分离，不符合低耦合，高内聚的规范

<!-- 第二种方法 -->

  <a href="https://www.baidu.com" onclick="return fn2();">百度三下</a>

 function fn2() {

    alert("单击百度三了哈！");

    return false;

  }

第二种代码 缺点同上

  <!-- 第三种方法 -->

  <a href="https://www.baidu.com" id="link">百度四下</a>

  document.getElementById("link").onclick = function () {

    alert("单击百度四了哈！");

    return false;

  }

第三种  行为与结构分离 想想还有没有更加优化的空间？

3.新事件

(1)、鼠标事件

案例一：完成对无序列表的隔行换色（原理~~~通过循环获取元素得到的伪数组进行取余逻辑判断操作）

onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。

onmouseout 鼠标移出事件：在鼠标指针移出元素后触发

//鼠标移入事件

  box1.onmouseover = function () {

    this.style.fontSize = "26px";

    this.style.height = "60px";

    console.log(111)

  }

  // 鼠标移出事件

  box1.onmouseout = function () {

    this.innerText = "鼠标移出了哈！";

    this.style.height = "30px";

    this.style.fontSize = "16px";

  }

onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发。

onmouseleave 鼠标离开事件：在鼠标指针离开元素后触发

// 鼠标进入事件

  box2.onmouseenter = function () {

    this.style.borderRadius = "12px";

    this.style.backgroundColor = "blue";

  }

  //鼠标的离开事件

  box2.onmouseleave = function () {

    this.style.borderRadius = "0";

    this.style.backgroundColor = "purple";

  }

onfocus获取焦点事件：在鼠标光标获取输入框焦点时触发

onblur失去焦点事件：在鼠标光标失去焦点时触发。

 //获取焦点事件

  user.onfocus = function () {

    this.style.border = "3px solid red";

    this.style.outline = "0";

  }

  // 失去焦点事件

  user.onblur = function () {

    console.log(this.value);

  }

onclick单击事件：在鼠标指针单击时触发

ondblclick双击事件：在鼠标光标双击时触发。

box1.ondblclick = function () {

    this.style.backgroundColor = "yellow";

  }

(2)、键盘事件

onkeydown：键盘按下

onkeyup:键盘抬起  

 document.getElementById("user").onkeydown = function () {

    console.log("按下了！！1");

  }

  document.getElementById("user").onkeyup = function () {

    console.log("抬起来了！！1");

    console.log(this.value);

  }

(3)、浏览器事件

案例一：完成对无序列表的隔行换色（原理~~~通过循环获取元素得到的伪数组进行取余逻辑判断操作）

onload:浏览器加载完成执行

onscroll:滚动浏览器滚动条时触发

  window.onscroll = function () {

    console.log("滚动了！");

  }

1. 文本内容属性

(1)、innerText和textContent

设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持

设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持

(2)、innerText和innerHTML的区别

使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的

innerHTML是可以设置文本内容

innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的

想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML

1. 元素的属性操作

1. 、自定义属性

元素除了本身的属性之外可以设置自定义属性

<div id="box1" class="box_1" name1="divObj">我是盒子</div>

(2)、获取属性

getAttribute("属性的名字")

getAttribute("属性"):不仅可以获取元素本身的属性的属性值，还可以获取元素自定义的属性的属性值

 console.log(in1.getAttribute("type"));//text

  console.log(in1.getAttribute("name"));//user

  console.log(in1.getAttribute("id"));//text1

  console.log(in1.getAttribute("style"));//color: red;

(3)、设置属性

setAttribute("属性的名字","属性的值");

元素的属性的设置:不仅可以设置元素本身的属性，还可以设置元素自定义的属性

 setObj1.onclick = function () {

    in1.setAttribute("name", "password");

    // in1.setAttribute("class", "");

    in1.className = "";

    // in1.setAttribute("style", "border:5px dotted pink");

    in1.style.border = "5px dotted pink";

    console.log(in1.getAttribute("name"));//password

  }

1. 、移除属性

 removeAttribute("属性"):不仅可以移除元素本身的属性，还可以移除元素自定义的属性

  var removeObj = document.getElementById("remove");

  removeObj.onclick = function () {

    in1.removeAttribute("class");

    div1.removeAttribute("name1");

  }

1. 元素样式设置的几种方式

能用switch语句实现的就一定可以使用if实现，但是反之不一定，如果是区间范围就采用if，如果是等值判断使用switch

1. 对象.style
2.  对象.className
3. 对象.setAttribute("style")
4. 对象.setAttribute("class")
5. 对象.style.setProperty("CSS属性","CSS属性值")
6. 对象.style.cssText

<body>

  <div class="box1" id="box1"></div>

  <input type="button" value="改变样式" id="change">

</body>

<script>

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

  var changeBtn = document.getElementById("change");

  changeBtn.onclick = function () {

    // 1、对象.style

    // box.style.backgroundColor = "red";

    // 2、对象.className

    // box.className = "box2";

    // 3、对象.setAttribute("style")

    // box.setAttribute("style", "background-color:red");

    // 4、对象.setAttribute("class")

    // box.setAttribute("class", "box2");

    // 5、对象.style.setProperty("CSS属性","CSS属性值")

    // box.style.setProperty("background-color", "red");

    // 6、对象.style.cssText

    box.style.cssText = "background-color: red;height:80px";

  }

</script>