自学内容网 自学内容网
自学内容网 > 正文

JavaScript：浏览器对象-DOM

🕗 发布于 2024-11-17 07:11 javascript  前端  html  

八．浏览器对象-DOM

8.1Dom

DOM（Document Object Model）是将整个 HTML 文档的每一个标签元素视为一个对象，这个对象下包含了许多的属性和方法，通过操作这些属性或者调用这些方法实现对 HTML的动态更新，为实现网页特效以及用户交互提供技术支撑。

简言之 DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。

如下图所示，将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，文档树直观的体现了标签与标签之间的关系

 

 

8.2 DOM 节点

节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。

1. 【元素节点】其实就是 HTML 标签，如上图中 head、div、body 等都属于元素节点。

2. 【属性节点】是指 HTML 标签中的属性，如上图中 a 标签的 href 属性、div 标签的class 属性。

3. 【文本节点】是指 HTML 标签的文字内容，如 title 标签中的文字。

4. 【根节点】特指 html 标签。

5. 其它...

8.3 document

document 是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，document 是学习 DOM 的核心。

 

<script>
        // document 是内置的对象
        console.log(typeof document)       //输出：object

        // 1. 通过 document 获取根节点
        console.log(document.documentElement)  // 对应 html的所有标签

        // 2. 通过 document 节取 body 节点
        console.log(document.body); // 对应 body 标签

        // 3. 通过 document.write 方法向网页输出内容
        document.write('Hello World!');
</script>

结果：

 

 

8.4根据 CSS 选择器获取 DOM 对象

1. 什么是 CSS 选择器？

CSS 选择器是一种用于选择 HTML 元素的模式。通过 CSS 选择器，我们可以选择一个或多个网页中的元素并对其进行操作。在 JavaScript 中，CSS 选择器同样可以用于获取 DOM 元素。

2. 使用 querySelector 和 querySelectorAll

querySelector 和 querySelectorAll 是通过 CSS 选择器获取 DOM 元素的两种常用方法。

querySelector：返回匹配 CSS 选择器的第一个元素。

querySelectorAll：返回匹配 CSS 选择器的所有元素，结果是一个 NodeList（类似数组的对象）。

例子：

<body>
    <h1>查找元素类型节点</h1>
    <p class="example">从整个 DOM 树中查找 DOM 节点是学习 DOM 的第一个步骤。</p>
    <p class="example">元素1</p>
    <p class="example">元素2</p>
    <script>
        // 获取第一个 class 为 'example' 的元素
        const firstElement = document.querySelector('.example');

        // 获取所有 class 为 'example' 的元素
        const allElements = document.querySelectorAll('.example');
    </script>
    
</body>

为什么要用 const

在 JavaScript 中，使用 const 关键字声明变量是一种最佳实践，特别是当你确定变量

的值在初始化后不会改变时。虽然对于数组（如通过 querySelectorAll 返回的 NodeList）和对象（如 DOM 元素），其内容或属性是可以改变的，但变量本身（即指向那个数组或对象的引用）是不应该被重新赋值的。

在你的例子中，使用 const 有几个原因：

避免意外赋值：使用 const 可以防止你在代码的后续部分不小心重新赋值给这些变量。

如果尝试这样做，JavaScript 会抛出一个错误，这有助于捕获潜在的 bug。

代码清晰度：向其他开发者（或未来的你）表明这些变量的值在初始化后是不应该改变的。这有助于理解代码的意图和流程。

ES6+的标准：const 和 let 是 ES6（ECMAScript 2015）中引入的新变量声明关键字，用于替代 var。let 提供了块级作用域，而 const 提供了块级作用域且变量值不可重新赋值（尽管如果变量是一个对象或数组，其内部状态仍然可以改变）。

一致性：如果你的团队或项目约定了使用 const 和 let 而不是 var，那么遵循这一约定可以提高代码的一致性和可读性。

 

8.5其他获取 DOM 对象的方式

除了使用 CSS 选择器，JavaScript 还提供了多种其他方式来获取 DOM 对象。下面我们将介绍几种常用的获取 DOM 对象的方法。

1. getElementById

