JavaScript は、Document タイプを通じてドキュメントを表します。ブラウザでは、ドキュメント オブジェクトは HTMLDocument のインスタンスであり、HTML ページ全体を表します。また、Document オブジェクトは window オブジェクトのインスタンスであるため、グローバル オブジェクトとしてアクセスできます。ドキュメント タイプ ノードには次の特性があります:
nodeType の値は 9 です。
nodeNameの値は「#document」です。
nodeValue の値は null です。
parentNode の値が null です。
その子ノードは、DocumentType (最大 1 つ)、Element (最大 1 つ)、Processingstruct または Comment です。
ドキュメント タイプは、HTML ページまたはその他の XML ベースのドキュメントを表すことができます。最も一般的なアプリケーションは、HTMLDocument インスタンスとしてのドキュメント オブジェクトです。このドキュメント オブジェクトを通じて、ページに関連する情報を取得できるだけでなく、ページの外観やその基礎となる構造を操作することもできます。
ドキュメントの子ノード
DOM 標準では、Document ノードの子ノードは DocumentType、Element、Processingstruction、または Comment であることが規定されていますが、その子ノードにアクセスするための 2 つの組み込みショートカットがあります。 1 つ目は documentElement 属性で、常に HTML ページの 要素を指します。もう 1 つは、childNodes リストを介して document 要素にアクセスする方法ですが、documentElement 属性を使用すると、より迅速に要素にアクセスできます。以下に例を示します。
<html>
<body>
</body>
</html>上記のページがブラウザによって解析された後、そのドキュメントには 1 つの子ノードと 要素のみが含まれます。 documentElement 属性と childNodes リストを通じてこの要素にアクセスするコードは次のとおりです。
//取得<html>元素的引用 var html = document.documentElement; alert(html === document.childNodes[0]); //true alert(html === document.firstChild); //true
上記の例は、documentElement、firstChild、childNodes[0] の値が同じであり、それらはすべて < を指していることを示しています。 html>要素。
HTMLDocument のインスタンスとして、ドキュメント オブジェクトには、
属性を直接指す body 属性もあります。 document.body は開発でよく使用される属性です:var body = document.body;
すべてのブラウザは document.documentElement 属性と document.body 属性をサポートしています。
Document のもう 1 つのサブノードは DocumentType です。通常、 タグはドキュメントの他の部分とは異なるエンティティとみなされ、doctype 属性を通じてアクセスできます。
var doctype = document.doctype; //获取<!DOCTYPE>的引用
document オブジェクトのプロパティとメソッド
document オブジェクトは window オブジェクトのプロパティです。ウィンドウが複数のフレームに分割されている場合、各フレームはウィンドウ オブジェクトのプロパティであり、フレーム自体は実際にはウィンドウ オブジェクトのインスタンスです。ドキュメント オブジェクトの共通属性を次の表に示します。
上記のリストは、一般的に使用されるドキュメント属性の一部であり、現在のブラウザでサポートされているすべてのドキュメント属性を表示するには、次のメソッドを使用できます:
var attrs = new Array();
for(var property in window.document) {
attrs.push(property);
attrs.sort();
}
document.write("<table>");
for(var i=0;i<attrs.length;i++){
if(i == 0){
document.write("<tr>");
}
if(i > 0 && i%5 == 0){
document.write("</tr><tr>");
}
document.write("<td>" + attrs[i] + "</td>");
}
document.write("</table>");上記のコードは、現在のブラウザーでサポートされているドキュメント属性をアルファベット順に印刷し、ページ上のテーブルに移動します。
上記のドキュメント オブジェクトの属性では、URL、ドメイン、リファラー属性が Web ページのリクエストに関連付けられています。 URL 属性には、完全な URL アドレスと、アドレス バー内の手がかりのページ アドレスが含まれます。ドメイン属性にはページのドメイン名のみが含まれますが、リファラー属性には現在のページにリンクされているページの URL アドレスが保存されます。ソース ページがない場合、リファラー属性には空の文字列が含まれる場合があります。この情報はすべて HTTP リクエスト ヘッダーに含まれていますが、JavaScript を使用してアクセスできます。
//取得完整的URL地址 var URL = document.URL; //取得域名 var domain = document.domain; //取得来源页面的URL var referrer = document.referrer;
要素の検索
DOM アプリケーションで最も一般的な操作は、要素または要素のグループへの参照を取得し、いくつかの操作を実行することです。要素を取得する操作は、ドキュメント オブジェクトの次のメソッドを通じて完了できます。
document.getElementById()
document.getElementsByTagName
document.getElementsByName()
最初のメソッド document.getElementById() は、要素の ID を取得するための 1 つのパラメーターを受け取ります。要素が見つかった場合はその要素を返し、それ以外の場合は null を返します。ページ内に同じ ID を持つ複数の要素がある場合、getElementById() メソッドはドキュメント内の最初の要素のみを返します。 IE7 以下の IE ブラウザでは、form 要素の name 属性が検索対象の要素 ID と同じである場合、form 要素も返されます。例:
<input type="text" name="someId" value="text value"> <div id="someId">div</div>
当使用document.getElementById("someId")来查找元素的时候，IE7浏览器会将元素返回。而其它浏览器则是返回div元素。
另一个经常使用的方法是document.getElementsByTagName，通过标签名来查找元素。该方法接收一个参数：要查找的标签名称。它会返回0个或多个元素的NodeList。在HTML文档中，该方法返回一个HTMLCollection对象，称为“动态”集合。例如，下面的代码获取页面中所有的元素，并返回一个HTMLCollection：
var images = document.getElementByTagName("img");与NodeList相似，可以使用方括号语法或item()方法来访问HTMLCollection对象：
alert(images.length); //图片的数量 alert(images[0].src); //第一张图片的src属性 alert(images.item(0).src); //第一张图片的src属性
HTMLCollection对象还有一个方法:namedItem()，使用这个方法可以通过元素的name属性取得集合中的项。例如上面的图片集合中，如果有一张图片的name属性为mypic：
<img src="demoimg.jpg" name="mypic" alt="JavaScript ドキュメント オブジェクト モデル - ドキュメント タイプ" >
那么就可以通过下面的方法从images变量中获取这张图片：
var mypic = images.namedItem("mypic");如果想要获取页面中的所有元素，可以通过在getElementByTagName()方法中传入“*”通配符来获取。
var allElements = document.getElementByTagName("*");第3个获取元素的方法是HTMLDocument特有的方法：getElementByName()。该方法会返回指定name属性的所有元素。例如下面的代码：
<ul>
<li><input type="text" name="author" value="author1"></li>
<li><input type="text" name="author" value="author2"></li>
<li><input type="text" name="author" value="author3"></li>
</ul>var authors = document.getElementByName("author");上面的代码会返回所有的li元素。同样，getElementByName()方法也会返回一个HTMLCollection对象。
HTML5中的querySelector和querySelectorAll方法
除了上面的三个查找元素的方法之外，在HTML5向Web API新引入了新的document.querySelector和document.querySelectorAll方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。
这两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。
element = document.querySelector('selectors'); elementList = document.querySelectorAll('selectors');
其中参数selectors 可以包含多个CSS选择器，用逗号隔开。
element = document.querySelector('selector1,selector2,...'); elementList = document.querySelectorAll('selector1,selector2,...');
使用这两个方法无法查找带伪类状态的元素，比如querySelector(':hover')不会得到预期结果。
querySelector方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。
element = document.querySelector('div#container');//返回id为container的首个div element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素
querySelectorAll方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样。
elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div
但需要注意的是返回的nodeList集合中的元素是非实时（no-live）的，想要区别什么是实时非实时的返回结果，请看下面的例子：
<div id="container">
<div></div>
<div></div>
</div>//首先选取页面中id为container的元素 container=document.getElementById('#container'); console.log(container.childNodes.length)//结果为2 //然后通过代码为其添加一个子元素 container.appendChild(document.createElement('div')); //这个元素不但添加到页面了，这里的变量container也自动更新了 console.log(container.childNodes.length)//结果为3
通过上面的例子就很好地理解了什么是会实时更新的元素。document.getElementById返回的便是实时结果，上面对其添加一个子元素后，再次获取所有子元素个数，已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点)。
文档的写入
document对象可以将输出流写入到网页中，它有4个方法：write()、writeln()、open()和close()。其中，write()和writeln()方法接收一个字符串参数，即要写入到输出流的文本。write()方法会原样写出，而writeln()方法会在字符串的末尾添加一个换行符（\n）。在页面加载的过程中，可以使用这两个方法来动态的添加内容，例如下面的代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>当前的时间为：
<script type="text/javascript">
document.write("<strong>"+(new Date()).toString()+"</strong>");
</script>
</p>
</body>
</html>以上就是JavaScript文档对象模型-Document类型的内容，更多相关内容请关注PHP中文网（www.php.cn）！
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
