DOM节点操作、事件、BOM

2023-10-03 18:51:34

1. 节点操作

1.1 什么是节点

根据W3C的HTML DOM 标准,HTML 文档中所有内容都是节点;

整个文档是一个文档节点 document

每个HTML 元素内的文本是文本节点

HTML 元素内的文本节点

每个 HTML 属性是属性节点

注释是注释节点

1.2 节点类型

通过noteType属性可以获取节点的类型

document 的节点类型-----9

console.log(document.noteType);//9

标签的节点类型----1

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

console.log(box1.nodeType);//1

属性的节点类型-----2 ,getAttrbuteNode("属性") : 获取元素的属性节点

var attr1 = box1.getAttrbuteNode("class");

console.log(attr1.nodeType);//2

文本的节点类型-----3, 元素的第一个子节点就是文本节点

console.log(box1.firstChild.nodeType)//3

1.3 节点名称

通过nodeName 可以获取元素的节点名称

document 的节点名称-----#document

console.log(document.nodeName);//#document

标签的节点名称-----大写的标签名

console.log(box1.nodeName);//#DIV

属性的节点名称-----属性名

console.log(attr1.nodeName);//class

文本的节点名称-----#text

console.log(box1.fristChild.nodeName);//#text

1.4 节点值

通过nodeValue 可以获取元素的节点的值

document 的节点值-----null

console.log(document.nodeValue);//null

标签的节点值-----null

console.log(document.nodeValue);//null

属性的节点值-----属性值

console.log(attr.nodeValue);//boxCl

文本的节点值-----文本的内容

console.log(box.firstChild.nodeValue);//我是div元素

2. 节点之间的关系

2.1 HTML DOM 节点树

HTML DOM 将HTML 文档视作树结构,这种结构被称为节点树

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

2.2 节点之间的关系

节点之间的关系就是嵌套关系（父子关系）、并列关系（兄弟关系）。注意区分节点与元素节点之间的区别。
父节点--parentNode
父元素节点--parentElement
子节点--childNodes：标签节点、文本节点、注释节点得到的是伪数组
子元素节点--children :标签节点
第一个子节点--firstChild:文本
第一个子元素节点--firstElementChild：第一个标签
最后一个子节点--lastChild:文本
最后一个子元素节点--lastElementChild: 最后一个标签
上一个子节点--previousSibling:文本
上一个子元素节点--previousElementSibling: 上一个标签
下一个子节点 --nextSibling:文本
下一个子元素节点--nextElementSibling: 下一个标签
总结：firstChild、lastChild、previousSibling、nextSibling获取到的都是文本，如果没有就是文本节点名称#text， firstElementChild、lastElementChild、previousElementSibling、nextElementSibling获取到的都是标签，如果没有就是空。

2.3 节点隔行换色

我们之前学过的隔行换色都是通过遍历伪数组然后奇偶数判断，或者循环累加时+2等，现在我是利用节点之间的关系以及节点的名称值等实现隔行换色的效果

第一种：奇偶数判断

for (var i = 0; i < liObj.length; i++) {
     if (i % 2 == 0) {
       liObj[i].style.backgroundColor = "red";
     }
   }

第二种：累加2

for (var i = 0; i < liObj.length; i += 2) {
    liObj[i].style.backgroundColor = "red";
  }

第三种：子元素节点

for (var i = 0; i < ulObj.children.length; i++) {
    if (i % 2 == 0) {
      liObj[i].style.backgroundColor = "red";
    }
  }

第四种：节点操作

 for (var i = 0; i < ulObj.childNodes.length; i++) {
    // console.log(ulObj.childNodes[i]);
    // 判断是不是标签节点，把标签节点提取出来即可
    if (ulObj.childNodes[i].nodeType == 1 && ulObj.childNodes[i].nodeName == "LI") {
      console.log(ulObj.childNodes[i]);
      newObj.push(ulObj.childNodes[i]);
    }
  }
  for (var i = 0; i < newObj.length; i++) {
    if (i % 2 == 0) {
      newObj[i].style.backgroundColor = "red";
    }
  }

2.4 插入节点

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

提示：如果你想创建一个新的文本列表项，在 LI 元素后你应该添加元素的文本节点，然后在列表中添加 LI元素。

你也可以使用 insertBefore 方法来插入/移除已存在的元素。

node.insertBefore(newnode,existingnode) 参数newnode是要插入的节点对象，existingnode是要添加新的节点前的子节点。

var node=document.getElementById("myList2").lastChild;
var list=document.getElementById("myList1");
list.insertBefore(node,list.childNodes[0]);

3. 创建元素的三种方式

3.1 document.write()

弊端：只能往body中添加元素

document.write('<div class="box1">我是div</div>');

3.2 innerHTML

弊端：在同级下只能添加一种元素，多个会覆盖

document.getElementById("divObj").innerHTML = "<p>哈哈哈</p>";

3.3 document.createElement()

父元素.appendChild(子元素)：给父元素末尾添加子元素

var pObj = document.createElement("p");

divObj1.appendChild(pObj);

3.4 动态创建列表

单击按钮，动态的创建无序列表，渲染在红色边框的box中.

思路：1、创建内容数组

获取元素，给按钮绑定单击事件
创建ul标签
将ul添加到box中
遍历数组
创建li标签
添加内容
按钮禁用

