Viewing: learn.javascript.ru

DOM-.

, .

DOM-

DOM- . , , <a>, , , <input> , .. -. , DOM- .

DOM- .

EventTarget, Node DOM-.

[]

EventTarget .

. , DOM- , .
Node , DOM-.

: parentNode, nextSibling, childNodes .. ( ). Node . , ( Node).
Document, HTMLDocument ( ) .

document . DOM.
CharacterData . , :
- Text , . , Hello <p>Hello</p>.
- Comment . , DOM.
Element DOM-.

: nextElementSibling, children. : getElementsByTagName, querySelector.

HTML, XML SVG. , Element : SVGElement, XmlElement ( ) HTMLElement.
, HTMLElement HTML-. .

:
- HTMLInputElement <input>,
- HTMLBodyElement <body>,
- HTMLAnchorElement <a>,
- ..

, , , <span>, <section> <article>, - , HTMLElement.

, .

DOM- <input>. HTMLInputElement.

( ):

HTMLInputElement ,
HTMLElement HTML- ( /),
Element ,
Node DOM-,
EventTarget ( ),
, , Object, , hasOwnProperty.

, DOM-, , constructor. , constructor.name :

alert( document.body.constructor.name ); // HTMLBodyElement

alert( document.body ); // [object HTMLBodyElement]

instanceof:

alert( document.body instanceof HTMLBodyElement ); // true
alert( document.body instanceof HTMLElement ); // true
alert( document.body instanceof Element ); // true
alert( document.body instanceof Node ); // true
alert( document.body instanceof EventTarget ); // true

, DOM- JavaScript . , .

, console.dir(elem). , HTMLElement.prototype, Element.prototype ..

: console.log console.dir. . JavaScript- .

DOM- -:

console.log(elem) DOM-.
console.dir(elem) DOM-, .

document.body. ( Firefox, console.log(elem) console.dir(elem) DOM-).

DOM JavaScript, Interface description language (IDL), .

IDL . , DOMString, boolean ..

IDL :

          //  HTMLInputElement
//  ":"  HTMLInputElement ,     HTMLElement
interface HTMLInputElement: HTMLElement {
  //       <input>

  // "DOMString" ,    - 
  attribute DOMString accept;
  attribute DOMString alt;
  attribute DOMString autocomplete;
  attribute DOMString value;

  // boolean - ,  autofocus     (true/false)
  attribute boolean autofocus;
  ...
  // "void"   ,      
  void select();
  ...
}
        

nodeType

nodeType , DOM-.

elem.nodeType == 1 -,
elem.nodeType == 3 ,
elem.nodeType == 9 ,
.

<body>
  <script>
  let elem = document.body;

  //  :      elem?
  alert(elem.nodeType); // 1 => 

  //    ...
  alert(elem.firstChild.nodeType); // 3 => 

  //   document   -- 9
  alert( document.nodeType ); // 9
  </script>
</body>

, , instanceof , nodeType . nodeType, .

: nodeName tagName

DOM-, nodeName tagName:

alert( document.body.nodeName ); // BODY
alert( document.body.tagName ); // BODY

- tagName nodeName?

, , .

tagName Element.
nodeName Node:
- tagName.
- (, ..) .

, tagName - ( Element), nodeName - .

, tagName nodeName document -:

<body><!--  -->

  <script>
    //  
    alert( document.body.firstChild.tagName ); // undefined ( )
    alert( document.body.firstChild.nodeName ); // #comment

    // for document
    alert( document.tagName ); // undefined ( )
    alert( document.nodeName ); // #document
  </script>
</body>

, tagName nodeName, .

: HTML XML. HTML- -. XML- , XML- : Content-Type: application/xml+xhtml.

HTML- tagName/nodeName . BODY , HTML <body> <BoDy>.

XML- . XML- .

innerHTML:

innerHTML HTML- .

. .

document.body, :

<body>
  <p></p>
  <div>DIV</div>

  <script>
    alert( document.body.innerHTML ); //   
    document.body.innerHTML = ' BODY!'; //  
  </script>

</body>

HTML, :

<body>

  <script>
    document.body.innerHTML = '<b>'; //   
    alert( document.body.innerHTML ); // <b></b> ()
  </script>

</body>

innerHTML <script> HTML, .

: innerHTML+=

HTML , elem.innerHTML+=" html".

          chatDiv.innerHTML += "<div><img src='smile.gif'/> !</div>";
chatDiv.innerHTML += " ?";
        

, , .

          elem.innerHTML += "...";
//     :
elem.innerHTML = elem.innerHTML + "..."
        

, innerHTML+= :

.
innerHTML ( ).

, .

chatDiv chatDiv.innerHTML+=" ?" HTML smile.gif (, ). chatDiv , .

. , , innerHTML . <input> , , . ..

, , innerHTML, .

outerHTML: HTML

outerHTML HTML . innerHTML .

<div id="elem"> <b></b></div>

