null - 程序员宅基地

DOM概述-程序员宅基地

技术标签：前端 Join html javascript

什么是DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

对象树化的DOM模型

在这里插入图片描述

DOM 节点

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

【元素节点】其实就是 HTML 标签，如上图中 head、div、body 等都属于元素节点。
【属性节点】是指 HTML 标签中的属性，如上图中 a 标签的 href 属性、div 标签的 class 属性。
【文本节点】是指 HTML 标签的文字内容，如 title 标签中的文字。
【根节点】特指 html 标签。
其它…

如何获取DOM元素

querySelector 满足条件的第一个元素
querySelectorAll 满足条件的元素集合返回伪数组
了解其他方式
1. getElementById
2. getElementsByTagName

补充：
对于querySelector我们是获取第一个元素
但是querySelectorAll是我们进行索取全部元素以数组的形式进
行返回，如果想要调用我们的元素，就需要使用下标对于我们的元素进行调用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM - 查找节点</title>
</head>
<body>
  <h3>查找元素类型节点</h3>
  <p>从整个 DOM 树中查找 DOM 节点是学习 DOM 的第一个步骤。</p>
  <ul>
      <li>元素</li>
      <li>元素</li>
      <li>元素</li>
      <li>元素</li>
  </ul>
  <script>
  	const p = document.querySelector('p')  // 获取第一个p元素
  	const lis = document.querySelectorAll('li')  // 获取第一个p元素
  </script>
</body>
</html>

如何更改我们的DOM模型

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

<script>
  // innerText 将文本内容添加/更新到任意标签位置
  const intro = document.querySelector('.intro')
  // intro.innerText = '嗨~ 我叫陈11！'
  // intro.innerText = '<h4>嗨~ 我叫陈11！</h4>'
</script>

我们可以通过innerText进行修改我们的文本，但是也仅限于我们使用innnerText只能修改我们标签的内容
innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。

<script>
  // innerHTML 将文本内容添加/更新到任意标签位置
  const intro = document.querySelector('.intro')
  intro.innerHTML = '嗨~ 我叫陈22！'
  intro.innerHTML = '<h4>嗨~ 我叫陈22！</h4>'
</script>

但是我们的innerHTMl可以直接进行修改我们的标签
总结：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性。

常用属性修改

直接能过属性名修改，最简洁的语法

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

说明：我们的pic相当于是一个对象，我们通过querySelector进行选择所有的元素，之后通过调用属性进行修改，比如调用.src相当于我们修改了图片的来源，进行对我们的文本属性进行修改

控制样式属性

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 修改样式</title>
</head>
<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>
</html>

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

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 修改样式</title>
    <style>
        .pink {
      
            background: pink;
            color: hotpink;
        }
    </style>
</head>
<body>
  <div class="box">随便一些文本内容</div>
  <script>
    // 获取 DOM 节点
    const box = document.querySelector('.intro')
    box.className = 'pink'
  </script>
</body>
</html>

说明：我们先用const关键字进行获取，然后，我们直接对鱼器进行调用，但是注意我们是通过className进行的调用，而不是通过class进行直接调用，因为class是类名关键字
3. 通过 classList 操作类控制CSS

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