getElementById 是一种高效且常用的方式，它根据元素的 ID 获取 DOM 对象。ID 在整个 HTML 文档中必须唯一，因此这种方法获取的元素也是唯一的。

<script>
        // 获取 ID 为 "main" 的元素
        const mainElement = document.getElementById('main');
    </script>

优点：性能高，因为浏览器可以直接通过 ID 定位元素。
缺点：只能获取单个元素，而且只能通过 ID 获取，局限性较大。

2. getElementsByClassName

getElementsByClassName 根据元素的类名返回符合条件的所有元素，结果是一个 HTMLCollection（动态集合）。

/ 获取所有 class 为 "item" 的元素

const items = document.getElementsByClassName('item');

优点：可以获取多个具有相同类名的元素。
缺点：返回的 HTMLCollection 是动态的，文档结构变化时，该集合也会变化。

3. getElementsByTagName

getElementsByTagName 根据标签名获取 DOM 对象，它返回所有符合条件的元素，结果同样是一个 HTMLCollection。

示例：

// 获取所有 div 标签

const divs = document.getElementsByTagName('div');

优点：可以获取所有指定标签的元素。

缺点：与 getElementsByClassName 类似，返回的集合是动态的。

4. getElementsByName

getElementsByName 根据元素的 name 属性获取 DOM 对象。通常用于获取表单元素。

示例：

// 获取提交按钮

const submitButton = document.getElementById('submit');

// 获取所有 name 为 "email" 的输入框

const emailInputs = document.getElementsByName('email');

优点：专门用于获取表单元素，方便处理具有相同 name 属性的元素。

缺点：主要局限于表单操作，应用场景较窄

8.6操作元素

8.6.1操作内容

通过修改 DOM 的文本内容，动态改变网页的内容。

1. innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。

<p class="intro">abcde</p>     //输出:abcde

    <script>

        const intro=document.querySelector('.intro')  

        intro.innerText='hello yuyu'         //输出：hello yuyu

     // intro.innerText='<h4>hello yuyu</h4>'      //输出：<h4>hello yuyu</h4>

    </script>

2. innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。

<p class="intro">abcde</p>    <!--  //输出:abcde -->

    <script>

        const intro=document.querySelector('.intro')  

        // intro.innerHTML='hello yuyu'         //输出：hello yuyu

        intro.innerHTML='<h4>hello yuyu</h4>'   //输出：hello yuyu(变大加粗了)

    </script>

innerHTML：用于获取或设置元素内部的 HTML 内容，包括 HTML 标签。设置时，浏览器会解析并渲染 HTML 标签。

innerText：用于获取或设置元素内部的纯文本内容，不包括 HTML 标签。设置时，HTML标签会被当作普通文本处理，不会被解析为 HTML。

总结：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性

8.6.2操作属性

直接通过属性名修改

<body>
    <img src="./123.jpg" alt="" class="pic">
    <script> 
        // 1. 获取 img 对应的 DOM 元素 
        const pic = document.querySelector('.pic') 
        // 2. 修改属性 
        pic.src = './images/lion.webp' 
        pic.width = 400; 
        pic.alt = '图片不见了...' 
    </script>  
</body>

运行效果：

 

控制样式属性

1. 应用【修改样式】，通过修改行内样式 style 属性，实现对样式的动态修改。

通过元素节点获得的style 属性本身的数据类型也是对象，如 box.style.color 、 box.style.width 分别用来获取元素节点 CSS 样式的 color 和 width 的值。

<body> 
<div class="box">随便一些文本内容</div> 
<script>// 获取 DOM 节点 
const box = document.querySelector('.intro') 
box.style.color = 'red' 
box.style.width = '300px' 
// css 属性的 - 连接符与 JavaScript 的 减运算符 
// 冲突，所以要改成驼峰法 
box.style.backgroundColor = 'pink' 
</script> 
</body>

任何标签都有 style 属性，通过 style 属性可以动态更改网页标签的样式，如要遇到 css 属性中包含字符 - 时，要将 - 去掉并将其后面的字母改成大写，如 background-color 要写成box.style.backgroundColor

