DOM中的Document类型
1.文档子节点
Document子节点可能是一个DocumentType,Element,或ProcessingInstrucion,Comment
（1）Document节点访问Element子节点的方式有两种：
documentElement属性，该属性始终指向HTML页面的
通过childNodes列表也可以访问文档元素
var html=document.documentElement;
alert(html);//[object HTMLHtmlElement]
alert(document.childNodes[1]);//[object HTMLHtmlElement]
alert(html===document.childNodes[1]);//true
doucment还有body属性，指向
元素。
window.onload=function(){
document.body.style.backgroundColor = "yellow";//需要事件触发
}
（2）Document节点访问DocumentType子节点的方式:
通常将<!DOCTYPE>标签看成一个与文档不同的实体
（3）对于标签外的注释，不同的浏览器处理的方式可能是不同的
<!--这里是注释-->
<html>
<body>
....
</body>
</html>
<!--这里是注释-->
这个页面看起来一个有两个子节点：注释，元素，注释。但是在浏览器中有不同处理方式。有的可能忽略注释，有的可能只为第一个注释创造节点，有的会将这两种注释都当做节点。
2.文档信息
document作为HTMLDocument的实例，有一些Document没有的属性
title属性：获取
内的标题</p>
<pre class="js"><code>document.title="new page title"</code></pre></li>
<li><p>URL属性：包含页面完整的url</p></li>
<li><p>domain属性：包含页面的域名，只有domain可设置，但不能将其设置为URL不包含的域</p></li>
<li><p>referrer属性：保存着链接到当前页面的那个页面的url,在没有来源页面的情况下，referrer可能会包含空字符串。</p>
<pre class="js"><code>var url=document.URL;
alert(url);
var domain=document.domain;//只有domain可设置
alert(domain);
var referrer=document.referrer;
alert(referrer);</code></pre></li>
</ul>
<h2 id="查找元素">3.查找元素</h2>
<p>（1）getElementById(元素的id)</p>
<p>如果不存带相应id的参数则会返回null，如果有多个元素带相同的id，则返回文档中第一次出现的元素</p>
<p>(2) getElementByTagName():接收一个参数，即要获取的元素标签名，返回的就是包含0或多个元素的NodeList。在html文档中，会返回一个与NodeList相似的”动态“集合HTMLCollection。</p>
<p>HTMLCollection对象有一些方法和属性：</p>
<ul>
<li><p>length属性</p></li>
<li><p>item()方法：访问对象中的项，传入索引值，和[ ]用法类似</p></li>
<li><p>namedItem()方法：通过元素的name特征取得项，传入name特征名</p>
<pre><code><img src="1.jpg" name="myPic">
...
var images= getElementByTagName("img");
var myPic=images.namedItem("myPic");</code></pre></li>
<li><p>要获取文档所有的元素，可以向getElementByTagName()中传入“*”，这样返回HTMLCollection就包含整个页面的所有元素，并按出现的先后顺序排序。</p></li>
</ul>
<p>（3）getElementByName()：该方法只有HTMLDocument才有，这个方法会返回所有给定name特性的元素。</p>
<h2 id="特殊集合">4.特殊集合</h2>
<p>这些都是HTMLCollection对象为访问文档常用部分提供的快捷方式</p>
<ul>
<li>document.anchors:文档中所有带name特性的<a>标签</li>
<li>document.images:文档中所有img标签</li>
<li>document.links:文档中所有带href特性的<a>标签</li>
</ul>
<h2 id="dom一致性检测">5.DOM一致性检测</h2>
<p>由于DOM有多个级别和部分，所以需要检测浏览器实现了DOM的哪些部分。</p>
<p>document.implementation属性为此提供了相应的信息和功能对象。</p>
<ul>
<li><p>document.implementation.hasFeature():接收两个参数，要检测的DOM功能名称和版本号。如果浏览器支持就返回true.</p>
<pre class="js"><code>alert(document.implementation.hasFeature("CSS","1.0"));//chrome中true</code></pre></li>
</ul>
<p>hasFeature的缺点：</p>
<p>实现这可以自行决定是否与DOM规范部分保持一致。所以除了hasFeature检测外，还可以使用能力检测。</p>
<h2 id="文档写入">6.文档写入</h2>
<p>将输出流写入网页中，有四种方法：write(),writeln(),open()和close()。每一个都接收一个字符串参数，即要写入输出流的文本。</p>
<pre class="html"><code><body>
<p>this time is:</p>
<script type="text/javascript">
document.write("<b>"+(new Date()).toString()+"</b>");
</script>
</body>
</code></pre>
<p><img alt="技术分享图片" src="http://image.bubuko.com/info/201908/20190820233019620789.png" /></p>
<p>writeln()方法会比write()方法的后面多加“\n"。</p>
<p>如果在文档加载结束后调用document.write，那么输出内容将重写整个页面</p>
<pre class="html"><code><body>
<p>this time is:</p>
<script type="text/javascript">
window.onload=function(){
document.write("<b>"+(new Date()).toString()+"</b>");
}
</script>
</body>
</code></pre>
<p>open()和close()分别用于打开和关闭网页输出流。</p>
<pre class="js"><code>function createNewDoc()
{
var newDoc=document.open("text/html","replace");
var txt="<html><body>Learning about the DOM is FUN!</body></html>";
newDoc.write(txt);
newDoc.close();
}
</code></pre><p><a href="http://www.bubuko.com/infodetail-3163717.html" title="js——Document类型（DOM 3),bubuko.com" style="color:#ffffff">js——Document类型（DOM 3)</a></p><p>原文：https://www.cnblogs.com/ellen-mylife/p/11386040.html</p></span>
</div>
<script type="text/javascript"> bubuko_load('content_after');</script>
<div id="divcomment">
<div>
<div class=" divtextaligncenter">
<div class="detailcai" id="infono">
<div class="detailcai1 colorboldlv">
踩</div>
<div class="detailcai2 colorboldlv">
(<span id="spanNo">0</span>)</div>
</div>
<div class="detailzan" id="infoyes">
<div class="detailzan1 colorboldCheng">
赞</div>
<div class="detailzan2 colorboldCheng">
(<span id="spanYes">0</span>)</div>
</div>
<div class="divfloatclear">
</div>
</div>
<div class="divtextalignright margintop10">
<div class="width100bi paddingleft10right10">
<span id="spanYesContent" class="colorboldCheng"></span> <span id="spanNoContent"
class="colorboldlv"></span> <span id="spanBadContent" class="colorboldCheng">
</span>
</div>
</div>
</div>
<div class="divtextalignright margintop10">
<span class="detailjubao" id="infobad">举报</span>
</div>
<script type="text/javascript"> bubuko_load('comment_before');</script>
<div id="comment" class="divtextalignleft margintop20">
<div class="detailpinglun1">
<span class="detailpinglun2 title6">评论</span> <span class="detailpinglun3">一句话评论（<span id="commentCount" class="colorboldCheng">0</span>）</span>
</div>
<div class="paddingtop20">
<div id="commentlistend" name="commentlistend" class="divtextaligncenter margintop20">
<span id="lblpage"></span>
</div>
</div>
<div class="margintop20">
<form method="post" action="/ajaxjs/info_detail_commentadd.aspx">
<div class="divtextalignleft paddingtop20">
<div id="commenthf" class="divbackgroundcolor1">
</div>
<div>
<textarea name="tbcommentcontent" id="tbcommentcontent" disabled="disabled" class="tb" style="width: 680px;
height: 120px;" ></textarea>
</div>
</div>
<div class="divtextalignright paddingtop10 " style="display:none;">
<span id="addCommentTishi" class="colorboldCheng">登录后才能评论！</span>
<span id="loginno"><input type="button" class="mbtn1" value="登录" onclick="location.href='login.aspx?returnUrl='+document.URL.replace(new RegExp('&', 'g'), '(_)')" /></span>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript"> bubuko_load('comment_after');</script>
</div>
</div>
<div class="width30bi divfloatright">
<div class="paddingbottom20">
<!-- <script type="text/javascript"> document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E%3Cscript charset="utf-8" src="http://znsv.baidu.com/customer_search/api/js?sid=10743263978424259100') + '&plate_url=' + (encodeURIComponent(window.location.href)) + '&t=' + (Math.ceil(new Date() / 3600000)) + unescape('"%3E%3C/script%3E'));</script> -->
</div>
<script type="text/javascript"> bubuko_load('right_top');</script>
<div class="width100bi divborder">
<div class="divtitle">
<div id="infofile1_div1" class="divfloatleft divtitlefont">
分享档案</div>
<div class="divfloatright">
<a href="/infotimemore.html" title="分享档案更多" class="colorCheng">更多></a>
</div>
<div class="divfloatclear">
</div>
</div>
<div class="divtextalignleft paddingleft10right10 margintop10bottom10 heightline30px">
<a class="taga" href="/infotime-20210923-1.html" title="2021年09月23日技术分享文章">
2021年09月23日
(328)</a><br />
<a class="taga" href="/infotime-20210924-1.html" title="2021年09月24日技术分享文章">
2021年09月24日
(313)</a><br />
<a class="taga" href="/infotime-20210917-1.html" title="2021年09月17日技术分享文章">
2021年09月17日
(191)</a><br />
<a class="taga" href="/infotime-20210915-1.html" title="2021年09月15日技术分享文章">
2021年09月15日
(369)</a><br />
<a class="taga" href="/infotime-20210916-1.html" title="2021年09月16日技术分享文章">
2021年09月16日
(411)</a><br />
<a class="taga" href="/infotime-20210913-1.html" title="2021年09月13日技术分享文章">
2021年09月13日
(439)</a><br />
<a class="taga" href="/infotime-20210911-1.html" title="2021年09月11日技术分享文章">
2021年09月11日
(398)</a><br />
<a class="taga" href="/infotime-20210912-1.html" title="2021年09月12日技术分享文章">
2021年09月12日
(393)</a><br />
<a class="taga" href="/infotime-20210910-1.html" title="2021年09月10日技术分享文章">
2021年09月10日
(160)</a><br />
<a class="taga" href="/infotime-20210908-1.html" title="2021年09月08日技术分享文章">
2021年09月08日
(222)</a><br />
</div>
</div>
<div class="width100bi margintop20 divborder">
<div class="divtitle">
<div id="infonew1_divtitle" class="divfloatleft divtitlefont">最新文章</div>
<div class="divfloatright">
<a href="/info.html" id="infonew1_amore" class="colorCheng" title="最新文章更多>">更多></a></div>
<div class="divfloatclear">
</div>
</div>
<div>
<ul>
<li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830785.html"
title="
6.0 scripts元素 1) 内嵌的 JavaScript 代码 <script type="text/javascript"> document.write("I love FishC.com!") </script> 2) 通过 src 属性引用来自外部代码文件 ...">
2021/09/28 scripts
<span class="colorlv">2022-05-27</span></a>
</li>
<li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830783.html"
title="
问题场景 后台不提供富文本存储，所以emoji表情入库会报错 需求要求前端在输入的时候过滤掉表情符号 全局的input 和富文本textarea输入框都需要过滤emoji表情 问题分析 1.每一个input写事件写正则校验代码量实在太多了还很麻烦；所以想用自定义全局指令，就不需要每个用到的地方都去引 ...">
vue自定义全局指令v-emoji限制input输入表情和特殊字符
<span class="colorlv">2022-05-27</span></a>
</li>
<li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830781.html"
title="
（1）今日计划 四则运算第二阶段 （2）源代码 package size; import java.util.*; import java.lang.Math; public class size { static int count=0; static int ccount=0; static i ...">
9.26学习总结
<span class="colorlv">2022-05-27</span></a>
</li>
<li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830780.html"
title="vim操作 1. 只在指定的特定行中搜索 /pattern\%>27l # 搜索pattern, 搜索范围是27行以后, 其中l表示按行搜索 /pattern\%>27l\%<40l # 搜索pattern, 搜索范围是27行以后40行以前, 其中l表示按行搜索 注意, 不要在%>27l两边随便加空 ...">
vim操作
<span class="colorlv">2022-05-27</span></a>
</li>
<li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830779.html"
title="
说明 主要是学习汇编 windows10 + notepad++ + DOSBox0.74 网上也有notepad++配置自动编译运行的教程，感觉不如手敲命令行原始链接来的快 中断和中断调用 就是调用Dos下的系统接口 中断一览表 MOV AH,09H INT 21H ...">
深入理解计算机基础 第三章
<span class="colorlv">2022-05-27</span></a>
</li>
<li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830778.html"
title="记录一下自己将string作为参数传递的结果。（自己感觉与int等基本类型无异。） 1. string 以引用形式传递 #include <iostream>#include<string> using namespace std;void change_string(string& s){ cha ...">
C++ string 作为形参与引用传递（转）
<span class="colorlv">2022-05-27</span></a>
</li>
<li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830777.html"
title="
常用加解密 1. md5 加密 import hashlib def private_passwd(passwd: str) -> str: return hashlib.md5(passwd.encode(encoding='UTF-8')).hexdigest() 2. base64 加解密 i ...">
python 加解密
<span class="colorlv">2022-05-27</span></a>
</li>
<li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830775.html"
title="
let array = [ { id: 1, name: "001", children: [ { id: 2, name: "002", }, ], }, { id: 3, name: "003", children: [] }, ]; function getFlatArr(arr) { ret ...">
JavaScript-对象数组里根据id获取name，对象可能有children属性
<span class="colorlv">2022-05-27</span></a>
</li>
<li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830773.html"
title="
SQL语句，追加内容： update 表名 set 字段=CONCAT(字段,'追加的内容') where 字段=? 参考链接：https://www.jb51.net/article/113454.htm ...">
SQL语句——保持现有内容在后面增加内容
<span class="colorlv">2022-05-27</span></a>
</li>
<li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830769.html"
title="
virsh [options]... [<command_string>]virsh [options]... <command> [args...] options: -c | --connect=URI hypervisor connection URI -d | --debug=NUM deb ...">
virsh命令文档
<span class="colorlv">2022-05-27</span></a>
</li>
</ul>
</div>
</div>
<div class="width100bi margintop20 divborder">
<div class="divtitle">
<div id="jctop1_divtitle" class="divfloatleft divtitlefont">教程昨日排行</div>
<div class="divfloatright">
<a href="/jiaocheng/" id="jctop1_amore" class="colorCheng">更多></a></div>
<div class="divfloatclear">
</div>
</div>
<div class="divtextalignleft">
<ul>
<li class="divullilist">
1.<a href="/jiaocheng/detail-3742.html" title="list.reverse()"
>list.reverse()</a></li>
<li class="divullilist">
2.<a href="/jiaocheng/detail-898.html" title="Django Admin 管理工具"
>Django Admin 管理工具</a></li>
<li class="divullilist">
3.<a href="/jiaocheng/detail-1027.html" title="AppML 案例模型"
>AppML 案例模型</a></li>
<li class="divullilist">
4.<a href="/jiaocheng/detail-51.html" title="HTML 标签列表（功能排序）"
>HTML 标签列表（功能排序）</a></li>
<li class="divullilist">
5.<a href="/jiaocheng/detail-57.html" title="HTML 颜色名"
>HTML 颜色名</a></li>
<li class="divullilist">
6.<a href="/jiaocheng/detail-64.html" title="HTML 语言代码"
>HTML 语言代码</a></li>
<li class="divullilist">
7.<a href="/jiaocheng/detail-208.html" title="jQuery 事件"
>jQuery 事件</a></li>
<li class="divullilist">
8.<a href="/jiaocheng/detail-303.html" title="jEasyUI 创建分割按钮"
>jEasyUI 创建分割按钮</a></li>
<li class="divullilist">
9.<a href="/jiaocheng/detail-305.html" title="jEasyUI 创建复杂布局"
>jEasyUI 创建复杂布局</a></li>
<li class="divullilist">
10.<a href="/jiaocheng/detail-336.html" title="jEasyUI 创建简单窗口"
>jEasyUI 创建简单窗口</a></li>
</ul>
</div>
</div>
<script type="text/javascript"> bubuko_load('right_bottom');</script>
</div>
<div class="divfloatclear">
</div>
</div>
<script type="text/javascript"> bubuko_load('bottom');</script>
<div class="width1000px divmargin0auto paddingtop20bottom20">
<div class="width1000px divborder margintop20">
<div class="youqingtitle">
<a title="友情链接">友情链接</a>
</div>
<div class="youqingcontent">
<a href='http://www.hubwiz.com/' title='汇智网在线编程学习' target='_blank'>汇智网</a>
<a href='http://www.5ibc.net' title='专注PHP程序员一站式免费学习站点' target='_blank'>PHP教程</a>
<a href='http://www.cnplugins.com/' title='插件网' target='_blank'>插件网</a>
<!--<a href='http://m.bubuko.com/doc3v35e/2022-03-31.html' title='王者荣耀' target='_blank'>王者荣耀</a>
<a href='http://m.bubuko.com/doc0tx77/6.html' title='刺激战场' target='_blank'>刺激战场</a>
<a href='http://m.bubuko.com/doc27/60.html' title='金铲铲' target='_blank'>金铲铲</a>
<a href='http://m.bubuko.com/doc2022-03-31/rolne.html' title='冰封王座' target='_blank'>冰封王座</a>
<a href='http://m.bubuko.com/doc20dq0/2022-03-31.html' title='魔兽世界' target='_blank'>魔兽世界</a>
<a href='http://m.bubuko.com/docovgq9/2022-03-31.html' title='哔哩哔哩' target='_blank'>哔哩哔哩</a>
<a href='http://m.bubuko.com/docuiwrn/27.html' title='狼人杀' target='_blank'>狼人杀</a>
<a href='http://m.bubuko.com/doc91/74.html' title='元神' target='_blank'>元神</a>
-->
</div>
</div>
</div>
<div class="bottomdiv">
<div class="width1000px divmargin0auto paddingtop20">
<div class="divfloatleft width500px">
<div class="height30px">
<a href="/about.html" title="bubuko.com关于我们">关于我们</a> - <a href="/contactus.html"
title="bubuko.com联系我们">联系我们</a> - <a href="/guest.html" title="bubuko.com留言反馈">留言反馈</a> - 联系我们:wmxa8@hotmail.com
</div>
<div class="height30px">
© 2014 <a href="http://www.bubuko.com" title="bubuko.com技术分享">bubuko.com</a> 版权所有
</div>
<div>
<span class="colorlv">打开技术之扣，分享程序人生！</span>
</div>
<div class="paddingtop20 paddingbottom20">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?5bb992e19249070395266c385ebea7c6";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
(function () {
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</div>
</div>
<div class="divfloatright width500px">
</div>
<div class="divfloatclear">
</div>
</div>
</div>
<script type="text/javascript"> toptopmenu_i = "3"; infomenu_i = "2"; var mid = ''; var id = '3163717'; var idm = 'bf1011'; var commentitemcount = '0'; var memberhost = ''; prettyPrint();
</script>
<script src="/js/infodetail.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/member.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/bubukojs.js" type="text/javascript"></script>
</body>
</html>
