JavaScript DOM API

## document object

attributes of document object

“`
document.title               //设置文档标题等价于HTML的标签<br /> document.URL                 //设置URL属性从而在同一窗口打开另一网页<br /> document.fileCreatedDate     //文件建立日期,只读属性<br /> document.fileModifiedDate    //文件修改日期,只读属性<br /> document.fileSize            //文件大小,只读属性<br /> document.cookie              //设置和读出cookie<br /> document.charset             //设置字符集 简体中文:gb2312<br /> document.body // body 元素<br /> document.location.hash/host/href/port // location<br /> “`</p> <p>methods of document object</p> <p>“`<br /> getElementById() // 返回一个 Element<br /> getElementsByName() // 根据 name 属性获得元素, 返回一个 NodeList<br /> getElementsByTagName() // 返回一个 HTMLCollection/NodeList(Webkit)<br /> getElementsByClassName() // 返回一个 HTMLCollection<br /> querySelector() // 返回一个符合的元素, 性能很差<br /> querySelectorAll() // 返回所有符合的元素组成的 NodeList, 性能很差<br /> document.write()<br /> document.createElement()<br /> “`</p> <p>## window object</p> <p>### functions in window object</p> <p>“`<br /> setTimeout(func, milliseconds, parameters…)<br /> setInterval(func, milliseconds, parameters…)<br /> “`<br /> NOTE: javascript is asynchonous, even if you set 0 timeout, the function is just put into the execute queue, not invoked immediately.</p> <p>### window.location</p> <p>“`<br /> location setting location will cause the page to redirect to new page<br /> location.href<br /> location.protocol<br /> location.host<br /> location.hostname<br /> location.port<br /> location.pathname<br /> location.search<br /> location.hash<br /> location.assign() go to a new address<br /> location.replace() go to a new address and do not disturb the history<br /> location.reload() reload the page<br /> “`</p> <p>### window.history</p> <p>“`<br /> history.back()<br /> history.forward()<br /> history.go(number)<br /> “`</p> <p>### window.screen</p> <p>window.screen.width screen width, not the viewport width<br /> window.screen.height screen height</p> <p>### alert, confirm and prompt</p> <p>alert show a message<br /> confirm return a bool by user action<br /> prompt </p> <p>## Same Origin Policy</p> <p>document.domain is the key to decide the origin of a script.</p> <p>scripts under different subdomain can set the their document.domain to a same domain, and then then can share the same cookie or communicate</p> <p>Cross-Origin Resource Sharing</p> </div><!-- .entry-content --> <div class="author-meta clear"> <div class="author-avatar"> <img alt='' src='https://secure.gravatar.com/avatar/57eb915295663567365f1eebe0a41faa?s=75&r=g' srcset='https://secure.gravatar.com/avatar/57eb915295663567365f1eebe0a41faa?s=150&r=g 2x' class='avatar avatar-75 photo' height='75' width='75' /> </div><!-- #author-avatar --> <div class="author-description"> <h3>About 逸飞</h3> 后端工程师 </div><!-- #author-description --> </div><!-- #author-meta--> <footer class="entry-meta"> <ul class="entry-meta-taxonomy"> <li class="category-link"><a href="https://yifei.me/category/computer-science/javascript/">JavaScript</a></li> </ul> </footer><!-- .entry-meta --> </article><!-- #post-# --> <nav class="navigation post-navigation" role="navigation"> <h1 class="screen-reader-text">Post navigation</h1> <div class="nav-links"> <div class="nav-previous"><a href="https://yifei.me/note/625/" rel="prev"><span class="meta-nav">←</span> memcacheq</a></div><div class="nav-next"><a href="https://yifei.me/note/423/" rel="next">Linux 命令行文件管理 <span class="meta-nav">→</span></a></div> </div><!-- .nav-links --> </nav><!-- .navigation --> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">发表评论 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/note/503/#respond" style="display:none;">取消回复</a></small></h3> <form action="https://yifei.me/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate> <p class="comment-notes"><span id="email-notes">电子邮件地址不会被公开。</span> 必填项已用<span class="required">*</span>标注</p><p class="comment-form-comment"><label for="comment">评论</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">姓名 <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">电子邮件 <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">站点</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /><label for="wp-comment-cookies-consent">在此浏览器中保存我的名字、电邮和网站。</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="发表评论" /> <input type='hidden' name='comment_post_ID' value='503' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="6fcd1b2523" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="170"/></p> </form> </div><!-- #respond --> </div><!-- #comments --> </div><!-- #main --> </div><!-- #primary --> <div id="secondary" class="widget-area" role="complementary"> <aside id="search-3" class="widget widget_search"><form role="search" method="get" class="search-form" action="https://yifei.me/"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search" value="" name="s" title="Search for:" /> </label> <input type="submit" class="fa search-submit" value="" /> </form> </aside><aside id="categories-4" class="widget widget_categories"><h1 class="widget-title">分类目录</h1> <ul> <li class="cat-item cat-item-57"><a href="https://yifei.me/category/startup/">创业</a> (18) </li> <li class="cat-item cat-item-1"><a href="https://yifei.me/category/uncategorized/">未分类</a> (5) </li> <li class="cat-item cat-item-32"><a href="https://yifei.me/category/talks/">演讲与笔记</a> (18) </li> <li class="cat-item cat-item-2"><a href="https://yifei.me/category/computer-science/">计算机</a> (340) <ul class='children'> <li class="cat-item cat-item-24"><a href="https://yifei.me/category/computer-science/android/">Android</a> (25) </li> <li class="cat-item cat-item-35"><a href="https://yifei.me/category/computer-science/bitcoin/">Bitcoin</a> (1) </li> <li class="cat-item cat-item-39"><a href="https://yifei.me/category/computer-science/c/">C 语言</a> (9) </li> <li class="cat-item cat-item-45"><a href="https://yifei.me/category/computer-science/css/">CSS</a> (4) </li> <li class="cat-item cat-item-43"><a href="https://yifei.me/category/computer-science/django/">Django</a> (14) </li> <li class="cat-item cat-item-23"><a href="https://yifei.me/category/computer-science/docker/">Docker</a> (6) </li> <li class="cat-item cat-item-11"><a href="https://yifei.me/category/computer-science/git/">git</a> (1) </li> <li class="cat-item cat-item-30"><a href="https://yifei.me/category/computer-science/golang/">Golang</a> (5) </li> <li class="cat-item cat-item-48"><a href="https://yifei.me/category/computer-science/http/">HTTP</a> (4) </li> <li class="cat-item cat-item-36"><a href="https://yifei.me/category/computer-science/iot/">IoT</a> (1) </li> <li class="cat-item cat-item-19"><a href="https://yifei.me/category/computer-science/javascript/">JavaScript</a> (17) </li> <li class="cat-item cat-item-50"><a href="https://yifei.me/category/computer-science/linux/">Linux</a> (1) </li> <li class="cat-item cat-item-51"><a href="https://yifei.me/category/computer-science/lua/">lua</a> (5) </li> <li class="cat-item cat-item-28"><a href="https://yifei.me/category/computer-science/python/">Python</a> (56) </li> <li class="cat-item cat-item-22"><a href="https://yifei.me/category/computer-science/rust/">Rust</a> (1) </li> <li class="cat-item cat-item-38"><a href="https://yifei.me/category/computer-science/streaming-system/">Streaming System</a> (1) </li> <li class="cat-item cat-item-54"><a href="https://yifei.me/category/computer-science/tricks/">Tricks</a> (7) </li> <li class="cat-item cat-item-56"><a href="https://yifei.me/category/computer-science/vim/">vim</a> (5) </li> <li class="cat-item cat-item-26"><a href="https://yifei.me/category/computer-science/backend/">Web 后端</a> (21) </li> <li class="cat-item cat-item-44"><a href="https://yifei.me/category/computer-science/frontend/">前端</a> (2) </li> <li class="cat-item cat-item-16"><a href="https://yifei.me/category/computer-science/cli/">命令行技巧</a> (16) </li> <li class="cat-item cat-item-18"><a href="https://yifei.me/category/computer-science/database/">数据库</a> (25) </li> <li class="cat-item cat-item-21"><a href="https://yifei.me/category/computer-science/server-side/">服务端工具</a> (6) </li> <li class="cat-item cat-item-52"><a href="https://yifei.me/category/computer-science/machine-learning/">机器学习</a> (5) </li> <li class="cat-item cat-item-37"><a href="https://yifei.me/category/computer-science/arch/">架构</a> (15) </li> <li class="cat-item cat-item-47"><a href="https://yifei.me/category/computer-science/browser-plugin/">浏览器插件</a> (8) </li> <li class="cat-item cat-item-17"><a href="https://yifei.me/category/computer-science/crawler/">爬虫</a> (27) </li> <li class="cat-item cat-item-53"><a href="https://yifei.me/category/computer-science/monitoring/">监控</a> (4) </li> <li class="cat-item cat-item-49"><a href="https://yifei.me/category/computer-science/lib/">第三方库</a> (6) </li> <li class="cat-item cat-item-15"><a href="https://yifei.me/category/computer-science/algorithm/">算法</a> (9) </li> <li class="cat-item cat-item-40"><a href="https://yifei.me/category/computer-science/compiler/">编译原理</a> (2) </li> <li class="cat-item cat-item-20"><a href="https://yifei.me/category/computer-science/network/">网络</a> (8) </li> <li class="cat-item cat-item-41"><a href="https://yifei.me/category/computer-science/computer-graphics/">计算机图形学</a> (1) </li> <li class="cat-item cat-item-14"><a href="https://yifei.me/category/computer-science/reverse-engineering/">逆向工程</a> (3) </li> </ul> </li> <li class="cat-item cat-item-31"><a href="https://yifei.me/category/finance/">金融</a> (3) <ul class='children'> <li class="cat-item cat-item-29"><a href="https://yifei.me/category/finance/stock/">股票</a> (3) </li> </ul> </li> </ul> </aside><aside id="archives-3" class="widget widget_archive"><h1 class="widget-title">文章归档</h1> <ul> <li><a href='https://yifei.me/note/date/2019/10/'>2019年十月</a> (2)</li> <li><a href='https://yifei.me/note/date/2019/09/'>2019年九月</a> (3)</li> <li><a href='https://yifei.me/note/date/2019/08/'>2019年八月</a> (3)</li> <li><a href='https://yifei.me/note/date/2019/07/'>2019年七月</a> (3)</li> <li><a href='https://yifei.me/note/date/2019/06/'>2019年六月</a> (29)</li> <li><a href='https://yifei.me/note/date/2019/05/'>2019年五月</a> (1)</li> <li><a href='https://yifei.me/note/date/2019/03/'>2019年三月</a> (2)</li> <li><a href='https://yifei.me/note/date/2019/02/'>2019年二月</a> (3)</li> <li><a href='https://yifei.me/note/date/2019/01/'>2019年一月</a> (3)</li> <li><a href='https://yifei.me/note/date/2018/12/'>2018年十二月</a> (1)</li> <li><a href='https://yifei.me/note/date/2018/11/'>2018年十一月</a> (7)</li> <li><a href='https://yifei.me/note/date/2018/10/'>2018年十月</a> (9)</li> <li><a href='https://yifei.me/note/date/2018/09/'>2018年九月</a> (6)</li> <li><a href='https://yifei.me/note/date/2018/08/'>2018年八月</a> (3)</li> <li><a href='https://yifei.me/note/date/2018/07/'>2018年七月</a> (26)</li> <li><a href='https://yifei.me/note/date/2018/06/'>2018年六月</a> (33)</li> <li><a href='https://yifei.me/note/date/2018/05/'>2018年五月</a> (7)</li> <li><a href='https://yifei.me/note/date/2018/04/'>2018年四月</a> (35)</li> <li><a href='https://yifei.me/note/date/2018/03/'>2018年三月</a> (3)</li> <li><a href='https://yifei.me/note/date/2018/02/'>2018年二月</a> (1)</li> <li><a href='https://yifei.me/note/date/2018/01/'>2018年一月</a> (6)</li> <li><a href='https://yifei.me/note/date/2017/12/'>2017年十二月</a> (6)</li> <li><a href='https://yifei.me/note/date/2017/11/'>2017年十一月</a> (22)</li> <li><a href='https://yifei.me/note/date/2017/09/'>2017年九月</a> (4)</li> <li><a href='https://yifei.me/note/date/2017/08/'>2017年八月</a> (14)</li> <li><a href='https://yifei.me/note/date/2017/07/'>2017年七月</a> (22)</li> <li><a href='https://yifei.me/note/date/2017/06/'>2017年六月</a> (42)</li> <li><a href='https://yifei.me/note/date/2017/05/'>2017年五月</a> (87)</li> <li><a href='https://yifei.me/note/date/2016/12/'>2016年十二月</a> (1)</li> </ul> </aside> <aside id="recent-posts-3" class="widget widget_recent_entries"> <h1 class="widget-title">近期文章</h1> <ul> <li> <a href="https://yifei.me/note/743/">如何导出 Docker 镜像</a> </li> <li> <a href="https://yifei.me/note/742/">macOS 中如何正确安装 pycurl</a> </li> <li> <a href="https://yifei.me/note/313/">本周股票复盘(2019-09-28)</a> </li> <li> <a href="https://yifei.me/note/312/">本周股票复盘(2019-09-22)</a> </li> <li> <a href="https://yifei.me/note/306/">《闪电式拓张》读书笔记</a> </li> </ul> </aside><aside id="meta-3" class="widget widget_meta"><h1 class="widget-title">功能</h1> <ul> <li><a href="https://yifei.me/wp-login.php">登录</a></li> <li><a href="https://yifei.me/feed/">文章<abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="https://yifei.me/comments/feed/">评论<abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="https://cn.wordpress.org/" title="基于WordPress,一个优美、先进的个人信息发布平台。">WordPress.org</a></li> </ul> </aside> </div><!-- #secondary --> </div><!-- #content --> </div><!-- .col-width --> <footer class="site-footer no-widgets" role="contentinfo"> <div class="col-width"> Powered by <a href="http://govpress.org/">GovPress</a>, the <a href="http://wordpress.org/">WordPress</a> theme for government. </div><!-- .col-width --> </footer><!-- .site-footer --> </div><!-- #page --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-101694992-1', 'auto'); ga('require', 'displayfeatures'); ga('require', 'linkid'); ga('send', 'pageview'); </script> <script type='text/javascript' src='https://yifei.me/wp-content/themes/govpress/js/combined-min.js?ver=1.5.2'></script> <script type='text/javascript' src='https://yifei.me/wp-includes/js/comment-reply.min.js?ver=5.2.3'></script> <script type='text/javascript' src='https://yifei.me/wp-includes/js/clipboard.min.js?ver=5.2.3'></script> <script type='text/javascript' src='https://yifei.me/wp-includes/js/wp-embed.min.js?ver=5.2.3'></script> <script async="async" type='text/javascript' src='https://yifei.me/wp-content/plugins/akismet/_inc/form.js?ver=4.1.2'></script> <script id="module-katex"> (function($) { $(function() { if (typeof katex !== "undefined") { if ($(".language-katex").length > 0) { $(".language-katex").parent("pre").attr("style", "text-align: center; background: none;"); $(".language-katex").addClass("katex-container").removeClass("language-katex"); $(".katex-container").each(function() { var katexText = $(this).text(); var el = $(this).get(0); if ($(this).parent("code").length == 0) { try { katex.render(katexText, el) } catch (err) { $(this).html("<span class='err'>" + err) } } }); } if ($(".katex-inline").length > 0) { $(".katex-inline").each(function() { var katexText = $(this).text(); var el = $(this).get(0); if ($(this).parent("code").length == 0) { try { katex.render(katexText, el) } catch (err) { $(this).html("<span class='err'>" + err) } } }); } } }); })(jQuery); </script> <script id="module-prism-line-number"> (function($) { $(function() { $("code").each(function() { var parent_div = $(this).parent("pre"); var pre_css = $(this).attr("class"); if (typeof pre_css !== "undefined" && -1 !== pre_css.indexOf("language-")) { parent_div.addClass("line-numbers"); } }); }); })(jQuery); </script> <script id="module-clipboard"> (function($) { $(function() { var pre = document.getElementsByTagName("pre"); var pasteContent = document.getElementById("paste-content"); var hasLanguage = false; for (var i = 0; i < pre.length; i++) { var codeClass = pre[i].children[0].className; var isLanguage = codeClass.indexOf("language-"); var excludedCodeClassNames = [ "language-katex", "language-seq", "language-sequence", "language-flow", "language-flowchart", "language-mermaid", ]; var isExcluded = excludedCodeClassNames.indexOf(codeClass); if (isExcluded !== -1) { isLanguage = -1; } if (isLanguage !== -1) { var button = document.createElement("button"); button.className = "copy-button"; button.textContent = "Copy"; pre[i].appendChild(button); hasLanguage = true; } }; if (hasLanguage) { var copyCode = new ClipboardJS(".copy-button", { target: function(trigger) { return trigger.previousElementSibling; } }); copyCode.on("success", function(event) { event.clearSelection(); event.trigger.textContent = "Copied"; window.setTimeout(function() { event.trigger.textContent = "Copy"; }, 2000); }); } }); })(jQuery); </script> </body> </html>