2. 操作类名(className) 操作 CSS

通过 element.className 设置类名样式操作 , element.className 可以通过 添加、删除 或 替换 类名来间接控制元素的样式 , 类名通常与在 CSS 样式表中定义的一组样式相关联 ;

获取元素类名 :

// 获取元素

var element = document.getElementById('myElement');

// 获取元素类名

var className = element.className;

设置元素类名 :

// 获取元素

var element = document.getElementById('myElement');

// 设置类名

element.className = 'newClass';

注意：

1.由于 class 是关键字, 所以使用 className 去代替

2.className 是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

3.通过 classList 操作类控制 CSS 为了解决 className 容易覆盖以前的类名，我们可以通过 classList 方式追加和删除类名

操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框正常的有属性有取值的跟其他的标签属性没有任何区别

获取:DOM 对象.属性名

设置:DOM 对象.属性名= 新值

 

<!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> 
</head> 
<body> 
<input type="text" value="请输入"> 
<button disabled>按钮</button> 
<input type="checkbox" name="" id="" class="agree"> 
<script> 
// 1. 获取元素 
let input = document.querySelector('input') 
// 2. 取值或者设置值 得到 input 里面的值可以用 value 
// console.log(input.value) 
input.value = '小米手机' 
input.type = 'password'// 2. 启用按钮 
let btn = document.querySelector('button') 
// disabled 不可用 = false 这样可以让按钮启用 
btn.disabled = false 
// 3. 勾选复选框 
let checkbox = document.querySelector('.agree') 
checkbox.checked = false 
</script> 
</body> 
</html>

自定义属性

标准属性: 标签天生自带的属性 比如 class id title 等, 可以直接使用点语法操作比如：disabled、checked、selected

自定义属性： 在 html5 中推出来了专门的 data-自定义属性 在标签上一律以 data-开头在 DOM 对象上一律以 dataset 对象方式获取

<!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> 
</head> 
<body> 
<div data-id="1"> 自定义属性 </div> 
<script> 
// 1. 获取元素 
let div = document.querySelector('div') 
// 2. 获取自定义属性值console.log(div.dataset.id) 
</script> 
</body> 
</html>

间歇函数

知道间歇函数的作用，利用间歇函数创建定时任务。

setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。

<script> 
// 1. 定义一个普通函数 
function repeat() { 
console.log('不知疲倦的执行下去....') 
} 
// 2. 使用 setInterval 调用 repeat 函数 
// 间隔 1000 毫秒，重复调用 repeat 
setInterval(repeat, 1000) 
</script>

案例：验证码发送 

<body>

手机号码： <input type="number"> <button>发送</button>

<script>

var btn = document.querySelector('button');

var time = 3; // 定义剩下的秒数

btn.addEventListener('click', function () {

btn.disabled = true;

var timer = setInterval(function () {

if (time == 0) {

// 清除定时器和复原按钮

clearInterval(timer);

btn.disabled = false;

btn.innerHTML = '发送';

} else {

btn.innerHTML = '还剩下' + time + '秒';

time--;

}

}, 1000);

})

</script>

</body>

学会通过为 DOM 注册事件来实现可交互的网页特效。

• 能够判断函数运行的环境并确字 this 所指代的对象

• 理解事件的作用，知道应用事件的 3 个步骤

学习会为 DOM 注册事件，实现简单可交互的网页特交。

掌握元素节点创建、复制、插入、删除等操作的方法，能够依据元素节点的结构关系查找 节点

回顾之前 DOM 的操作都是针对元素节点的属性或文本的，除此之外也有专门针对元素节点本身的操作，如插入、复制、删除、替换等

8.6.3插入节点

在已有的 DOM 节点中插入新的 DOM 节点时，需要关注两个关键因素：首先要得到新的DOM 节点，其次在哪个位置插入这个节点。

如下代码演示：

<body>

<h3>插入节点</h3>

<p>在现有 dom 结构基础上插入新的元素节点</p>

<hr>

<!-- 普通盒子 -->

<div class="box"></div>

<!-- 点击按钮向 box 盒子插入节点 -->

<button class="btn">插入节点</button>

<script>