<script>
  alert(elem.outerHTML); // <div id="elem"> <b></b></div>
</script>

: innerHTML, outerHTML . .

, , , .

<div>, !</div>

<script>
  let div = document.querySelector('div');

  //  div.outerHTML  <p>...</p>
  div.outerHTML = '<p> </p>'; // (*)

  //  div   !
  alert(div.outerHTML); // <div>, !</div> (**)
</script>

- , ?

(*) div <p> </p>. <div>. , (**), div !

, outerHTML DOM-, HTML-.

, div.outerHTML=... :

div .
HTML <p> </p>.
div . HTML .

: div.outerHTML, div, . . innerHTML, outerHTML.

elem.outerHTML, , , . HTML . , DOM.

nodeValue/data:

innerHTML -.

, , , : nodeValue data. , . data, .

<body>
  
  <!--  -->
  <script>
    let text = document.body.firstChild;
    alert(text.data); // 

    let comment = text.nextSibling;
    alert(comment.data); // 
  </script>
</body>

, , ?

HTML, :

          <!-- if isAdmin -->
  <div> , Admin!</div>
<!-- /if -->
        

JavaScript data .

textContent:

textContent <>.

<div id="news">
  <h1>  !</h1>
  <p>  !</p>
</div>

<script>
  //   !   !
  alert(news.textContent);
</script>

, , <> , .

textContent, .. .

, , , .

innerHTML HTML, HTML-.
textContent , .

div:

<div id="elem1"></div>
<div id="elem2"></div>

<script>
  let name = prompt("  ?", "<b>-!</b>");

  elem1.innerHTML = name;
  elem2.textContent = name;
</script>

<div> HTML: , , .
<div> , <b>-!</b>.

, . , HTML-. textContent .

hidden

DOM- hidden , .

HTML JavaScript, :

<div>  DIV  </div>

<div hidden>  "hidden"</div>

<div id="elem">  JavaScript  "hidden"</div>

<script>
  elem.hidden = true;
</script>

, hidden , style="display:none". .

<div id="elem"> </div>

<script>
  setInterval(() => elem.hidden = !elem.hidden, 1000);
</script>

DOM- , , :

value <input>, <select> <textarea> (HTMLInputElement, HTMLSelectElement).
href href <a href="..."> (HTMLAnchorElement).
id id (HTMLElement).

<input type="text" id="elem" value="">

<script>
  alert(elem.type); // "text"
  alert(elem.id); // "elem"
  alert(elem.value); // 
</script>

HTML- DOM-, .

, . , HTMLInputElement : https://html.spec.whatwg.org/#htmlinputelement.

- , console.dir(elem), . DOM Elements .

DOM- . . .

DOM-:

nodeType: nodeType DOM-. : 1 ,3 , .. .
nodeName/tagName: ( , XML-). - nodeName , . .
innerHTML: HTML- -. .
outerHTML: HTML -. elem.outerHTML elem. .
nodeValue/data: - (, ). , data. .
textContent: : HTML <>. , . HTML .
hidden: true, , CSS display:none.

DOM- . <input> (HTMLInputElement) value, type, <a> (HTMLAnchorElement) href .. HTML- DOM.

, HTML- DOM , .

, ul/li.

, <li>:

( ) ?
<li> ( ) ?

<li>:

          for (let li of document.querySelectorAll('li')) {
  ...
}
        

li. li, :

          for (let li of document.querySelectorAll('li')) {
  let title = li.firstChild.data;

  //  title    <li>
}
        

li.getElementsByTagName('li').length.

nodeType?

          <html>

<body>
  <script>
    alert(document.body.lastChild.nodeType);
  </script>
</body>

</html>
        

<script> DOM- <script>, .

1 (-).

<html>

<body>
  <script>
    alert(document.body.lastChild.nodeType);
  </script>
</body>

</html>

          <script>
  let body = document.body;

  body.innerHTML = "<!--" + body.tagName + "-->";

  alert( body.firstChild.data ); //  ?
</script>
        

: BODY.

<script>
  let body = document.body;

  body.innerHTML = "<!--" + body.tagName + "-->";

  alert( body.firstChild.data ); // BODY
</script>

<body> . , .. body.tagName == "BODY". , tagName HTML .
body.firstChild.
data - ( ): "BODY".

DOM- "document"?

document?

DOM-?

Node Element, HTMLElement?

document, :

alert(document); // [object HTMLDocument]

alert(document.constructor.name); // HTMLDocument

, document HTMLDocument.

HTMLDocument ?

. .

__proto__.

, prototype . , HTMLDocument.prototype document.

prototype -:

alert(HTMLDocument.prototype.constructor === HTMLDocument); // true

, constructor.name. document Node:

alert(HTMLDocument.prototype.constructor.name); // HTMLDocument
alert(HTMLDocument.prototype.__proto__.constructor.name); // Document
alert(HTMLDocument.prototype.__proto__.__proto__.constructor.name); // Node

console.dir(document) -, __proto__. constructor.