Browser - Operating DOM

Before operating a DOM node, we need a variety of ways to get this DOM node. The most commonly used method is document.getElementById()and , and CSS selectors .document.getElementsByTagName()document.getElementsByClassName()

document.getElementById()You can directly locate only a DOM node.

document.getElementsByTagName()And document.getElementsByClassName()always returns an array of DOM nodes.

// Returns the ID of 'test' nodes: 
var Test = document.getElementById ( 'test' ); 

// first positioning ID as 'test-table' node, then returns all of the internal nodes tr: 
var TRS = Document. . the getElementById ( 'Test-Table') the getElementsByTagName ( 'TR' ); 

// first positioning ID as' test-div 'node, then returns to its class comprises all nodes inside the red: 
var Reds = document.getElementById (' Test -div '.) getElementsByClassName (' Red ' ); 

// get all immediate child nodes of the node test: 
var CS = test.children; 

// Get Dir a test node, the last child: 
var First = test .firstElementChild;
 var Last = test.lastElementChild;

The second method is to use querySelector()and the querySelectorAll()need to understand selector syntax, and then use conditions to get the nodes easier:

// obtained by querySelector ID as a node q1: 
var q1 = document.querySelector ( '# q1' ); 

// Get qualified querySelectorAll node q1 in all nodes: 
var PS = q1.querySelectorAll ( 'div.highlighted > p ');

Note: the low version of IE <8 does not support querySelectorand querySelectorAll. IE8 only limited support.

Exercise:

<!-- HTML结构 -->
<div id="test-div">
  <div class="c-red">
    <p id="test-p">JavaScript</p>
    <p>Java</p>
  </div>
  <div class="c-red c-green">
    <p>Python</p>
    <p>Ruby</p>
    <p>Swift</p>
  </div>
  <div class="c-green">
    <p>Scheme</p>
    <p>Haskell</p>
  </div>
</div>

// 选择<p>JavaScript</p>:
var js = document.getElementById('test-p');

// 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
var arr =document.getElementsByClassName('c-red c-green')[0].getElementsByTagName('p');
var arr=document.querySelector('#test-div').querySelectorAll('.c-red.c-green>p');
// 选择<p>Haskell</p>:
var haskell = document.getElementsByClassName('c-green')[1].getElementsByTagName('p')[1];
var haskell = document.querySelector('#test-div').querySelectorAll('.c-green>p')[4];
var haskell = document.querySelectorAll('.c-green')[1].lastElementChild;

Update the DOM

Text node may be modified directly, in two ways:

One is to modify innerHTMLthe properties, this approach is very powerful, can not only modify the text content of a DOM node, you can also modify the internal node in the subtree of the DOM HTML fragment directly.

The second is to modify innerTextor textContentproperties, which can automatically encode HTML string, you can not be provided to ensure that any HTML tags. When the difference is read attribute, innerTextdoes not return hidden text elements, and textContentto return all text. Also note IE <9 is not supported textContent.

Into the DOM

If the DOM node is empty, for example <div></div>, then the direct use

innerHTML = '<span>child</span>'

You can modify the contents of DOM nodes, equivalent to "insert" a new DOM node.

If the DOM node is not empty, you can not do that because innerHTMLdirectly replace the original all child nodes.

There are two ways you can insert a new node. One is to use appendChild, to add a child node to the last child of the parent node. E.g:

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

The <p id = "js"> JavaScript </ p> is inserted into the end of a div

var list = document.getElementById('list'),
var js= document.createElement('p');
js.id = 'js';
js.innerText = 'JavaScript';
list.appendChild(js);

insertBefore

If we want a child node is inserted into the specified location how to do? can use

parentElement.insertBefore(newElement, referenceElement);

Child node is inserted into referenceElementbefore.

Delete DOM

To delete a node, we must first obtain the node itself and its parent, then call the parent node removeChildto delete yourself:

// get node to be deleted: 
var Self = document.getElementById ( 'BE-to-removed' );
 // get the parent node: 
var parent = self.parentElement;
 // Delete: 
var removed = parent.removeChild (Self ); 
removed === Self; // to true

Although the node after the notice is not deleting the document tree, but in fact it's in memory can be added at any time again to another location.

When you walk the child nodes of a parent node and delete operations, note that childrenproperty is a read-only attribute, and it will be updated in real time when a child node changes.

 

 Original Address: https: //www.liaoxuefeng.com/wiki/1022910821149312/1023022310122752