DomApi 有很多
本文列举一些较为常见的 Api
🔎Dom
Dom(Document Object Model)—文档对象模型
通过 Dom(文档对象模型), 可以把 html 上的每个标签映射到 JavaScript 中的一个对应对象
即
- 标签上显示的内容可通过 JavaScript 对象获取
- JavaScript 对象修改对应属性时会影响标签的展示
🔎Dom树
图片来自网络
- 文档, 一个页面就是一个文档, 使用 document 表示
- 元素, 页面中的所有标签称为元素, 使用 element 表示
- 节点, 页面中的所有内容称为节点(标签, 注释, 文本, 属性…), 使用 node 表示
🔎Dom—querySelector(获取元素)
获取单个元素querySelector(CSS选择器)
获取全部元素querySelectorAll(CSS选择器)
较为常见的CSS选择器
- 类选择器
- Id 选择器
- 后代选择器
- 标签选择器
举个栗子🌰
<body> <div class="class">abc</div> <div id="id">def</div> <h3> <span> <input type="text"> </span> </h3> <script> let elem1 = document.querySelector('.class'); // 类选择器 let elem2 = document.querySelector('#id'); // Id 选择器 let elem3 = document.querySelector('h3>span>input'); // 后代选择器 let elem4 = document.querySelector('input'); // 标签选择器 </script> </body>
注意🍂
当程序中出现多个相同 Id 时(其他同理), 使用querySelector(Id 选择器)会选择第一个出现的 Id
例如
<div id="id">aaa</div> <div id="id">bbb</div> <div id="id">ccc</div>
使用querySelector('#id')选择的内容为aaa
想要全部选中可以使用querySelectorAll('#id')
🔎事件
事件
针对用户操作进行的一些响应
事件的三要素
- 事件源: 哪个元素产生的事件
- 事件类型: 单击, 双击, 移动, 按键盘…
- 事件处理程序: 事件发生之后, 要执行哪个代码(要执行的代码是提前设定好的)
🔎操作元素
获取 / 修改元素内容
利用innerHTML获取 / 修改元素内容
innerHTML → 得到标签中的内容(开始标签和结束标签中间夹杂着的那部分)
举个栗子🌰
<p>hello</p>
利用innerHTML获取到的即为 hello
针对如下代码
利用innerHTML获取 / 修改元素内容
<body> <div class="box">abc</div> <script> let div = document.querySelector('.box'); div.onclick = function() { // 获取元素内容 console.log(div.innerHTML); // 修改元素内容 div.innerHTML += 'a'; } </script> </body>
获取 / 修改元素属性
HTML 标签的属性, 会映射到 JavaScript 对象中
通过console.dir()查看元素的属性
以图片为例
其中包含较多的属性
获取元素属性 → 获取图片的高度, 宽度, 标题…
修改元素属性 → 点击该图片时切换到预设的另一张图片
完整代码🍂
<body> <img src="4.png" title="金鱼姬"> <script> let img = document.querySelector('img'); // console.dir(img); img.onclick = function() { console.log(img.width); console.log(img.height); console.log(img.title); img.src="5.png"; } </script> </body>
获取 / 修改表单元素属性
表单元素(input, textarea, select…)有一些普通标签没有的属性
例如
- value, input 的值
- checked, 复选框中使用(表示默认被选中的状态)
- type, 种类(包括 button, checkbox, text, file…)
- …
获取 / 修改表单元素属性🍭
以 value 为例
在输入框输入一个数字后, 点击按钮
打印该数字(获取表单元素属性)
修改当前数字 + 1(修改表单元素属性)
<body> <input type="text"> <button>按钮</button> <script> let input = document.querySelector('input'); button.onclick = function() { input.value = parseInt(input.value) + 1; console.log(input.value); } </script> </body>
获取 / 修改样式属性
获取 / 修改样式属性分为 2 种
- 修改内联样式(修改 style 属性的值)
- 修改元素应用的 CSS 类名
修改内联样式
举个栗子🌰
一段文字的初始大小为 20px, 点击该文字其大小增加 10px
<body> <div style="font-size: 20px;">这是一个div, 点击之后字体放大</div> <script> let div = document.querySelector('div'); div.onclick = function() { let fontSize = div.style.fontSize; fontSize = parseInt(fontSize) + 10; div.style.fontSize = fontSize + 'px'; } </script> </body>
修改元素应用的 CSS 类名
举个栗子🌰
设计两种 CSS 样式, 分别是日间模式与夜间模式
初始化一个 div, 默认模式为日间模式, 点击时在两种模式之间切换
<body> <style> .light { /* 日间模式 */ color: antiquewhite; background-color: black; } .dark { /* 夜间模式 */ color: black; background-color: antiquewhite; } </style> <div class="light" style="font-size: 20px; height: 300px;">这是一个div</div> <script> let div = document.querySelector('div'); div.onclick = function() { div.className = div.className == "light" ? "dark" : "light"; } </script> </body>
🔎操作节点
新增节点
创建元素节点 → createElement() / 将新创建的节点挂到 Dom 树 → appendChild()
删除节点
从 Dom 树移除新创建的节点 → removeChild()
新增节点
新增节点分为 2 个步骤
- 创建元素节点
- 将新创建的节点挂到 Dom 树
举个栗子🌰
创建一个 div
创建元素节点为 input, 在 input 中输入 hello_bibubibu
将新创建的节点挂到 div
<body> <div class="one"> 这是一个 div </div> <script> let input = document.createElement('input'); // 输入框默认显示 hello_bibubibu input.value = 'hello_bibubibu'; let div = document.querySelector('.one'); div.appendChild(input); </script> </body>
删除节点
针对上述代码添加div.removeChild(input);即可
🔎总结
- 选中元素 →
querySelector()/querySelectorAll() - 事件(鼠标单击) →
onclick - 修改元素内容 →
innerHTML - 修改元素属性 → 利用
console.dir()查看元素属性 - 修改表单元素属性 →
value, checked, type... - 修改样式属性 → 内联样式 / 元素应用的 CSS 类名
- 创建元素 →
createElement() - 添加节点(将元素挂到 Dom 树) →
appendChild() - 删除节点(从 Dom 树移除元素) →
removeChild()
