manual-javascript

<!DOCTYPE HTML> <html lang="zh-hans" > <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>DOM · JavaScript</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="description" content=""> <meta name="generator" content="GitBook 3.2.3"> <meta name="author" content="Kuriv Vesti"> <link rel="stylesheet" href="../gitbook/style.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-back-to-top-button/plugin.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-chapter-fold/chapter-fold.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-lightbox/css/lightbox.min.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-prism/prism-okaidia.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-search-pro/search.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-splitter/splitter.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css"> <meta name="HandheldFriendly" content="true"/> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png"> <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon"> <link rel="next" href="事件监听.html" /> <link rel="prev" href="异步编程.html" /> <link rel="shortcut icon" href='../favicon.ico' type="image/x-icon"> <link rel="bookmark" href='../favicon.ico' type="image/x-icon"> <link rel="apple-touch-icon" href='../favicon.png'> <link rel="apple-touch-icon" sizes="120x120" href="../favicon-120x120.png"> <link rel="apple-touch-icon" sizes="180x180" href="../favicon-180x180.png"> </head> <body> <div class="book"> <div class="book-summary"> <div id="book-search-input" role="search"> <input type="text" placeholder="输入并搜索" /> </div> <nav role="navigation"> <ul class="summary"> <li class="chapter " data-level="1.1" data-path="../"> <a href="../"> JavaScript </a> <ul class="articles"> <li class="chapter " data-level="1.1.1" data-path="开始使用.html"> <a href="开始使用.html"> 开始使用 </a> </li> <li class="chapter " data-level="1.1.2" data-path="变量声明.html"> <a href="变量声明.html"> 变量声明 </a> </li> <li class="chapter " data-level="1.1.3" data-path="常量声明.html"> <a href="常量声明.html"> 常量声明 </a> </li> <li class="chapter " data-level="1.1.4" data-path="基本数据类型.html"> <a href="基本数据类型.html"> 基本数据类型 </a> </li> <li class="chapter " data-level="1.1.5" data-path="引用数据类型.html"> <a href="引用数据类型.html"> 引用数据类型 </a> </li> <li class="chapter " data-level="1.1.6" data-path="类型转换.html"> <a href="类型转换.html"> 类型转换 </a> </li> <li class="chapter " data-level="1.1.7" data-path="数组操作.html"> <a href="数组操作.html"> 数组操作 </a> </li> <li class="chapter " data-level="1.1.8" data-path="函数功能.html"> <a href="函数功能.html"> 函数功能 </a> </li> <li class="chapter " data-level="1.1.9" data-path="对象使用.html"> <a href="对象使用.html"> 对象使用 </a> </li> <li class="chapter " data-level="1.1.10" data-path="模块化.html"> <a href="模块化.html"> 模块化 </a> </li> <li class="chapter " data-level="1.1.11" data-path="异步编程.html"> <a href="异步编程.html"> 异步编程 </a> </li> <li class="chapter active" data-level="1.1.12" data-path="DOM.html"> <a href="DOM.html"> DOM </a> </li> <li class="chapter " data-level="1.1.13" data-path="事件监听.html"> <a href="事件监听.html"> 事件监听 </a> </li> <li class="chapter " data-level="1.1.14" data-path="本地存储.html"> <a href="本地存储.html"> 本地存储 </a> </li> <li class="chapter " data-level="1.1.15" data-path="会话存储.html"> <a href="会话存储.html"> 会话存储 </a> </li> </ul> </li> <li class="divider"></li> <li> <a href="https://www.gitbook.com" target="blank" class="gitbook-link"> 本书使用 GitBook 发布 </a> </li> </ul> </nav> </div> <div class="book-body"> <div class="body-inner"> <div class="book-header" role="navigation">  <h1> <a href=".." >DOM</a> </h1> </div> <div class="page-wrapper" tabindex="-1" role="main"> <div class="page-inner"> <div id="book-search-results"> <div class="search-noresults"> <section class="normal markdown-section"> <h1 id="dom">DOM</h1> 文档对象模型是用来呈现以及与任意 HTML 或 XML 文档交互的 API 。执行下面的代码，查找并获取符合条件的指定 DOM 元素。 <pre class="language-"><code class="lang-html"><!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript</title> </head> <body> <nav id="nav">Hello World!</nav> <div class="box">Hello JavaScript!</div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script type="text/javascript"> const nav = document.querySelector('#nav'); console.log(nav); const box = document.querySelector('.box'); console.log(box); const li = document.querySelector('ul li'); console.log(li); const li1 = document.querySelector('ul li:first-child'); console.log(li1); </script> </body> </html> </code></pre> 执行下面的代码，查找并获取符合条件的所有 DOM 元素。 <pre class="language-"><code class="lang-html"><!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript</title> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script type="text/javascript"> const li = document.querySelectorAll('ul li'); console.log(li); </script> </body> </html> </code></pre> 执行下面的代码，使用其他方式获取 DOM 元素。 <pre class="language-"><code class="lang-html"><!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript</title> </head> <body> <nav id="nav">Hello World!</nav> <div class="box">Hello JavaScript!</div> <div class="box">Hello JavaScript!</div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script type="text/javascript"> const nav = document.getElementById('nav'); console.log(nav); const box = document.getElementsByClassName('box'); console.log(box); const li = document.getElementsByTagName('li'); console.log(li); </script> </body> </html> </code></pre> 执行下面的代码，修改指定 DOM 元素中的 HTML 内容。 <pre class="language-"><code class="lang-html"><!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript</title> </head> <body> <nav id="nav">Hello World!</nav> <script type="text/javascript"> const nav = document.querySelector('#nav'); console.log(nav); nav.innerHTML = '<p>Hello JavaScript!</p>'; </script> </body> </html> </code></pre> 执行下面的代码，修改指定 DOM 元素的 CSS 属性。 <pre class="language-"><code class="lang-html"><!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript</title> </head> <body> <div class="box">Hello World!</div> <script type="text/javascript"> const box = document.querySelector('.box'); box.style.color = 'red'; </script> </body> </html> </code></pre> 执行下面的代码，修改指定 DOM 元素的类名。 <pre class="language-"><code class="lang-html"><!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript</title> </head> <body> <div class="box">Hello World!</div> <script type="text/javascript"> const box = document.querySelector('.box'); console.log(box.className); box.className = 'nav'; console.log(box.className); </script> </body> </html> </code></pre> 执行下面的代码，操作指定 DOM 元素的类名。 <pre class="language-"><code class="lang-html"><!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript</title> <style type="text/css"> .nav { color: red; } </style> </head> <body> <div class="box">Hello World!</div> <script type="text/javascript"> const box = document.querySelector('.box'); console.log(box.className); box.classList.add('nav'); console.log(box.className); box.classList.remove('box'); console.log(box.className); box.classList.toggle('box'); console.log(box.className); </script> </body> </html> </code></pre> 执行下面的代码，修改指定 DOM 元素的自定义属性。 <pre class="language-"><code class="lang-html"><!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript</title> </head> <body> <div class="box" data-id="1">Hello World!</div> <script type="text/javascript"> const box = document.querySelector('.box'); console.log(box.dataset); console.log(box.dataset.id); box.dataset.id = 233; console.log(box.dataset); console.log(box.dataset.id); </script> </body> </html> </code></pre> 执行下面的代码，查找指定 DOM 元素的父节点。 <pre class="language-"><code class="lang-html"><!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript</title> </head> <body> <nav class="nav"> <div class=</span