<!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>
    <style>
        #btn {
            width: 300px;
            height: 100px;
        }

        #box {
            width: 300px;
            border: 2px solid;
            margin-top: 30px;
        }

        ul {
            list-style: none;
        }

        .red {
            color: red;
        }
    </style>
</head>

<body>
    <button id="btn">获取数据</button>
    <div id="box"></div>
</body>
<script>
    // 后台获取的数据
    var dataArr = ['十九届六中全会有多重要', '31省区市新增本土确诊7例', '3.6万余字的决议稿是怎样形成的', '雪梨和林珊珊偷逃税被罚超9000万', '中美选手将组队出战世乒赛混双比赛', '*远东集团在大陆投资企业被查处'];
    /**
     * 把数据通过列表的形式渲染到#box中
     * 并且 每个数据绑定移入和移出事件,移入变色,移出恢复
     */
    var boxObj1 = document.getElementById('box');
    //创建div对象
    var button = document.getElementById('btn');
    //创建dom对象
    button.onclick = function () {
        //绑定点击事件
        var uObj = document.createElement('ul');
        //创建元素ul
        boxObj1.appendChild(uObj);
        //把ul插入到div中
        for (let i = 0; i < dataArr.length; i++) {
            //遍历数组获取数组中的每一项
            var lObj = document.createElement('li');
            //创建li元素
            uObj.appendChild(lObj);
            //在ul中插入li
            lObj.innerHTML = dataArr[i];
            //在页面上输出
            lObj.onmouseover = function () {
                this.className = 'red';
            }
            lObj.onmouseout = function () {
                this.className = '';
            }

        }
    }
</script>

</html>

4. 事件进阶

4.1 事件三要素

事件源：是指那个元素引发的事件。比如当你点击cdsn图标的时候，会跳转到cdsn首页。那么这个cdsn图标就是事件源,再或者，可以这样理解，当你对某个元素执行动作的时候，会触发一系列效果（动画，跳转....），那么这个元素就是事件源。

事件类型：例如，点击，鼠标划过，按下键盘，获得焦点。

事件驱动程序：事件驱动程序即执行的结果，例如，当你点击cdsn图标的时候，会跳转到cdsn首页。那么跳转到cdsn首页就是事件的处理结果。

执行事件的步骤：获取元素、绑定事件、书写事件驱动程序

4.2 监听事件

绑定监听事件 addEventListener("事件的类型",事件的处理程序)

box1.addEventListener("click", myFunc)
  function myFunc() {
    this.style.backgroundColor = "blue";
  }

解绑监听事件removeEventListener("事件的类型",事件的处理程序)

box1.removeEventListener("click", myFunc);

4.3 事件对象

任何事件都有内置对象event，事件对象的兼容性写法为

var event = event || window.event;
// 事件的类型
    console.log(event.type);
    // 元素的ID
    console.log(event.target.id);
    // 文本的内容
    console.log(event.target.innerText);
    // 事件的触发点是距离浏览器左侧的横纵坐标
    console.log("横坐标：" + event.clientX + "," + "纵坐标：" + event.clientY);
    console.log("横坐标：" + event.pageX + "," + "纵坐标：" + event.pageY);
    console.log("我单击header!");

4.4 事件冒泡

什么是冒泡事件

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
假设一个元素div，它有一个下级元素p。
<div>
　　<p>元素</p>
</div>
这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？

如何阻止冒泡（存在兼容性）

e.stopPropagation(); 谷歌和火狐支持,

window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

5. BOM

5.1 BOM的概念

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，

比如：刷新浏览器、后退、前进、在浏览器中输入URL等

5.2 BOM 的*对象

window是浏览器的*对象，当调用window下的属性和方法时，可以省略window注意：window下一个特殊的属性 window.name

5.3 对话框

alert()

prompt()

confirm()

5.4 加载事件

onload事件

onload 事件会在页面或图像加载完成后立即发生。

onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

5.5 Location 对象

常用属性

// //地址栏上#及后面的内容
// console.log(window.location.hash);
// //主机名及端口号
// console.log(window.location.host);
// //主机名
// console.log(window.location.hostname);
// //文件的路径---相对路径
// console.log(window.location.pathname);
// //端口号
// console.log(window.location.port);
// //协议
// console.log(window.location.protocol);
// //搜索的内容
// console.log(window.location.search);

5.6 History 对象

//跳转的
my$("btn1").onclick = function () {
window.location.href = "15test.html";
};
//前进
my$("btn2").onclick = function () {
window.history.forward();
};
//后退
my$("btn").onclick = function () {
window.history.back();
};

5.7 Navigator 对象

通过userAgent可以判断用户浏览器的类型
console.log(window.navigator.userAgent);
//通过platform可以判断浏览器所在的系统平台类型.
//console.log(window.navigator.platform);

6. 定时器

6.1 setInteval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

clearInteval()

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

//定时器

//参数1:函数

//参数2:时间---毫秒---1000毫秒--1秒

//执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数.....

//返回值就是定时器的id值

6.2 setTimeot()

另一个定时器定义和用法

方法用于在指定的毫秒数后调用函数或计算表达式。

提示： 1000 毫秒= 1 秒。

提示：如果你只想重复执行可以使用 setInterval() 方法。

提示：使用 clearTimeout() 方法来阻止函数的执行。

参数：param1回调函数，param2时间

返回值: 返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行

码农公寓