// 点击按钮，在网页中插入节点

const btn = document.querySelector('.btn')btn.addEventListener('click', function () {

// 1. 获得一个 DOM 元素节点

const p = document.createElement('p')

p.innerText = '创建的新的 p 标签'

p.className = 'info'

// 复制原有的 DOM 节点

const p2 = document.querySelector('p').cloneNode(true)

p2.style.color = 'red'

// 2. 插入盒子 box 盒子

document.querySelector('.box').appendChild(p)

document.querySelector('.box').appendChild(p2)

})

</script>

</body>

结论：

• createElement 动态创建任意 DOM 节点

• cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点

• appendChild 在末尾（结束标签前）插入节点

再来看另一种情形的代码演示：

<body>

<h3>插入节点</h3>

<p>在现有 dom 结构基础上插入新的元素节点</p>

<hr>

<button class="btn1">在任意节点前插入</button>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

<script>

// 点击按钮，在已有 DOM 中插入新节点

const btn1 = document.querySelector('.btn1')

btn1.addEventListener('click', function () {

// 第 2 个 li 元素

const relative = document.querySelector('li:nth-child(2)')// 1. 动态创建新的节点

const li1 = document.createElement('li')

li1.style.color = 'red'

li1.innerText = 'Web APIs'

// 复制现有的节点

const li2 = document.querySelector('li:first-child').cloneNode(true)

li2.style.color = 'blue'

// 2. 在 relative 节点前插入

document.querySelector('ul').insertBefore(li1, relative)

document.querySelector('ul').insertBefore(li2, relative)

})

</script>

</body>

结论：

• createElement 动态创建任意 DOM 节点

• cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点

• insertBefore 在父节点中任意子节点之前插入新节点

8.6.4删除节点

删除现有的 DOM 节点，也需要关注两个因素：首先由父节点删除子节点，其次是要删除哪个子节点。

<body>

<!-- 点击按钮删除节点 -->

<button>删除节点</button>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>Web APIs</li>

</ul>

<script>

const btn = document.querySelector('button')

btn.addEventListener('click', function () {

// 获取 ul 父节点

let ul = document.querySelector('ul')// 待删除的子节点

let lis = document.querySelectorAll('li')

// 删除节点

ul.removeChild(lis[0])

})

</script>

</body>

结论：removeChild 删除节点时一定是由父子关系。

查找节点

DOM 树中的任意节点都不是孤立存在的，它们要么是父子关系，要么是兄弟关系，不仅如此，我们可以依据节点之间的关系查找节点。

父子关系 

<body>

<button class="btn1">所有的子节点</button>

<!-- 获取 ul 的子节点 -->

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript 基础</li>

<li>Web APIs</li>

</ul>

<script>

const btn1 = document.querySelector('.btn1')

btn1.addEventListener('click', function () {

// 父节点

const ul = document.querySelector('ul')

// 所有的子节点

console.log(ul.childNodes)

// 只包含元素子节点

console.log(ul.children)

})

</script>

</body>

结论：• childNodes 获取全部的子节点，回车换行会被认为是空白文本节点

• children 只获取元素类型节点

<body>

<table>

<tr>

<td width="60">序号</td>

<td>课程名</td>

<td>难度</td>

<td width="80">操作</td>

</tr>

<tr>

<td>1</td>

<td><span>HTML</span></td>

<td>初级</td>

<td><button>变色</button></td>

</tr>

<tr>

<td>2</td>

<td><span>CSS</span></td>

<td>初级</td>

<td><button>变色</button></td>

</tr>

<tr>

<td>3</td>

<td><span>Web APIs</span></td>

<td>中级</td>

<td><button>变色</button></td>

</tr>

</table>

<script>

// 获取所有 button 节点，并添加事件监听

const buttons = document.querySelectorAll('table button')

for(let i = 0; i < buttons.length; i++) {

buttons[i].addEventListener('click', function () {

// console.log(this.parentNode); // 父节点 td

// console.log(this.parentNode.parentNode); // 爷爷节点 tr

this.parentNode.parentNode.style.color = 'red'

})

}</script>

</body>

