HTML DOM

When a web page is loaded, the browser creates a Document Object Model for the page.

 

DOM Node Type

• Document node (document, unique)

• Element nodes (those labels div, p, etc.)

• Attribute nodes (class, src)

• Text nodes (text inserted in p, div)

Definition and usage of open() in document

The open() method opens a new document and erases the contents of the current document.

grammar

document.open(mimetype,replace)

 

Parameter description

mimetype is optional. Specify the type of document being written. The default value is "text/html".

Alternative. When this parameter is set, it causes a new document to inherit historical entries from the parent document.

 

Explain

This method will erase the content of the current HTML document and start a new document. The new document is written in the write() method or the writeln() method.

 

Tips and notes

Important: After calling the open() method to open a new document and setting the content of the document with the write() method, you must remember to close the document with the close method and force its content to be displayed.

Note: A script or event handle that is part of an overwritten document cannot call this method because the script or event handle itself can also be overwritten.

 

function createNewDoc()

{

 var newDoc = document.open("test/html","replace");

 var txt = "Study DOM Very funny!";

 newDoc.write(txt);

 newDoc.close();

}

<input type="button" value="Open and write a new document" onclick="createNewDoc()"/>

 

Finding Element Ways

 

//Find the element with id shanghai

var shanghai= docment.getElementById('shanggai');

//Find the set of elements whose name is city

var citys = docment.getElementByNames('city');

//Find the set of elements whose class is btn btn-info

var buttons = getElementsByClassName('btn btn-info');

//Find the set of elements labeled li in the cities object

var li = citys.getElementsByTagName('li');

 

Change label content and attributes

 

//Get the element whose id is "div"

var node = document.getElementById('div');

//Adding or changing element attributes

document.getElementById('div').setAttribute("class","window j");

//Returns the node name

var name = node.nodeName;

//Return node type

var type = node.nodeType;

//Return to parent node

var parent = node.parentNode;

//Returns a collection of child nodes

var childs = node.childNodes;

//Delete the current node

node.parentNode.removeChild(node);

//Create node

var div = document.createElement('DIV');

//Replacement Nodes (New Nodes, Replaced Nodes)

node.parentNode.replaceChild(div, node);

//Add child nodes

node.appendChild(div);

 

Differences among innerText, innerHTML and nodeValue

 

 

<div id="div">Hello World</div>

<input type="text" id="input" />

//Output is "Hello World"

var div = document.getElementById('div').innerText; 

//Output is ""

var input= document.getElementById('input').innerText;

 

 

<div id="div"><span>Hello World</span></div>

//The output is "<span>Hello World</span>"

var div = document.getElementById('div').innerHTML;

 

 

<div id="div" class="div class">

  <span id="span">Hello World</span>

</div>

var div = document.getElementById('div');

var span = document.getElementById('span');

//The output is null, because div belongs to the element node, which has no value.

console.log(div.nodeValue);  

//The output as a "div class" attribute node is valid

console.log(div.getAttributeNode('class').nodeValue);  

//Output is "div"

console.log(div.getAttributeNode('id').nodeValue);  

//The output is "Hello World", and span actually has a child node, which is a text node.

//Text node is still a node although it has no label.

console.log(span.childNodes[0].nodeValue);