dom基础
获取元素
根据 ID 获取
document.getElementById('id');
例
// 获取 id 为 "intro" 的 p 元素
const introElement = document.getElementById('intro');
根据标签名获取 （返回带有指定标签名的对象的集合）
document.getElementsByTagName('标签名');
例
// 获取所有 <a> 标签
const links = document.getElementsByTagName('a');
根据类名返回元素对象集合
document.getElementsByClassName(‘类名’)；
例
// 获取所有 class 包含 "highlight" 的元素
const highlightedElements = document.getElementsByClassName('highlight');
根据指定选择器返回第一个元素对象（里面的选择器需要加符号）
document.querySelector('选择器');
例
// 获取第一个 <h1> 标签
const firstH1 = document.querySelector('h1');
// 获取第一个 class 为 "box" 的元素（无论标签类型）
const firstBox = document.querySelector('.box'); 前面加 .
// 通过 ID 选择器获取元素
const submitBtn = document.querySelector('#submitBtn');
// 层级选择器：获取 .menu 下的 li 中的 a 标签（第一个）
const firstLink = document.querySelector('.menu li a');
// 类+标签组合：获取 li 中 class 为 active 的 a 标签
const activeLink = document.querySelector('li a.active');
根据指定选择器返回（所有）（里面的选择器需要加符号）
document.querySelectorAll('选择器');
事件基础
常见的鼠标事件
操作元素
改变元素内容
element.innerText
改变内容（纯文本，不解析标签）
例
<div id="box">原始内容</div>
const box = document.getElementById('box');
// 用 innerText 设置内容（包含 HTML 标签和换行）
box.innerText = '新内容：\n <strong>加粗文本</strong> \n 尾部内容';
最终页面显示效果：
新内容： <strong>加粗文本</strong> 尾部内容
element.innerHTML
改变内容（解析 HTML 标签，保留格式）
例
代码同上
最终页面显示效果：
新内容：
加粗文本
尾部内容
Src
<img id="myImg" src="default.jpg" alt="示例图片">
<script id="myScript" src="app.js"></script>
// 修改图片路径（切换图片）
const img = document.getElementById('myImg');
img.src = 'new.jpg'; // 图片会重新加载 new.jpg
Href
<a id="myLink" href="https://example.com">示例链接</a>
<link id="myStyle" rel="stylesheet" href="style.css">
// 修改超链接的目标地址
const link = document.getElementById('myLink');
link.href = "https://baidu.com";
Title
<button id="myBtn" title="点击提交表单">提交</button>
<a id="myLink" href="#" title="访问首页">首页</a>
// 给按钮添加提示文本
const btn = document.getElementById('myBtn');
btn.title = "点击后将提交数据并跳转"; // 鼠标悬停时显示此提示
案例1：密码框显示与不显示内容
原理：通过 flag 变量控制状态切换
<!-- 密码输入框 -->
<input type="password" id="password" placeholder="请输入密码">
<!-- 眼睛按钮 -->
<button id="toggleBtn">显示密码</button>
// 获取元素
const passwordInput = document.getElementById('password');
const toggleBtn = document.getElementById('toggleBtn');
// 定义 flag 变量：1 表示当前是密码框（默认状态），0 表示当前是文本框
let flag = 1;
// 给按钮绑定点击事件
toggleBtn.onclick = function() {
if (flag === 1) {
// 状态1：切换为文本框（显示明文）
passwordInput.type = 'text'; // 密码框变文本框
toggleBtn.textContent = '隐藏密码 ��️��️'; // 按钮文字切换
flag = 0; // 更新状态
} else {
// 状态0：切换为密码框（隐藏明文）
passwordInput.type = 'password'; // 文本框变密码框
toggleBtn.textContent = '显示密码 ��️'; // 按钮文字切换
flag = 1; // 更新状态
}
};
样式属性操作
JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
element.style 行内样式操作
text.style.fontSize = '20px';
text.style.backgroundColor = 'lightyellow';
element.className 类名样式操作
// 切换类名
if (text.className === 'default') {
text.className = 'highlight';
} else {
text.className = 'default';
}
案例2
点击页面中某个区域（class 为 baidu 的元素）内的图片，将整个页面的背景图设置为该图片。
// 1. 获取元素
// 先找到 class 为 "baidu" 的元素，再获取该元素内部所有 <img> 标签
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// 2. 给每个图片绑定点击事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
// 点击图片时，将页面背景图设置为当前点击图片的 src（图片路径）
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
自定义属性
element.属性 （内置属性值）
element.getAttribute('属性'); （主要获得自定义的属性）
element.setAttribute('属性', '值'); （主要设置自定义的属性）
element.removeAttribute('属性'); （移除属性）
设置H5自定义属性
使用 data- 作为前缀,能通过 dataset 来访问
data- 后的部分若有连字符（-），在 dataset 中会将连字符去掉，并把连字符后的首字母转为大写
标签特性：data-about 对应 dataset 属性：dataset.about
标签特性：data-order-state 对应 dataset 属性：dataset.orderState
节点操作
node.parentNode 返回某节点的父节点，最近的一个父节点
parentNode.children 只读属性，返回所有的子元素节点
parentNode.chilren[0] 第一个子元素节点
parentNode.firstChild 返回第一个子节点
parentNode.lastChild 返回最后一个子节点
parentNode.firstElementChild 返回第一个子元素节点
parentNode.lastElementChild 返回最后一个子元素节点
node.nextSibling 下一个兄弟节点
node.previousSibling 上一个兄弟节点
node.nextElementSibling 下一个兄弟元素节点
node.previousElementSibling 上一个兄弟元素节点
document.createElement('tagName') 创建节点
node.appendChild(child) 将一个节点添加到指定父节点的子节点列表末尾
node.insertBefore(child, 指定元素) 将一个节点添加到父节点的指定子节点前面
node.removeChild(child) 删除一个子节点，返回删除的节点
node.cloneNode() 复制节点
1. 如果括号参数为空或者为 false，只克隆复制节点本身，不克隆里面的子节点。
2. 如果括号参数为 true，会复制节点本身以及里面所有的子节点。