\u53d8\u91cf\u7684\u58f0\u660e\u6709\u51e0\u79cd\u65b9\u5f0f，\u4f8b\u5982\u7528let，const\u3002\u5728\u4ee5\u524d\u7684\u7248\u672c\u8fd8\u7528var\u6765\u58f0\u660e<\/p>\n
var\u7684\u7279\u70b9：1\u3001\u5141\u8bb8\u91cd\u590d\u58f0\u660e\u00a0 2\u3001\u5b58\u5728\u53d8\u91cf\u63d0\u5347，\u5373\u53d8\u91cf\u53ef\u4ee5\u518d\u58f0\u660e\u524d\u4f7f\u7528<\/p>\n
\u7f3a\u70b9：1\u3001var \u58f0\u660e\u7684\u53d8\u91cf\u4f1a\u88ab\u63d0\u5347\u5230\u51fd\u6570\u6216\u5168\u5c40\u4f5c\u7528\u57df\u7684\u9876\u90e8，\u5bfc\u81f4\u53d8\u91cf\u5728\u58f0\u660e\u524d\u5c31\u53ef\u4ee5\u8bbf\u95ee，\u4f46\u503c\u4e3a undefined\u3002\u8fd9\u79cd\u884c\u4e3a\u5bb9\u6613\u5f15\u53d1\u903b\u8f91\u9519\u8bef<\/p>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 2\u3001var \u7684\u4f5c\u7528\u57df\u4ec5\u9650\u4e8e\u51fd\u6570\u6216\u5168\u5c40，\u800c\u975e\u5757\u7ea7（\u5982 if\u3001for \u7b49）\u3002\u8fd9\u4f1a\u5bfc\u81f4\u53d8\u91cf\u5728\u5757\u5916\u4ecd\u53ef\u8bbf\u95ee，\u53ef\u80fd\u5f15\u53d1\u610f\u5916\u8986\u76d6<\/p>\n
let\u7684\u7279\u70b9：1\u3001\u4e0d\u5141\u8bb8\u91cd\u590d\u58f0\u660e\u00a0 2\u3001\u4e0d\u5b58\u5728\u53d8\u91cf\u63d0\u5347，\u5fc5\u987b\u5148\u58f0\u660e\u540e\u4f7f\u7528<\/p>\n
const\u7684\u7279\u70b9：1\u3001\u5fc5\u987b\u521d\u59cb\u5316\u8d4b\u503c\u00a0 2\u3001\u5757\u7ea7\u4f5c\u7528\u57df\u00a0 3\u3002\u9002\u5408\u7528\u4e8e\u58f0\u660e\u4e0d\u53ef\u53d8\u7684\u5e38\u91cf\u6216\u5f15\u7528\u7c7b\u578b<\/p>\n
\u5728\u6b64\u63a8\u8350\u4f7f\u7528const\u6765\u58f0\u660e\u53d8\u91cf，\u53ef\u4ee5\u907f\u514d\u610f\u5916\u4fee\u6539，\u6216\u8005\u4f7f\u7528let，var\u4e0d\u63a8\u8350\u4f7f\u7528<\/p>\n
\u5728CSS\u4e2d\u6211\u4eec\u4e00\u822c\u4f7f\u7528document.querySelector('selector')\u83b7\u53d6\u7b2c\u4e00\u4e2a\u5339\u914d\u5143\u7d20，\u6216document.querySelectorAll('selector')\u83b7\u53d6\u6240\u6709\u5339\u914d\u5143\u7d20（\u9759\u6001NodeList），\u652f\u6301\u590d\u6742CSS\u9009\u62e9\u5668<\/p>\n
const firstItem = document.querySelector('.list-item');
\nconst allItems = document.querySelectorAll('.list-item');<\/p>\n
\u4f7f\u7528#\u524d\u7f00\u5339\u914d\u5143\u7d20\u7684id\u5c5e\u6027<\/p>\n
const name = document.querSelector('#username')<\/p>\n
\u76f4\u63a5\u4f7f\u7528HTML\u7c7b\u540d<\/p>\n
const body = document.querSelector('body')<\/p>\n
\u901a\u8fc7ID\u83b7\u53d6\u5143\u7d20
\n\u4f7f\u7528document.getElementById('id')\u65b9\u6cd5，\u4f20\u5165\u5143\u7d20\u7684ID\u5b57\u7b26\u4e32\u3002\u8fd4\u56de\u5339\u914dID\u7684\u7b2c\u4e00\u4e2a\u5143\u7d20，\u82e5\u4e0d\u5b58\u5728\u5219\u8fd4\u56denull<\/p>\n
const element = document.getElementById('header');<\/p>\n
\u901a\u8fc7\u7c7b\u540d\u83b7\u53d6\u5143\u7d20
\n\u4f7f\u7528document.getElementsByClassName('class')\u65b9\u6cd5，\u4f20\u5165\u7c7b\u540d\u5b57\u7b26\u4e32\u3002\u8fd4\u56de\u5305\u542b\u6240\u6709\u5339\u914d\u7c7b\u7684\u52a8\u6001HTML\u96c6\u5408（\u7c7b\u6570\u7ec4\u5bf9\u8c61）<\/p>\n
const elements = document.getElementsByClassName('menu-item');<\/p>\n
\u901a\u8fc7\u6807\u7b7e\u540d\u83b7\u53d6\u5143\u7d20
\n\u4f7f\u7528document.getElementsByTagName('tag')\u65b9\u6cd5，\u4f20\u5165\u6807\u7b7e\u540d（\u5982div）\u3002\u8fd4\u56de\u5305\u542b\u6240\u6709\u5339\u914d\u6807\u7b7e\u7684\u52a8\u6001HTML\u96c6\u5408<\/p>\n
const divs = document.getElementsByTagName('div');<\/p>\n
\u4fee\u6539DOM\u5143\u7d20\u5185\u5bb9\u4e3b\u8981\u901a\u8fc7innerHTML\u3001textContent\u548cinnerText\u5c5e\u6027\u5b9e\u73b0\u3002innerHTML\u53ef\u89e3\u6790HTML\u6807\u7b7e，\u9002\u5408\u52a8\u6001\u63d2\u5165\u5e26\u683c\u5f0f\u7684\u5185\u5bb9\u3002textContent\u4f1a\u539f\u6837\u663e\u793a\u6587\u672c，\u5ffd\u7565HTML\u6807\u7b7e\u3002innerText\u4f1a\u8003\u8651CSS\u6837\u5f0f，\u4e0d\u663e\u793a\u9690\u85cf\u5143\u7d20\u5185\u5bb9\u3002<\/p>\n
\/\/ \u4fee\u6539\u5143\u7d20\u5185\u5bb9\u793a\u4f8b
\nconst element = document.getElementById('target');
\nelement.innerHTML = '<strong>\u52a0\u7c97\u6587\u672c<\/strong>'; \/\/ \u89e3\u6790HTML
\nelement.textContent = '<strong>\u7eaf\u6587\u672c\u663e\u793a<\/strong>'; \/\/ \u4e0d\u89e3\u6790HTML<\/p>\n
\u6807\u51c6HTML\u5c5e\u6027\u53ef\u901a\u8fc7\u5143\u7d20\u5bf9\u8c61\u76f4\u63a5\u8bbf\u95ee\u6216\u4f7f\u7528setAttribute\u65b9\u6cd5\u3002\u81ea\u5b9a\u4e49\u5c5e\u6027\u9700\u901a\u8fc7dataset\u6216setAttribute\u64cd\u4f5c\u3002\u79fb\u9664\u5c5e\u6027\u4f7f\u7528removeAttribute\u65b9\u6cd5<\/p>\n
\/\/ \u4fee\u6539\u6807\u51c6\u5c5e\u6027
\nconst img = document.querySelector('img');
\nimg.src = 'new-image.jpg'; \/\/ \u76f4\u63a5\u5c5e\u6027\u8d4b\u503c
\nimg.setAttribute('alt', '\u65b0\u56fe\u7247\u63cf\u8ff0'); \/\/ \u901a\u7528\u65b9\u6cd5<\/p>\n
\/\/ \u64cd\u4f5c\u81ea\u5b9a\u4e49\u5c5e\u6027
\nimg.setAttribute('data-custom', 'value');\u7b2c\u4e00\u4e2a\u4e3a\u8981\u8bbe\u7f6e\u7684\u5c5e\u6027\u540d\u79f0，\u7b2c\u4e8c\u4e2a\u4e3a\u8981\u4e3a\u7b2c\u4e00\u4e2a\u53c2\u6570\u8bbe\u7f6e\u7684\u503c
\nconst customValue = img.dataset.custom; \/\/ \u901a\u8fc7dataset\u8bbf\u95ee<\/p>\n
\u901a\u8fc7querySelectorAll\u83b7\u53d6\u8282\u70b9\u5217\u8868\u540e，\u53ef\u4ee5\u4f7f\u7528for\u5faa\u73af\u6765\u5faa\u73af\u5904\u7406<\/p>\n
\u901a\u8fc7classListAPI\u53ef\u7cbe\u786e\u63a7\u5236CSS\u7c7b，\u652f\u6301add\u3001remove\u3001toggle\u7b49\u65b9\u6cd5\u3002\u76f4\u63a5\u4fee\u6539className\u4f1a\u8986\u76d6\u5168\u90e8\u7c7b\u540d<\/p>\n
add(className)\u00a0\u00a0 \u00a0\u6dfb\u52a0\u4e00\u4e2a \/ \u591a\u4e2a\u7c7b\u540d（\u91cd\u590d\u6dfb\u52a0\u65e0\u6548\u679c）\u00a0 \u00a0\u00a0
\nremove(className)\u00a0\u00a0 \u00a0\u5220\u9664\u4e00\u4e2a \/ \u591a\u4e2a\u7c7b\u540d（\u5220\u9664\u4e0d\u5b58\u5728\u7684\u7c7b\u540d\u65e0\u62a5\u9519）\u00a0 \u00a0
\ntoggle(className)\u00a0\u00a0 \u00a0\u5207\u6362\u7c7b\u540d（\u5b58\u5728\u5219\u5220\u9664，\u4e0d\u5b58\u5728\u5219\u6dfb\u52a0）\u00a0
\ncontains(className)\u00a0\u00a0 \u00a0\u5224\u65ad\u662f\u5426\u5305\u542b\u67d0\u4e2a\u7c7b\u540d（\u8fd4\u56de\u5e03\u5c14\u503c）<\/p>\n
const box = document.getElementById('box');
\nbox.classList.add('active'); \/\/ \u6dfb\u52a0\u7c7b
\nbox.classList.remove('inactive'); \/\/ \u79fb\u9664\u7c7b
\nbox.classList.toggle('visible'); \/\/ \u5207\u6362\u7c7b
\nbox.className = 'new-class';\/\/\u66f4\u6362\u7c7b<\/p>\n
\u8fdb\u9636\u7528\u6cd5：replace \u66ff\u6362\u7c7b\u540d<\/p>\n
classList.replace(oldClass, newClass) \u53ef\u4ee5\u76f4\u63a5\u66ff\u6362\u67d0\u4e2a\u7c7b\u540d，\u9002\u5408\u9700\u8981 \u201c\u5207\u6362\u6837\u5f0f\u7c7b\u578b\u201d \u7684\u573a\u666f<\/p>\n
\/\/ \u5c06box\u7684big\u7c7b\u66ff\u6362\u4e3asmall\u7c7b
\nbox.classList.replace('big', 'small');
\nconsole.log(box.className); \/\/ \u8f93\u51fa：box small<\/p>\n
\u5bf9\u6bd4\u4f20\u7edf className（\u4e3a\u4ec0\u4e48\u63a8\u8350 classList）<\/p>\n
\u76f4\u63a5\u4fee\u6539 className \u9700\u8981\u624b\u52a8\u62fc\u63a5\u5b57\u7b26\u4e32，\u5bb9\u6613\u51fa\u9519，\u800c classList \u66f4\u5b89\u5168：<\/p>\n
\/\/ \u4f20\u7edf\u65b9\u5f0f（\u7f3a\u70b9：\u4f1a\u8986\u76d6\u539f\u6709\u7c7b\u540d）
\nbox.className = 'active'; \/\/ \u539f\u672c\u7684box\u7c7b\u4f1a\u88ab\u8986\u76d6，\u53ea\u5269active<\/p>\n
\/\/ \u6539\u8fdb\u7684\u4f20\u7edf\u65b9\u5f0f（\u9700\u8981\u624b\u52a8\u62fc\u63a5，\u9ebb\u70e6）
\nbox.className = box.className + ' active'; \/\/ \u9700\u6ce8\u610f\u7a7a\u683c<\/p>\n
\/\/ classList\u65b9\u5f0f（\u63a8\u8350：\u4fdd\u7559\u539f\u6709\u7c7b\u540d，\u4ec5\u6dfb\u52a0）
\nbox.classList.add('active'); \/\/ \u539f\u6709\u7c7b\u540d\u4e0d\u53d8，\u65b0\u589eactive<\/p>\n
\u6ce8\u610f\u4e8b\u9879
\n1.classList \u64cd\u4f5c\u7684\u662f\u7c7b\u540d（\u5bf9\u5e94 CSS \u6837\u5f0f），\u4e0d\u662f DOM \u7684\u5176\u4ed6\u5c5e\u6027（\u5982 id\u3001data-*）；
\n2.\u7c7b\u540d\u53c2\u6570\u4e0d\u8981\u52a0 .（\u6bd4\u5982\u5199 add('active') \u800c\u975e add('.active')）；
\n3.\u6240\u6709\u65b9\u6cd5\u90fd\u652f\u6301\u4f20\u5165\u591a\u4e2a\u7c7b\u540d（\u7528\u9017\u53f7\u5206\u9694），\u6bd4\u5982 add('a', 'b', 'c')；
\n4.\u517c\u5bb9\u6027：\u652f\u6301\u6240\u6709\u73b0\u4ee3\u6d4f\u89c8\u5668，IE10+ \u4e5f\u517c\u5bb9（\u5b8c\u5168\u6ee1\u8db3\u65e5\u5e38\u5f00\u53d1）<\/p>\n
if (element.classList.contains('active')) {
\n console.log('Element has active class');
\n}<\/p>\n
\u8868\u5355\u63a7\u4ef6\u5982input\u3001select\u7b49\u9700\u901a\u8fc7value\u5c5e\u6027\u64cd\u4f5c\u3002\u590d\u9009\u6846\u548c\u5355\u9009\u6309\u94ae\u9700\u68c0\u67e5checked\u5c5e\u6027<\/p>\n
const input = document.getElementById('username');
\ninput.value = '\u65b0\u7528\u6237'; \/\/ \u4fee\u6539\u8f93\u5165\u503c<\/p>\n
const checkbox = document.getElementById('agree');
\ncheckbox.checked = true; \/\/ \u9009\u4e2d\u590d\u9009\u6846<\/p>\n
\u5728 HTML \u548c JavaScript \u4e2d，\u53ef\u4ee5\u901a\u8fc7\u00a0style\u00a0\u5c5e\u6027\u76f4\u63a5\u4fee\u6539\u5143\u7d20\u7684\u6837\u5f0f\u3002\u8fd9\u79cd\u65b9\u5f0f\u9002\u7528\u4e8e\u52a8\u6001\u8c03\u6574\u6837\u5f0f\u6216\u8986\u76d6\u5185\u8054\u6837\u5f0f<\/p>\n
element.style.property = value;<\/p>\n
<!DOCTYPE html>
\n<html>
\n<body>
\n <div id="myBox" style="width: 100px; height: 100px; border: 1px solid #000;">\u6d4b\u8bd5\u76d2\u5b50<\/div>
\n <button onclick="changeStyle()">\u4fee\u6539\u6837\u5f0f<\/button><\/p>\n
<script>
\n const box = document.getElementById('myBox');<\/p>\n
function changeStyle() {
\n \/\/ 1. \u4fee\u6539\u5355\u4e2a\u6837\u5f0f（\u9a7c\u5cf0\u547d\u540d）
\n box.style.backgroundColor = 'red'; \/\/ \u80cc\u666f\u53d8\u7ea2<\/p>\n
\/\/ 2. \u4fee\u6539\u591a\u4e2a\u6837\u5f0f（\u76f4\u63a5\u94fe\u5f0f\/\u9010\u4e2a\u8d4b\u503c）
\n box.style.width = '200px'; \/\/ \u5bbd\u5ea6200px
\n box.style.height = '200px'; \/\/ \u9ad8\u5ea6200px
\n box.style.borderRadius = '10px'; \/\/ \u5706\u89d210px
\n box.style.color = 'white'; \/\/ \u6587\u5b57\u767d\u8272
\n box.style.fontSize = '16px'; \/\/ \u5b57\u4f53\u5927\u5c0f16px<\/p>\n
\/\/ 3. \u6e05\u7a7a\u5355\u4e2a\u6837\u5f0f（\u8bbe\u4e3a\u7a7a\u5b57\u7b26\u4e32）
\n \/\/ box.style.border = '';
\n }
\n <\/script>
\n<\/body>
\n<\/html><\/p>\n
\u5e38\u89c1\u6837\u5f0f\u5c5e\u6027：<\/p>\n
\u53ef\u4ee5\u901a\u8fc7 JavaScript \u83b7\u53d6 DOM \u5143\u7d20\u5e76\u76f4\u63a5\u4fee\u6539\u5176\u00a0style\u00a0\u5c5e\u6027<\/p>\n
const element = document.getElementById("myElement");
\nelement.style.color = "red";
\nelement.style.fontSize = "16px";<\/p>\n
\u65b9\u6cd5 1：\u901a\u8fc7\u5143\u7d20 ID \u76f4\u63a5\u83b7\u53d6（\u6700\u7b80\u5355）
\n\u8fd9\u662f\u6700\u76f4\u89c2\u7684\u65b9\u5f0f，\u7ed9\u8868\u5355\u5143\u7d20\u8bbe\u7f6e\u552f\u4e00 id，\u7136\u540e\u7528 document.getElementById() \u83b7\u53d6\u5143\u7d20，\u518d\u901a\u8fc7 .value \u5c5e\u6027\u62ff\u5230\u503c<\/p>\n
<!DOCTYPE html>
\n<html>
\n<body>
\n <form>
\n <label>\u7528\u6237\u540d：<\/label>
\n <input type="text" id="username"><br><\/p>\n
<label>\u5bc6\u7801：<\/label>
\n <input type="password" id="password"><br><\/p>\n
<label>\u6027\u522b：<\/label>
\n <input type="radio" name="gender" id="male" value="\u7537">\u7537
\n <input type="radio" name="gender" id="female" value="\u5973">\u5973<br><\/p>\n
<button type="button" onclick="getFormValueById()">\u83b7\u53d6\u503c<\/button>
\n <\/form><\/p>\n
<script>
\n function getFormValueById() {
\n \/\/ \u83b7\u53d6\u8f93\u5165\u6846\u3001\u5bc6\u7801\u6846\u7684\u503c
\n const username = document.getElementById('username').value;
\n const password = document.getElementById('password').value;<\/p>\n
\/\/ \u83b7\u53d6\u5355\u9009\u6846\u7684\u503c（\u9700\u8981\u5224\u65ad\u54ea\u4e2a\u88ab\u9009\u4e2d）
\n const male = document.getElementById('male');
\n const female = document.getElementById('female');
\n const gender = male.checked ? male.value : female.checked ? female.value : '\u672a\u9009\u62e9';<\/p>\n
\/\/ \u6253\u5370\u7ed3\u679c
\n console.log('\u7528\u6237\u540d：', username);
\n console.log('\u5bc6\u7801：', password);
\n console.log('\u6027\u522b：', gender);
\n }
\n <\/script>
\n<\/body>
\n<\/html><\/p>\n
\u65b9\u6cd5 2：\u901a\u8fc7\u8868\u5355\u5bf9\u8c61\u83b7\u53d6（\u66f4\u89c4\u8303）<\/p>\n
\u5148\u83b7\u53d6\u6574\u4e2a\u8868\u5355\u5bf9\u8c61，\u518d\u901a\u8fc7\u5143\u7d20\u7684 name \u5c5e\u6027（\u8868\u5355\u5143\u7d20\u7684\u6838\u5fc3\u6807\u8bc6）\u83b7\u53d6\u5bf9\u5e94\u7684\u503c，\u9002\u5408\u8868\u5355\u5143\u7d20\u8f83\u591a\u7684\u573a\u666f\u3002<\/p>\n
<!DOCTYPE html>
\n<html>
\n<body>
\n <form id="userForm">
\n <label>\u7528\u6237\u540d：<\/label>
\n <input type="text" name="username"><br><\/p>\n
<label>\u7231\u597d：<\/label>
\n <input type="checkbox" name="hobby" value="\u8bfb\u4e66">\u8bfb\u4e66
\n <input type="checkbox" name="hobby" value="\u8fd0\u52a8">\u8fd0\u52a8
\n <input type="checkbox" name="hobby" value="\u6e38\u620f">\u6e38\u620f<br><\/p>\n
<label>\u57ce\u5e02：<\/label>
\n <select name="city">
\n <option value="">\u8bf7\u9009\u62e9<\/option>
\n <option value="\u5317\u4eac">\u5317\u4eac<\/option>
\n <option value="\u4e0a\u6d77">\u4e0a\u6d77<\/option>
\n <\/select><br><\/p>\n
<button type="button" onclick="getFormValueByForm()">\u83b7\u53d6\u503c<\/button>
\n <\/form><\/p>\n
<script>
\n function getFormValueByForm() {
\n \/\/ \u83b7\u53d6\u8868\u5355\u5bf9\u8c61
\n const form = document.getElementById('userForm');<\/p>\n
\/\/ \u83b7\u53d6\u666e\u901a\u8f93\u5165\u6846\u3001\u4e0b\u62c9\u6846\u7684\u503c（\u901a\u8fc7name）
\n const username = form.username.value;
\n const city = form.city.value;<\/p>\n
\/\/ \u83b7\u53d6\u590d\u9009\u6846\u7684\u503c（\u9700\u8981\u904d\u5386\u5224\u65ad\u9009\u4e2d\u72b6\u6001）
\n const hobbies = [];
\n form.hobby.forEach(item => {
\n if (item.checked) {
\n hobbies.push(item.value);
\n }
\n });<\/p>\n
console.log('\u7528\u6237\u540d：', username);
\n console.log('\u57ce\u5e02：', city);
\n console.log('\u7231\u597d：', hobbies);
\n }
\n <\/script>
\n<\/body>
\n<\/html><\/p>\n
\n\u81ea\u5b9a\u4e49\u5c5e\u6027\u5fc5\u987b\u4ee5 data- \u4e3a\u524d\u7f00，\u540e\u9762\u53ef\u4ee5\u8ddf\u4efb\u610f\u540d\u79f0（\u5efa\u8bae\u5c0f\u5199\u3001\u7528\u8fde\u5b57\u7b26\u5206\u9694），\u76f4\u63a5\u5199\u5728 HTML \u5143\u7d20\u6807\u7b7e\u91cc\u5373\u53ef\u3002<\/p>\n
<!DOCTYPE html>
\n<html>
\n<body>
\n <!– \u5355\u4e2a\u81ea\u5b9a\u4e49\u5c5e\u6027 –>
\n <div id="user" data-id="1001">\u7528\u6237\u4fe1\u606f<\/div><\/p>\n
<!– \u591a\u4e2a\u81ea\u5b9a\u4e49\u5c5e\u6027 –>
\n <ul>
\n <li data-product-id="888" data-product-name="\u624b\u673a" data-price="2999">\u667a\u80fd\u624b\u673a<\/li>
\n <li data-product-id="999" data-product-name="\u7535\u8111" data-price="5999">\u7b14\u8bb0\u672c\u7535\u8111<\/li>
\n <\/ul><\/p>\n
<!– \u5e26\u8fde\u5b57\u7b26\u7684\u81ea\u5b9a\u4e49\u5c5e\u6027（\u63a8\u8350\u547d\u540d\u65b9\u5f0f） –>
\n <button data-user-status="active" data-user-role="admin">\u64cd\u4f5c\u6309\u94ae<\/button>
\n<\/body>
\n<\/html><\/p>\n
\u6709\u4e24\u79cd\u4e3b\u6d41\u65b9\u5f0f，\u63a8\u8350\u4f7f\u7528 dataset（\u66f4\u7b80\u6d01\u3001\u7b26\u5408 H5 \u89c4\u8303）\u3002<\/p>\n
\u65b9\u5f0f 1：\u4f7f\u7528 dataset（\u63a8\u8350）<\/p>\n
dataset \u662f HTML5 \u4e3a\u5143\u7d20\u65b0\u589e\u7684\u5c5e\u6027，\u4f1a\u81ea\u52a8\u6536\u96c6\u6240\u6709 data-* \u5c5e\u6027，\u5e76\u4e14：<\/p>\n
\u8be5\u56fe\u7d27\u63a5\u4e0a\u4e00\u5f20\u56fe
\n<script>
\n \/\/ 1. \u83b7\u53d6\u5355\u4e2a\u5143\u7d20\u7684\u81ea\u5b9a\u4e49\u5c5e\u6027
\n const userDiv = document.getElementById('user');
\n \/\/ \u83b7\u53d6 data-id
\n console.log(userDiv.dataset.id); \/\/ \u8f93\u51fa：1001<\/p>\n
\/\/ 2. \u83b7\u53d6\u5e26\u8fde\u5b57\u7b26\u7684\u81ea\u5b9a\u4e49\u5c5e\u6027（\u81ea\u52a8\u8f6c\u9a7c\u5cf0）
\n const btn = document.querySelector('button');
\n console.log(btn.dataset.userStatus); \/\/ \u8f93\u51fa：active
\n console.log(btn.dataset.userRole); \/\/ \u8f93\u51fa：admin<\/p>\n
\/\/ 3. \u8bbe\u7f6e\u81ea\u5b9a\u4e49\u5c5e\u6027
\n userDiv.dataset.name = '\u5f20\u4e09'; \/\/ \u76f8\u5f53\u4e8e\u6dfb\u52a0 data-name="\u5f20\u4e09"
\n userDiv.dataset.age = 25; \/\/ \u76f8\u5f53\u4e8e\u6dfb\u52a0 data-age="25"
\n console.log(userDiv.dataset.name); \/\/ \u8f93\u51fa：\u5f20\u4e09<\/p>\n
\/\/ 4. \u904d\u5386\u6240\u6709\u81ea\u5b9a\u4e49\u5c5e\u6027
\n const productLi = document.querySelector('li');
\n for (let key in productLi.dataset) {
\n console.log(key + ': ' + productLi.dataset[key]);
\n \/\/ \u8f93\u51fa：productId: 888\u3001productName: \u624b\u673a\u3001price: 2999
\n }<\/p>\n
\/\/ 5. \u5220\u9664\u81ea\u5b9a\u4e49\u5c5e\u6027
\n delete userDiv.dataset.age; \/\/ \u79fb\u9664 data-age \u5c5e\u6027
\n console.log(userDiv.dataset.age); \/\/ \u8f93\u51fa：undefined
\n<\/script><\/p>\n
JavaScript \u63d0\u4f9b\u4e86\u4e24\u79cd\u6838\u5fc3\u5b9a\u65f6\u5668\u51fd\u6570，\u90fd\u5c5e\u4e8e window \u5bf9\u8c61（\u6d4f\u89c8\u5668\u73af\u5883），\u5206\u522b\u7528\u4e8e\u4e00\u6b21\u6027\u5ef6\u65f6\u6267\u884c\u548c\u5468\u671f\u6027\u91cd\u590d\u6267\u884c<\/p>\n
setTimeout() \u7528\u4e8e\u6307\u5b9a\u4e00\u6bb5\u65f6\u95f4\u540e\u6267\u884c\u4e00\u6b21\u67d0\u4e2a\u51fd\u6570 \/ \u4ee3\u7801，\u6267\u884c\u540e\u5b9a\u65f6\u5668\u81ea\u52a8\u5931\u6548<\/p>\n
\u8bed\u6cd5：<\/p>\n
\/\/ \u57fa\u7840\u8bed\u6cd5
\nlet timerId = setTimeout(callback, delay, param1, param2, …);<\/p>\n
callback：\u5ef6\u65f6\u540e\u8981\u6267\u884c\u7684\u51fd\u6570 \/ \u4ee3\u7801\u5b57\u7b26\u4e32（\u4e0d\u63a8\u8350\u5b57\u7b26\u4e32）
\ndelay：\u5ef6\u65f6\u65f6\u95f4（\u6beb\u79d2，1 \u79d2 = 1000 \u6beb\u79d2），\u6700\u5c0f\u7ea6 4ms（\u6d4f\u89c8\u5668\u9650\u5236）
\nparam1…：\u4f20\u7ed9\u56de\u8c03\u51fd\u6570\u7684\u53c2\u6570（\u53ef\u9009）
\ntimerId：\u5b9a\u65f6\u5668\u552f\u4e00\u6807\u8bc6（\u6570\u5b57），\u7528\u4e8e\u540e\u7eed\u505c\u6b62\u5b9a\u65f6\u5668<\/p>\n
\u793a\u4f8b\u4ee3\u7801<\/p>\n
<!DOCTYPE html>
\n<html>
\n<body>
\n <button onclick="stopMyTimeout()">\u505c\u6b62\u5ef6\u65f6\u4efb\u52a1<\/button><\/p>\n
<script>
\n \/\/ \u793a\u4f8b1：\u57fa\u7840\u7528\u6cd5（3\u79d2\u540e\u6267\u884c）
\n const timer1 = setTimeout(() => {
\n alert('3\u79d2\u5230\u4e86！');
\n }, 3000);<\/p>\n
\/\/ \u793a\u4f8b2：\u5e26\u53c2\u6570\u7684\u56de\u8c03\u51fd\u6570
\n const timer2 = setTimeout((name, age) => {
\n console.log(`\u4f60\u597d${name}，\u5e74\u9f84${age}`); \/\/ \u8f93\u51fa：\u4f60\u597d\u5f20\u4e09，\u5e74\u9f8425
\n }, 2000, '\u5f20\u4e09', 25);<\/p>\n
\/\/ \u505c\u6b62\u5ef6\u65f6\u4efb\u52a1
\n function stopMyTimeout() {
\n clearTimeout(timer1); \/\/ \u6e05\u9664timer1，alert\u4e0d\u4f1a\u5f39\u51fa
\n console.log('\u5ef6\u65f6\u4efb\u52a1\u5df2\u505c\u6b62');
\n }
\n <\/script>
\n<\/body>
\n<\/html><\/p>\n
\nsetInterval() \u7528\u4e8e\u6bcf\u9694\u6307\u5b9a\u65f6\u95f4\u91cd\u590d\u6267\u884c\u67d0\u4e2a\u51fd\u6570 \/ \u4ee3\u7801，\u76f4\u5230\u624b\u52a8\u505c\u6b62<\/p>\n
\u8bed\u6cd5：<\/p>\n
let intervalId = setInterval(callback, delay, param1, param2, …);<\/p>\n
\u53c2\u6570\u542b\u4e49\u548c setTimeout() \u4e00\u81f4，\u533a\u522b\u662f callback \u4f1a\u91cd\u590d\u6267\u884c<\/p>\n
\u793a\u4f8b\u4ee3\u7801：<\/p>\n
<!DOCTYPE html>
\n<html>
\n<body>
\n <p>\u5012\u8ba1\u65f6：<span id="count">10<\/span> \u79d2<\/p>
\n <button onclick="stopMyInterval()">\u505c\u6b62\u5012\u8ba1\u65f6<\/button><\/p>\n
<script>
\n let count = 10;
\n const countSpan = document.getElementById('count');<\/p>\n
\/\/ \u793a\u4f8b：\u6bcf\u79d2\u6267\u884c\u4e00\u6b21\u5012\u8ba1\u65f6
\n const intervalId = setInterval(() => {
\n count–;
\n countSpan.textContent = count;<\/p>\n
\/\/ \u5012\u8ba1\u65f6\u7ed3\u675f\u540e\u81ea\u52a8\u505c\u6b62
\n if (count <= 0) {
\n clearInterval(intervalId);
\n alert('\u5012\u8ba1\u65f6\u7ed3\u675f！');
\n }
\n }, 1000);<\/p>\n
\/\/ \u624b\u52a8\u505c\u6b62\u5468\u671f\u6027\u4efb\u52a1
\n function stopMyInterval() {
\n clearInterval(intervalId);
\n countSpan.textContent = '\u5df2\u505c\u6b62';
\n }
\n <\/script>
\n<\/body>
\n<\/html><\/p>\n
\nJavaScript \u662f\u5355\u7ebf\u7a0b\u7684，\u5b9a\u65f6\u5668\u7684 delay \u4e0d\u662f \u201c\u7edd\u5bf9\u6267\u884c\u65f6\u95f4\u201d，\u800c\u662f \u201c\u6700\u65e9\u6267\u884c\u65f6\u95f4\u201d\u2014\u2014 \u5982\u679c\u4e3b\u7ebf\u7a0b\u6709\u8017\u65f6\u4efb\u52a1（\u5982\u590d\u6742\u8ba1\u7b97），\u5b9a\u65f6\u5668\u4f1a\u7b49\u5f85\u4e3b\u7ebf\u7a0b\u7a7a\u95f2\u540e\u624d\u6267\u884c<\/p>\n
\u793a\u4f8b：<\/p>\n
\/\/ \u770b\u4f3c1\u79d2\u540e\u6267\u884c，\u4f46\u5b9e\u9645\u4f1a\u7b495\u79d2（\u56e0\u4e3aalert\u963b\u585e\u4e86\u4e3b\u7ebf\u7a0b）
\nsetTimeout(() => {
\n console.log('1\u79d2\u5230\u4e86？');
\n}, 1000);<\/p>\n
\/\/ \u963b\u585e\u4e3b\u7ebf\u7a0b5\u79d2
\nalert('\u8bf7\u7b49\u5f855\u79d2\u540e\u5173\u95ed');<\/p>\n
\u9519\u8bef\u793a\u4f8b：<\/p>\n
\/\/ \u9519\u8bef：timerId\u662f\u533f\u540d\u7684，\u65e0\u6cd5\u6e05\u9664
\nsetTimeout(() => {}, 1000);
\n\/\/ \u6b63\u786e：\u4fdd\u5b58timerId
\nconst timerId = setTimeout(() => {}, 1000);
\nclearTimeout(timerId);<\/p>\n
\u603b\u7ed3：setTimeout：\u5ef6\u65f6\u4e00\u6b21\u6267\u884c，\u7528 clearTimeout(timerId) \u505c\u6b62，\u9002\u5408\u5355\u6b21\u5ef6\u65f6\u4efb\u52a1；
\nsetInterval：\u5468\u671f\u6027\u91cd\u590d\u6267\u884c，\u7528 clearInterval(intervalId) \u505c\u6b62，\u9002\u5408\u8f6e\u8be2 \/ \u5012\u8ba1\u65f6；
\n\u6838\u5fc3\u8981\u70b9：\u5b9a\u65f6\u5668\u662f\u5f02\u6b65\u7684，delay \u662f \u201c\u6700\u5c0f\u5ef6\u65f6\u201d；\u5fc5\u987b\u4fdd\u5b58 timerId \u624d\u80fd\u6e05\u9664，\u907f\u514d\u5185\u5b58\u6cc4\u6f0f<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6709\u5173\u53d8\u91cf\u7684\u58f0\u660e\u53d8\u91cf\u7684\u58f0\u660e\u6709\u51e0\u79cd\u65b9\u5f0f，\u4f8b\u5982\u7528let，const\u3002\u5728\u4ee5\u524d\u7684\u7248\u672c\u8fd8\u7528var\u6765\u58f0\u660evar\u7684\u7279\u70b9：1\u3001\u5141\u8bb8\u91cd\u590d\u58f0\u660e\u00a0 2\u3001\u5b58\u5728\u53d8\u91cf\u63d0\u5347，\u5373\u53d8\u91cf\u53ef\u4ee5\u518d\u58f0\u660e\u524d\u4f7f\u7528\u7f3a\u70b9：1\u3001var \u58f0\u660e\u7684\u53d8\u91cf\u4f1a\u88ab\u63d0\u5347\u5230\u51fd\u6570\u6216\u5168\u5c40\u4f5c\u7528\u57df\u7684\u9876\u90e8，\u5bfc\u81f4\u53d8\u91cf\u5728\u58f0\u660e\u524d\u5c31\u53ef\u4ee5\u8bbf\u95ee，\u4f46\u503c\u4e3a undefined\u3002\u8fd9\u79cd\u884c\u4e3a\u5bb9\u6613\u5f15\u53d1\u903b\u8f91\u9519\u8bef2\u3001var \u7684\u4f5c\u7528\u57df\u4ec5\u9650\u4e8e\u51fd\u6570\u6216\u5168\u5c40，\u800c\u975e\u5757\u7ea7（<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[187,87,190],"topic":[],"class_list":["post-77149","post","type-post","status-publish","format-standard","hentry","category-server","tag-javascript","tag-87","tag-190"],"yoast_head":"\n