JavaScript 문서 개체 모델 - 문서 유형-JS 튜토리얼-php.cn

JavaScript는 문서 유형을 통해 문서를 나타냅니다. 브라우저에서 문서 객체는 HTMLDocument의 인스턴스이며 전체 HTML 페이지를 나타냅니다. 그리고 Document 개체는 window 개체의 인스턴스이므로 전역 개체로 액세스할 수 있습니다. 문서 유형 노드는 다음과 같은 특징을 갖습니다.

nodeType의 값은 9입니다.
nodeName의 값은 "#document"입니다.
nodeValue 값이 null입니다.
parentNode의 값이 null입니다.

해당 하위 노드는 DocumentType(최대 1개), 요소(최대 1개), ProcessInstruction 또는 Comment일 수 있습니다.

문서 유형은 HTML 페이지 또는 기타 XML 기반 문서를 나타낼 수 있습니다. 가장 일반적인 응용 프로그램은 HTMLDocument 인스턴스인 문서 객체입니다. 이 문서 개체를 통해 페이지와 관련된 정보를 얻을 수 있을 뿐만 아니라 페이지의 모양과 기본 구조를 조작할 수도 있습니다.

문서의 하위 노드

DOM 표준에서는 문서 노드의 하위 노드가 DocumentType, Element, ProcessInstruction 또는 Comment일 수 있다고 규정하고 있지만 해당 노드에 액세스하기 위한 두 가지 기본 제공 단축키가 있습니다. 자식 노드. 첫 번째는 항상 HTML 페이지의 요소를 가리키는 documentElement 속성입니다. 다른 하나는 childNodes 목록을 통해 문서 요소에 액세스하는 것이지만 documentElement 속성을 통해 더 빠르게 액세스할 수 있습니다. 다음은 예입니다.

<html>
    <body>
         
    </body>
</html>

로그인 후 복사

위 페이지가 브라우저에서 구문 분석된 후 해당 문서에는 하나의 하위 노드와 요소만 포함됩니다. documentElement 속성과 childNodes 목록을 통해 이 요소에 액세스하는 코드는 다음과 같습니다.

//取得<html>元素的引用
var html = document.documentElement;
alert(html === document.childNodes[0]);     //true
alert(html === document.firstChild);        //true

로그인 후 복사

위의 예에서는 documentElement, firstChild 및 childNodes[0]의 값이 동일하며 모두 포인트를 가리킨다는 것을 보여줍니다.

HTMLDocument의 인스턴스인 문서 객체에는 속성을 직접 가리키는 body 속성도 있습니다. document.body는 개발 시 자주 사용하는 속성입니다.

var body = document.body;

로그인 후 복사

모든 브라우저는 document.documentElement 속성과 document.body 속성을 지원합니다.

Document의 또 다른 가능한 하위 노드는 DocumentType입니다. 태그는 일반적으로 문서의 다른 부분과 다른 엔터티로 간주되며 doctype 속성을 통해 액세스할 수 있습니다.

var doctype = document.doctype;     //获取<!DOCTYPE>的引用

로그인 후 복사

문서 개체의 속성 및 메서드

문서 개체는 창 개체의 속성입니다. 창이 여러 프레임으로 분할되면 각 프레임은 창 개체의 속성이고 프레임 자체는 실제로 창 개체의 인스턴스입니다. 문서 객체의 공통 속성은 다음 표에 나와 있습니다.

JavaScript 문서 개체 모델 - 문서 유형

위에 나열된 것은 현재 브라우저에서 지원하는 모든 문서 속성을 보려면 다음과 같습니다. 다음 메소드를 사용할 수 있습니다:

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, 도메인, 리퍼러 속성은 웹페이지의 요청과 관련되어 있습니다. URL 속성에는 전체 URL 주소와 주소 표시줄에 있는 단서의 페이지 주소가 포함됩니다. domain 속성에는 페이지의 도메인 이름만 포함되고, Referrer 속성에는 현재 페이지에 링크된 페이지의 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)를 받습니다. 요소가 발견되면 해당 요소를 반환하고, 그렇지 않으면 null을 반환합니다. 페이지에 동일한 ID를 가진 요소가 여러 개 있는 경우 getElementById() 메서드는 문서의 첫 번째 요소만 반환합니다. IE7 이하의 IE 브라우저에서는 양식 요소의 name 속성이 찾으려는 요소 ID와 동일하면 양식 요소도 반환됩니다. 예:

<input type="text" name="someId" value="text value">
<div id="someId">div</div>

로그인 후 복사

当使用document.getElementById("someId")来查找元素的时候，IE7浏览器会将元素返回。而其它浏览器则是返回div元素。

另一个经常使用的方法是document.getElementsByTagName，通过标签名来查找元素。该方法接收一个参数：要查找的标签名称。它会返回0个或多个元素的NodeList。在HTML文档中，该方法返回一个HTMLCollection对象，称为“动态”集合。例如，下面的代码获取页面中所有的 JavaScript 문서 개체 모델 - 문서 유형 元素，并返回一个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(&#39;selectors&#39;);
elementList = document.querySelectorAll(&#39;selectors&#39;);

로그인 후 복사

其中参数selectors 可以包含多个CSS选择器，用逗号隔开。

element = document.querySelector(&#39;selector1,selector2,...&#39;);
elementList = document.querySelectorAll(&#39;selector1,selector2,...&#39;);

로그인 후 복사

使用这两个方法无法查找带伪类状态的元素，比如querySelector(':hover')不会得到预期结果。

querySelector方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。

element = document.querySelector(&#39;div#container&#39;);//返回id为container的首个div
element = document.querySelector(&#39;.foo,.bar&#39;);//返回带有foo或者bar样式类的首个元素

로그인 후 복사

querySelectorAll方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样。

elements = document.querySelectorAll(&#39;div.foo&#39;);//返回所有带foo类样式的div

로그인 후 복사

但需要注意的是返回的nodeList集合中的元素是非实时（no-live）的，想要区别什么是实时非实时的返回结果，请看下面的例子：

<div id="container">
    <div></div>
    <div></div>
</div>

로그인 후 복사

//首先选取页面中id为container的元素
container=document.getElementById(&#39;#container&#39;);
console.log(container.childNodes.length)//结果为2
//然后通过代码为其添加一个子元素
container.appendChild(document.createElement(&#39;div&#39;));
//这个元素不但添加到页面了，这里的变量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）！