In the past, we used Jquery, Zepto and other libraries to manipulate DOM. Later, with the advent of Vue, Angular, React and other frameworks, we controlled DOM by manipulating data (most of the time), and less and less directly manipulated DOM. Not to mention manipulating the DOM with native JS.

It is not necessary to introduce these libraries all the time, however, and it is important to understand some of the ways in which basic JS manipulates the DOM. Here is just a review of the FAMILIAR but unfamiliar DOM manipulation functions of JS.

The query

Query by ID

Document.getelementbyid (id) // Compatible best

// demo
// HTMl
<body>
  <div id="main">
    <div id="content"></div>
  </div>
</body>

// Script
const mainDom = document.getElementById('main');

const contentDom = document.getElementById('content');
Copy the code

Query by class

Element. The getElementsByClassName / / ie 9 + element. QuerySelectorAll / / ie8 traversal / / ie7 –

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const mainDom = document.getElementById('main');
const infoDomList1 = mainDom.querySelectorAll('.info.test');
const infoDomList2 = mainDom.getElementsByClassName('info test');
Copy the code

Query by Tag

element.getElementsByTagName // ie6+

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const divDom = document.getElementsByTagName('div');
const pDom = divDom[0].getElementsByTagName('p');
Copy the code

Query by property

Element.queryselector // IE8 + element.querySelectorAll() // IE8 + querySelectorAll returns a single DOM element, querySelectorAll returns NodeList

QuerySelector syntax is similar to jquery selector syntax, querySelector and querySelectorAll are used in the same way, so the following statements apply to both.

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const infoDom = document.querySelectorAll('.info');
const infoDom2 = document.querySelectorAll('.info:not(.test)');
Copy the code

QuerySelectorAll and querySelector are not the same under subqueries as jquery, QuerySelectorAll (“#my-id”). QuerySelectorAll (“div div”); # my-ID = #my-id = #my-id = #my-id = #my-id = #my-id = #my-id = #my-id = #my-id

Get the parent element

Element. parentNode // Basically compatible

Get child elements

Element. childNodes // Basically compatible

Element. childNodes not only gets the DOM, but also the text, etc. The DOM is represented only when nodeType === 1.

Get sibling nodes

Gets the previous sibling node

Element. previousSibling // Basically all compatible

Getting all previousSibling nodes is to traverse previousSibling until null.

The Gecko kernel’s browser inserts a text node into the document in the source code where there is a space inside the tag. Therefore, using methods such as Node.firstChild and Node.previousSibling may refer to a blank text Node rather than the one the user expected.

Gets the subsequent sibling node

Element.nextsibling // Basically compatible

Get all and attention points just like previousSibling

DOM manipulation

Create DOM

document.createElement(tagName)

The new DOM

The last append added to the child node of the node

paranetElement.appendChild(child);

Add to the front of the node

paranetElement.insertBefore(newElement, Element)

The insertBefore method inserts a newElement in front of an Element or, if Element is null, at the end of a paranetElement.

If newElement is a DOM that already exists in the document, insertBefore behaves as if it moves the DOM(all events will be preserved).

Add after the node

There is no such function 😶 you can emulate it using the insertBefore method and nextSibling.

parentDiv.insertBefore(sp1, sp2.nextSibling);
Copy the code

If SP2 has no next node, it must be the last node, then SP2. nextSibling returns null and SP1 is inserted at the end of the child node list (i.e., after SP2)

See the Node. The insertBefore ()

Modify the DOM

Modify the DOM copy

Element.innerText // Only the text inside the tag, not the tag

Modify the CSS

element.style.cssAttribute

Modify the properties

element.setAttribute()

element.removeAttribute()

element.className

Delete the DOM

paranetElement.removeChild(element)

Clear empty child nodes

There are no specific functions that can be implemented by traversing removeChild

var element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}
Copy the code

At the end

DOM operations, commonly used for the time being only think of so much, later thought, and then slowly add