<!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>
        div {
      
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .active {
      
            width: 300px;
            height: 300px;
            background-color: hotpink;
            margin-left: 100px;
        }
    </style>
</head>

<body>

    <div class="one"></div>
    <script>
        // 1.获取元素
        // let box = document.querySelector('css选择器')
        let box = document.querySelector('div')
        // add是个方法 添加  追加
        // box.classList.add('active')
        // remove() 移除 类
        // box.classList.remove('one')
        // 切换类
        box.classList.toggle('one')
    </script>
</body>

</html>

事件

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

例如：换一句话就是我们通过用户进行发生事件，比如说用户点击鼠标我们要进行相应的反应，或者用户进行键盘的输入我们也需要进行一个响应的反应，这个就叫做事件

事件监听

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件监听</title>
</head>
<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>
</body>
</html>

鼠标点击前
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xmu9GRVU-1683196537456)(http://121.41.57.70/wp-content/uploads/2023/04/截屏2023-04-18-18.30.27.png)]
鼠标点击后
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vzSazmE8-1683196537457)(http://121.41.57.70/wp-content/uploads/2023/04/截屏2023-04-18-18.31.13.png)]
就修改了我们文字的颜色
那么如何进行时间监听

获取 DOM 元素
通过 addEventListener 方法为 DOM 节点添加事件监听
等待事件触发，如用户点击了某个按钮时便会触发 click 事件类型
事件触发后，相对应的回调函数会被执行
换一句话说：所谓的事件无非就是找个机会（事件触发）调用一个函数（回调函数）。

事件类型

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

鼠标事件

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

`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>

键盘事件

keydown 键盘按下触发
keyup 键盘抬起触发

焦点事件

focus 获得焦点

blur 失去焦点

文本框输入事件

input

事件对象

任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。

<body>
  <h3>事件对象</h3>
  <p>任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。</p>
  <hr>
  <div class="box"></div>
  <script>
    // 获取 .box 元素
    const box = document.querySelector('.box')

    // 添加事件监听
    box.addEventListener('click', function (e) {
      
      console.log('任意事件类型被触发后，相关信息会以对象形式被记录下来...');

      // 事件回调函数的第1个参数即所谓的事件对象
      console.log(e)
    })
  </script>
</body>

事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、ev 、ev 。

接下来简单看一下事件对象中包含了哪些有用的信息：

ev.type 当前事件的类型
ev.clientX/Y 光标相对浏览器窗口的位置
ev.offsetX/Y 光标相于当前 DOM 元素的位置

回调函数

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

<script>
  // 声明 foo 函数
  function foo(arg) {
      
    console.log(arg);
  }

  // 普通的值做为参数
  foo(10);
  foo('hello world!');
  foo(['html', 'css', 'javascript']);

  function bar() {
      
    console.log('函数也能当参数...');
  }
  // 函数也可以做为参数！！！！
  foo(bar);
</script>

函数 bar 做参数传给了 foo 函数，bar 就是所谓的回调函数了！！！

我们回顾一下间歇函数 setInterval

<script>
	function fn() {
      
    console.log('我是回调函数...');
  }
  // 调用定时器
  setInterval(fn, 1000);
</script>

fn 函数做为参数传给了 setInterval ，这便是回调函数的实际应用了，结合刚刚学习的函数表达式上述代码还有另一种更常见写法。

<script>
  // 调用定时器，匿名函数做为参数
  setInterval(function () {
      
    console.log('我是回调函数...');
  }, 1000);
</script>

结论：

回调函数本质还是函数，只不过把它当成参数使用
使用匿名函数做为回调函数比较常见

补充：回掉函数就是我们本身有的函数，调用的时候，选择调用的不是属性而是另一个新的函数

DOM 节点

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

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

插入节点

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

插入节点

在已有的 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 在父节点中任意子节点之前插入新节点

删除节点

删除现有的 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 获取后一个节点，以相对位置查找节点，实际应用中非常灵活。

本文链接：https://blog.csdn.net/Chen_072_11/article/details/130492829

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

linux之笔记_linux 0775十六進制-程序员宅基地

文章浏览阅读263次。授课环境：结束程序运行: ctrl + c 共享目录(工作目录): /kyo /Videos 访问共享目录流程: 是否能连通服务器 ping 3.3.3.9 是否服务器开启共享 showmount -e 3.3.3.9 挂载共享目录到本地: _linux 0775十六進制

普通屏幕已过时？裸眼3D屏幕显示效果更胜一筹！

与普通屏幕中播放的视频相对，裸眼3D屏幕需要先将裸眼3D视频分成两部分，分别呈现在左右两个视窗上，因此后者需要更高的分辨率，以及更精细的图像处理能力，以此使裸眼3D屏幕的画面展示效果更加细腻，进而加深每个物体和场景的深度感和空间感，让每个驻足于此的观众惊叹于裸眼3D屏幕的震撼视觉效果。另外，裸眼3D屏幕的色彩表现，也比大多的普通屏幕更加丰富和鲜艳，能够展现出电影级别的画面质量，总而言之，裸眼3D屏幕比之普通屏幕的显示效果，有着巨大的优势，这也是使裸眼3D成为重要显示技术的重要原因！

如何安全可控的进行跨区域数据交换，提高数据价值？

飞驰云联是中国领先的数据安全传输解决方案提供商，长期专注于安全可控、性能卓越的数据传输技术和解决方案，公司产品和方案覆盖了跨网跨区域的数据安全交换、供应链数据安全传输、数据传输过程的防泄漏、FTP的增强和国产化替代、文件传输自动化和传输集成等各种数据传输场景。飞驰云联主要服务于集成电路半导体、先进制造、高科技、金融、政府机构等行业的中大型客户，现有客户超过500家，其中500强和上市企业150余家，覆盖终端用户超过40万，每年通过飞驰云联平台进行数据传输和保护的文件量达到4.4亿个。

大语言模型与词向量表示

大语言模型的词向量表示由于其在预训练阶段学习到的通用语言特征，可以在多种NLP任务中作为强大的工具，提高任务的性能和准确性。大语言模型与词向量表示之间的关系是NLP领域的一个活跃研究方向，随着模型规模的增加和训练技术的改进，这些模型在理解和生成自然语言方面的能力不断提高。

基于django和vue的xdh官网设计_xdh实例-程序员宅基地

文章浏览阅读927次。前言本项目是使用三段分离的设计前台使用materialize框架搭建的前台页面,后端使用的django写的接口后台使用Amazon UI 模板搭建的界面,管理各个部分的内容项目环境python3.7.2django2.2.9vue axiosjQuerymaterializemysql摘要本设计采用前后端分离的设计模式,前端通过vue的axios发送ajax请求来..._xdh实例

树莓派python播放音频文件_树莓派开启声音及视频播放-程序员宅基地

文章浏览阅读2.7k次。什么？刚刚买回来点亮的树莓派是个哑巴？放音乐没声音，不是缺少输出设备，那就是默认设置不对啦。如何设置，并且可以让树莓派播放 1080p 的视频，看这里呀～连接输出设备首先，检查你树莓派的输出设备是否正确连接，不管是使用带有音响的显示器 HDMI 接口，还是 3.5mm 耳机或扬声器设备，确保他们正确连接并且供电正常。设定输出设备打开树莓派设置：sudo raspi-config进入 Advance..._树莓派播放不了音乐

随便推点

Xcode 15构建问题

将ENABLE_USER_SCRIPT_SANDBOXING设为“no”即可！

OpenVINO应用案例：部署YOLO模型到边缘计算摄像头_openvino yolo-程序员宅基地

文章浏览阅读2.8k次，点赞3次，收藏23次。一、实现路径通过OpenVINO部署YOLO模型到边缘计算摄像头，其实现路径为：训练(YOLO)->转换(OpenVINO)->部署运行(OpenNCC)。二、具体步骤1、训练YOLO模型1.1 安装环境依赖有关安装详情请参阅 https://github.com/AlexeyAB/darknet#requirements-for-windows-linux-and-macos 。1.2 编译训练工具git clone https://github.com/AlexeyAB/da_openvino yolo

数据污染对大型语言模型的潜在影响

总之，数据污染在LLMs中构成一个潜在的重要问题，可能影响它们在各种任务中的性能。它可能导致结果偏倚并削弱LLMs的真实有效性。通过识别和减轻数据污染，我们可以确保LLMs运行良好并产生准确的结果。现在是技术社区优先考虑数据完整性在LLMs的开发和利用中的时候了。通过这样做，我们可以确保LLMs产生无偏见且可靠的结果，这对于新技术和人工智能的发展至关重要。

PeLK: 大卷积核强势回归，高达101 × 101，提出了外围卷积

PeLK：超大卷积核，高达101*101！

/u5f20 之类的转中文_address":"cn|\u5e7f\u4e1c|\u4f5b\u5c71|none|chinan-程序员宅基地

文章浏览阅读7.3k次。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m..._address":"cn|\u5e7f\u4e1c|\u4f5b\u5c71|none|chinanet|0|0","content":{"addres

数字图像处理期末复习题_已知roberts算子的作用模板为-程序员宅基地

文章浏览阅读1.3w次，点赞28次，收藏367次。第一章引言一.填空题1.数字图像是用一个数字阵列来表示的图像。数字阵列中的每个数字，表示数字图像的一个最小单位，称为。2.数字图像处理可以理解为两个方面的操作：一是从图像到图像的处理，如图像增强等；二是，如图像测量等。3.数字图像处理可以理解为两个方面的操作：一是，如图像增强等；二是从图像到非图像的一种表示，如图像测量等。4.图像可以分为物理图像和虚拟图像两种。其中，采用数学的方法，将由概念形成的物体进行表示的图像是。5.数字图像处理包含很多方面的研究内容。其中，的目的是根据二维_已知roberts算子的作用模板为

DOM概述-程序员宅基地

DOM概述

什么是DOM

对象树化的DOM模型

DOM 节点

如何获取DOM元素

如何更改我们的DOM模型

常用属性修改

控制样式属性

事件

事件监听

事件类型

鼠标事件

键盘事件

焦点事件

文本框输入事件

事件对象

回调函数

DOM 节点

插入节点

插入节点

删除节点

查找节点

父子关系

兄弟关系

智能推荐

随便推点

推荐文章

热门文章

相关标签