What is Dom?

I found that the attributes and methods of JavaScript objects and Javascript DOM objects are mixed in many ways. I have benefited a lot from the introduction of DOM in front-end web development.

Dom
Dom has the ability to access Html files and XML file elements. In short, Dom can be used to add, modify, and delete elements to an html or xml file. It can be used to change its existing structure or content.
If you have never touched Dom, you will find Dom amazing... whether you are a cainiao or a master, Dom is crucial in this web design age that focuses on user experience. if you are an experienced web designer, you should have seen or used the following commands or methods: getElementById getElementsByTagName offsetParent appendChild getAttribute. However, some people still think that these are all in JavaScript, otherwise, these are all very important methods in Dom! I promise that the dom manual provided by web circles will be the most comprehensive and detailed content of dom in this century. Read it carefully and believe that it will help you!

What can Dom do on a webpage?

Search elements of the most common methods in HTML Dom

Reference of Dom: documentDom

How to quickly find an element in a webpage: getElementById

Search for a group of tags in the Dom. The element with the same name is getElementsByTagName.

Find multiple elements based on the tag's Id attribute value or name attribute: getElementsByName

In the Dom, you can create, add, delete, modify, replace, and copy labels and text content on the webpage as follows.

Create a Tag Element in the webpage: createElement_x

Create a text section: createTextNode

Add an element to the webpage: appendChild

The method to delete the Dom of an element is removeChild.

SetAttribute

ReplaceChild

Copy and clone an existing tag or element: cloneNode

Get and modify the html Tag and text content in the element: innerHTML

Obtains or modifies the text content of an element. Only IE: innerText is supported to obtain or modify the text content of an element. FF: textContent is supported.

HTML Dom also provides a set of APIs to operate Table elements in a webpage.

The insertRow method in the HTML Dom can add a row to the table.

To delete a row in a table, use deleteRowHTML.

The insertCell method in Dom can add a column to a row in the table.

The method for deleting a column in a row is: deleteCellHTML

The createCaption method in the Dom can create a title HTML for the table.

The createTHead method in the Dom can create a TheadHTML

The createTFoot method in the Dom can create a TFoot for the table.

The attribute of referencing all rows in the table is rows.

Reference all columns of a row in the table: cells

Move rows in a table. Only Internet Explorer: moveRow is supported.

Related commands for operating parent, child, and sibling elements in Dom

The command to obtain the parent element is: parentNode

Obtain the first child element in the element: firstChild

Obtain the last child element in the element: lastChild

Obtain all child elements in the element: childNodes

Get the previous sibling element: previussibling

Obtain the next sibling element nextSibling