结论：parentNode 获取父节点，以相对位置查找节点，实际应用中非常灵活。

兄弟关系 

<body>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript 基础</li>

<li>Web APIs</li>

</ul>

<script>

// 获取所有 li 节点

const lis = document.querySelectorAll('ul li')

// 对所有的 li 节点添加事件监听

for(let i = 0; i < lis.length; i++) {

lis[i].addEventListener('click', function () {

// 前一个节点

console.log(this.previousSibling)

// 下一下节点

console.log(this.nextSibling)

})

}

</script>

</body>

结论：

• previousSibling 获取前一个节点，以相对位置查找节点，实际应用中非常灵活。

• nextSibling 获取后一个节点，以相对位置查找节点，实际应用中非常灵活。

js 组成 JavaScript 的组成

• ECMAScript:

o 规定了 js 基础语法核心知识。

o 比如：变量、分支语句、循环语句、对象等等

• Web APIs :

o DOM 文档对象模型， 定义了一套操作 HTML 文档的 API

o BOM 浏览器对象模型，定义了一套操作浏览器窗口的 API

8.7事件

事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变， 便立即调用一个函数。

例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片

8.7.1事件监听

结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。

addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】

<body>

<h3>事件监听</h3>

<p id="text">为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。</p>

<button id="btn">点击改变文字颜色</button>

<script>

// 1. 获取 button 对应的 DOM 对象

const btn = document.querySelector('#btn')

// 2. 添加事件监听

btn.addEventListener('click', function () {

console.log('等待事件被触发...')

// 改变 p 标签的文字颜色

let text = document.getElementById('text')

text.style.color = 'red'

})

// 3. 只要用户点击了按钮，事件便触发了！！！

</script>

完成事件监听分成 3 个步骤：

1. 获取 DOM 元素

2. 通过 addEventListener 方法为 DOM 节点添加事件监听

3. 等待事件触发，如用户点击了某个按钮时便会触发 click 事件类型

4. 事件触发后，相对应的回调函数会被执行

除了 【单击】还有【双击】dblclick

<script>

// 双击事件类型

btn.addEventListener('dblclick', function () {

console.log('等待事件被触发...');

// 改变 p 标签的文字颜色

const text = document.querySelector('.text')

text.style.color = 'red'

})

// 只要用户双击击了按钮，事件便触发了！！！

</script>

结论：【事件类型】决定了事件被触发的方式，如 click 代表鼠标单击，dblclick 代表鼠标双击。

8.7.2事件类型

将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等，我们逐一展开学习。

鼠标事件

鼠标事件是指跟鼠标操作相关的事件，如单击、双击、移动等。

1. `mouseenter 监听鼠标是否移入 DOM 元素

<body>

<h3>鼠标事件</h3>

<p>监听与鼠标相关的操作</p>

<hr>

<div class="box"></div>

<script>

// 需要事件监听的 DOM 元素

const box = document.querySelector('.box');

// 监听鼠标是移入当前 DOM 元素

box.addEventListener('mouseenter', function () {

// 修改文本内容

this.innerText = '鼠标移入了...';

// 修改光标的风格

this.style.cursor = 'move';

})

</script>

</body>

`mouseleave 监听鼠标是否移出 DOM 元素

<body>

<h3>鼠标事件</h3>

<p>监听与鼠标相关的操作</p><hr>

<div class="box"></div>

<script>

// 需要事件监听的 DOM 元素

const box = document.querySelector('.box');

// 监听鼠标是移出当前 DOM 元素

box.addEventListener('mouseleave', function () {

// 修改文本内容

this.innerText = '鼠标移出了...';

})

</script>

</body>

 

8.7.3键盘事件

keydown 键盘按下触发

keyup 键盘抬起触发

.7.4焦点事件

focus 获得焦点

blur 失去焦点

 

 

8.7.5文本框输入事件

input 事件是处理文本输入时最常用的事件之一，它能够实时捕获输入框内容的变化。无论用户是通过键盘输入还是粘贴文本，input 事件都能被触发

<input type="text" id="textInput" placeholder="请输入文本">



