JS——DOM操作 - 技术栈

一、DOM简介

文档对象模型（Document Object Model ，简称DOM），它就是一些系列编程接口，有了这些接口，就可以改变页面内容，结构和样式

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中所有的标签都是元素，DOM中使用element表示

节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看作是对象

二、事件前言

事件：用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动，关闭窗口.....

方式一

标签中对应的属性(事件属性)中设置一些js代码，这样当事件被触发时，这些代码将会被执行

这种方式：结构与行为耦合，不方便维护，不推荐使用

css 复制代码

<button id="btn"  onclick="alert('哈喽');">我是一个按钮</button> //onclick点击事件，点击的时候触发

方式二

可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用

css 复制代码

<body>
    <button id="btn">我是一个按钮</button>
    <script>
      //第一步：获取按钮对象
      var btn=document.getElementById("btn");
      //第二步：绑定一个单击事件
      //像这种为单击事件绑定的函数，我们称为单击响应函数
      btn.onclick=function(){
          alert("你好")
      }
    </script>    
</body>

方式三
btn.addEventListener('事件名',事件回调）

css 复制代码

<button id="btn">按钮</button>
    <!-- js中，操控标签，前提是你要选中这个标签 -->
    <script>
        //获取按钮button元素 
        let btn = document.getElementById('btn')
//事件绑定3： btn.addEventListener('事件名',事件回调） 
        btn.addEventListener('click', fun)
        btn.addEventListener('click', fun1)

        function fun() {
            for (let i = 0; i < 1; i++) {
                alert('fun')
            }
        }
        function fun1() {
            for (let i = 0; i < 1; i++) {
                alert('fun1')
            }
        }
//·····

三、文档的加载

情况一：

将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码

css 复制代码

<button id="btn">点我一下</button>
  <script type="text/javascript">
    //获取id为btn的按钮
    var btn = document.getElementById("btn");
    //为按钮绑定一个单击响应函数
    btn.onclick = function () {
      alert("hello");
    };
  </script>

情况二：

onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

css 复制代码

window.onload = function () {
    //获取id为btn的按钮
    var btn = document.getElementById("btn");
    //为按钮绑定一个单击响应函数
    btn.onclick = function () {
      alert("hello");
    };
  };

四、DOM获取

1、getElementById()

通过id属性获取一个元素节点对象

补充1：innerHTML 通过这个属性可以获取到元素标签体的内容，获取标签、空白、内容

补充2：innerText通过这个属性可以获取到元素标签体的内容，只能获取文本

css 复制代码

let bj = document.getElementById("bj");
// 读取
console.log(bj.innerHTML);
console.log(bj.innerText);
// 修改
bj.innerHTML = "<h2>吃饭</h2>"; //识别标签
bj.innerText = "<h2>吃饭</h2>";//不识别标签，把标签当普通文本

2、getElementsByTagName()

可以根据标签名来获取一组元素节点对象，这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中，即使查询到的元素只有一个，也会封装到数组中返回

css 复制代码

let lis = document.getElementsByTagName("li");//获取文档中所有的li
let list1 = document.getElementById("list1");
let lis = list1.getElementsByTagName("li"); //通过标签名，获取对应父元素下的子元素
console.log(lis[0]);

3、getElementsByName()

通过name属性获取一组元素节点对象（通常用于input）

css 复制代码

let items = document.getElementsByName("items");
for (let i = 0; i < items.length; i++) {
    console.log(items[i].value);
    console.log(items[i].type);
    console.log(items[i].className);
    items[i].type = "text";
}
console.log(items);

补充1： innerHTML用于获取元素内部的HTML代码的,对于自结束标签，这个属性没有意义

补充2：如果需要读取元素节点属性，直接使用元素.属性名

例子：元素.id 元素.name 元素.value

注意：class属性不能采用这种方式，读取class属性时需要使用元素.className

4、getElementsByClassName()

通过class属性获取一组元素节点对象（不支持IE8及以下浏览器）

css 复制代码

let list1 = document.getElementById("list1");
let ms=document.getElementsByClassName('mm')
let ms = list1.getElementsByClassName("mm");
console.log(ms);

5、childNodes、children

返回父元素下的所有子节点

（1）childNodes属性会获取包括文本节点在内的所有节点，DOM标准，标签间的空白也会被当成文本节点

（2）children属性可以获取当前元素的所有子元素，不包括空白文档了

css 复制代码

let list = document.getElementById("list");
console.log(list.children);//子元素，不包括空白节点
console.log(list.childNodes);//包括空白节点

6、firstChild、firstElementChild

返回父元素下的第一个子节点

（1）、firstChild 第一个子节点(包括空白的文本节点)

（2）、firstElementChild 获取当前元素的第一个子元素

（3）、lastChild 最后一个子节点(包括空白的文本节点)

（2）、lastElementChild 获取当前元素的最后一个子元素

css 复制代码

let list = document.getElementById("list");
let f1 = list.firstChild; //第一个子节点，包括空白
let f2 = list.firstElementChild; //第一个子元素
let l1 = list.lastChild; //最后一个子节点，包括空白
let l2 = list.lastElementChild; //最后一个子元素
console.log(l1);
console.log(l2);

7、返回某元素的父节点

语法：某元素.parentNode

某元素.parentElement

css 复制代码

let bj = document.getElementById("bj");
console.log(bj.parentNode);
console.log(bj.parentElement);

8、返回某元素的前/后一个兄弟节点

（1）、 previousSibling [ˈpriːviəs] ['sibliŋ] 返回前一个兄弟节点也有可能获取到空白的文本

（2）、 previousElementSibling 返回前一个兄弟元素，不包括空白文本，注意：不支持ie8及以下的浏览器

（3）、 nextSibling返回下一个兄弟节点也有可能获取到空白的文本

（4）、 nextElementSibling 返回下一个兄弟元素，不包括空白文本，注意：不支持ie8及以下的浏览器

css 复制代码

let bj = document.getElementById("bj");
console.log(bj.previousSibling);//前一个子节点，包括空白
console.log(bj.previousElementSibling);
console.log(bj.nextSibling);//后一个子节点，包括空白
console.log(bj.nextElementSibling);

9、获取body标签

css 复制代码

//方法一
var body=document.getElementsByTagName("body")[0];
//方法二
var body = document.body

10、获取html根标签

css 复制代码

var html = document.documentElement;

11、获取页面中所有的元素

css 复制代码

//第一种方式
var all=document.all;
//第二种方式
var all = document.getElementsByTagName("*")

12、document.querySelector()

-需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象

-该方法总会返回唯一的元素，如果满足条件的元素是多个，那么它只会返回第一个

-IE8以上的都适用*/

13、document.querySelectorAll()

-该方法和qureySelector()用法类似，不同的是它将会将符合条件的元素封装到一个数组中返回

-即使符合条件的元素只有一个，它也会返回数组 */

css 复制代码

var div = document.querySelector(".box1 div")
var div = document.querySelector("#box1")
var div = document.querySelectorAll(".box1")

五、事件基础

1、事件的概念

网页中每个元素都可以产生某些可以触发JS的事件，例如点击事件

事件是由三部分组成 事件源事件类型事件处理程序 称为事件三要素

事件源 ：事件被触发的对象谁被触发
事件类型 ：如何触发，什么事件例如鼠标点击，鼠标经过，键盘按下等
事件处理程序 ：通过函数赋值的方式完成

执行事件的步骤：

a. 获取事件源

b. 注册事件（绑定事件）

c. 添加事件处理程序（采取函数赋值形式）

javascript 复制代码

    <script>
      // 在js环境中，如何拿到html环境中的结构
      // 第一步：获取元素：事件源
      // let btn = document.getElementById("btn");
      //第二步： 绑定事件的第一种方式
      // btn.onclick = al;
      //事件类型 onclick：点击事件 ondblclick双击事件
      //事件回调：当事件类型触发时，执行事件回调
      // btn.onclick = function () {
      //   alert(1);
      //   alert(2);
      //   alert(3);
      // };

      // console.log(Object.prototype.toString.call(btn));

      function al() {
        alert(1);
        alert(2);
        alert(3);
      }
      // 绑定事件的第二种方式
      let btn = document.getElementById("btn");
      // 给标签对象的添加事件监听方法
      //  btn.addEventListener(事件类型，事件回调)
      btn.addEventListener("click", function () {
        alert(1);
        alert(2);
        alert(3);
      });
      // btn.addEventListener("click", al);

      // btn.addEventListener("click",  ()=> {
      //   alert(1);
      //   alert(2);
      //   alert(3);
      // });
    </script>

2、常见事件

（1）鼠标事件 触发条件
onclick 当单击鼠标 时运行脚本。

onmousedown 当按下鼠标按钮时运行脚本。

onmouseup 当松开鼠标按钮时运行脚本。
onmousemove 当鼠标指针移动 时运行脚本。
onmouseover 当鼠标指针移至元素之上 时运行脚本，会冒泡 。
onmouseout 当鼠标指针移出元素 时运行脚本，会冒泡 。
onmouseenter 当鼠标指针移至元素之上 时运行脚本，不会冒泡
onmouseleave当鼠标指针移出元素 时运行脚本，不会冒泡

onmousewheel 当转动鼠标滚轮时运行脚本。
onscroll 当滚动元素的滚动条 时运行脚本。

（2）键盘事件 触发条件
onkeyup 某个键盘按键被松开 时触发
onkeydown 某个键盘按键被按下 时触发

onkeypress 某个键盘按键被按下时触发，不支持功能键

（3）表单事件 触发条件
onfocus 表单获得焦点 触发
onblur 表单失去焦点 触发
oninput 表单每次输入触发
onchange 表单内容发生改变 时触发

onselect 表单文本被选取时触发

onreset 表单重置时触发

onsubmit 表单提交时触发