DOM中的Document类型
-
Js通过Document表示文档类型。
-
document对象是HTMLDocument的实例，HTMLDocument继承自Document类型。
document对象是window对象的一个属性。
-
Document与Node的关系：
Js中所以节点类型都继承自Node类型，节点类型都享有共同的·基本属性和方法
-
Document节点具有以下特征：
- nodeType的值为9
- nodeName的值为“#document"
- nodeValue、parentNode、ownerDocument的值为null
- 其子节点可能是一个DocumentType,Element,或ProcessingInstrucion,Comment
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>标签看成一个与文档不同的实体
-
document.childNodes[0]
-
document.doctype属性
alert(document.childNodes[0]);//[object DocumentType] alert(document.childNodes[0]===document.doctype);//true -
浏览器对document.doctype属性的支持不一致
（3）对于标签外的注释，不同的浏览器处理的方式可能是不同的
<!--这里是注释-->
<html>
<body>
....
</body>
</html>
<!--这里是注释-->
这个页面看起来一个有两个子节点：注释，元素，注释。但是在浏览器中有不同处理方式。有的可能忽略注释，有的可能只为第一个注释创造节点，有的会将这两种注释都当做节点。
2.文档信息
document作为HTMLDocument的实例，有一些Document没有的属性
-
title属性：获取
内的标题</p> <pre><code class="language-js">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><code class="language-js">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查找元素">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特殊集合">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="5dom一致性检测">5.DOM一致性检测</h2> <p>由于DOM有多个级别和部分，所以需要检测浏览器实现了DOM的哪些部分。</p> <p>document.implementation属性为此提供了相应的信息和功能对象。</p> <ul> <li> <p>document.implementation.hasFeature():接收两个参数，要检测的DOM功能名称和版本号。如果浏览器支持就返回true.</p> <pre><code class="language-js">alert(document.implementation.hasFeature("CSS","1.0"));//chrome中true </code></pre> </li> </ul> <p>hasFeature的缺点：</p> <p>实现这可以自行决定是否与DOM规范部分保持一致。所以除了hasFeature检测外，还可以使用能力检测。</p> <h2 id="6文档写入">6.文档写入</h2> <p>将输出流写入网页中，有四种方法：write(),writeln(),open()和close()。每一个都接收一个字符串参数，即要写入输出流的文本。</p> <pre><code class="language-html"><body> <p>this time is:</p> <script type="text/javascript"> document.write("<b>"+(new Date()).toString()+"</b>"); </script> </body> </code></pre> <p><img src="https://img2018.cnblogs.com/blog/1609498/201908/1609498-20190820221752473-430276630.png" alt="" loading="lazy"></p> <p>writeln()方法会比write()方法的后面多加“ "。</p> <p>如果在文档加载结束后调用document.write，那么输出内容将重写整个页面</p> <pre><code class="language-html"><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><code class="language-js">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>