<script>

  const inputElement = document.getElementById('textInput');

  inputElement.addEventListener('input', (event) => {

    console.log('输入内容：', event.target.value);

  });

</script>

在这个例子中，input 事件监听器被绑定到输入框，当用户在输入框中输入或修改文本时，控制台会实时输出当前的输入内容

8.7.6change 事件监听

与 input 事件不同，change 事件只有在输入框内容发生变化且失去焦点时才会触发。它适用于处理用户输入完成后的一些操作，如表单提交。

<input type="text" id="textInput" placeholder="请输入文本">



<script>

  const inputElement = document.getElementById('textInput');

  inputElement.addEventListener('change', (event) => {

    console.log('最终输入内容：', event.target.value);

  });

</script>

在此示例中，只有当输入框失去焦点后，change 事件才会触发并记录用户输入的最终内容。

8.7.7事件对象

1、获取事件对象

（1）事件对象是什么

 也是个对象，这个对象里有事件触发时的相关信息

（2）使用场景

可以判断用户按下哪个键，比如按下回车键可以发布新闻

可以判断鼠标点击了哪个元素，从而做相应的操作

（3）语法

在事件绑定的回调函数的第一个参数就是事件对象，一般命名为event、ev、e

2、事件对象常用属性

（1）常用属性

type获取当前的事件类型

clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置

key：用户按下的键盘键的值，现在不提倡使用keyCode

3、评论回车发布案例

需求：按下回车键盘，可以发布信息

分析：

①：用到按下键盘事件 keydown 或者 keyup 都可以

②：如果用户按下的是回车键盘，则发布信息

③：让留言信息模块显示，把拿到的数据渲染到对应标签内部

示例代码如下：

    const tx = document.querySelector('#tx')

    const total = document.querySelector('.total')

    const item = document.querySelector('.item')

    const text = document.querySelector('.text')

    // 1. 当我们文本域获得了焦点，就让 total 显示出来

    tx.addEventListener('focus', function () {

      total.style.opacity = 1

    })

    // 2. 当我们文本域失去了焦点，就让 total 隐藏出来

    tx.addEventListener('blur', function () {

      total.style.opacity = 0

    })

    // 3. 检测用户输入

    tx.addEventListener('input', function () {

      // console.log(tx.value.length)  得到输入的长度

      total.innerHTML = `${tx.value.length}/200字`

    })

    // 4. 按下回车发布评论

    tx.addEventListener('keyup', function (e) {

      // 只有按下的是回车键，才会触发

      // console.log(e.key)

      if (e.key === 'Enter') {

        // 如果用户输入的不为空就显示和打印

        if (tx.value.trim()) {

          // console.log(11)

          item.style.display = 'block'

          // console.log(tx.value)  // 用户输入的内容

          text.innerHTML = tx.value

        }

        // 等我们按下回车，结束，清空文本域

        tx.value = ''

        // 按下回车之后，就要把 字符统计 复原

        total.innerHTML = '0/200字'

      }

    })

  </script>

8.8.8环境对象

1、环境对象：

指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境

2、作用：

弄清楚this的指向，可以让我们代码更简洁

函数的调用方式不同，this 指代的对象也不同

【谁调用， this 就是谁】 是判断 this 指向的粗略规则

直接调用函数，其实相当于是 window.函数，所以 this 指代 window

示例代码如下：

 <button>点击</button>

  <script>

    // 每个函数里面都有this 环境对象  普通函数里面this指向的是window

    // function fn() {

    //   console.log(this)

    // }

    // window.fn()

    const btn = document.querySelector('button')

    btn.addEventListener('click', function () {

      // console.log(this)  // btn 对象

      // btn.style.color = 'red'

      this.style.color = 'red'

    })

  </script>

8.8.9回调函数

1、什么是回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数

简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

示例代码如下：

    <button class="box">点击</button>

    <script>

        // function fn() {

        //     console.log('我是回调函数...');

        // }

        // setInterval(fn, 1000)

        const box = document.querySelector('.box')

        box.addEventListener('click', function () {

            alert('我也是回调函数');

        })

    </script>


原文地址：https://blog.csdn.net/2401_86036532/article/details/143797413

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024