Easy Learning of JavaScript twenty-three: An operation table for DOM programming Learning

Easy Learning of JavaScript twenty-three: An operation table for DOM programming Learning

1. Create a table using HTML tags:

Code:

Personnel table

Name	Gender	Age
Zhang San	Male	20
Li Si	Female	22
Total: N

Running result:

Regardless of the method used to create a table, note the following:

(1) The caption tag, thead tag, and tfoot tag can only have one

(2) The tbody tag, tr tag, th tag, and td tag can have N tags in a table.

2. Use DOM to create a table

Window. onload = function () {var table = document. createElement ("table"); document. body. appendChild (table); // Add an Attribute table to the table. width = 300; table. border = 1; // create the table title var caption = document. createElement ("caption"); table. appendChild (caption); // Add content caption to the table title. innerHTML = "personnel table"; // non-W3c standard method // create the first row of the table, which is a title line var thead = document. createElement ("thead"); table. appendChild (thead); var tr1 = document. createElement ("tr"); thead. appendChild (tr1); // create a column var th1 = document. createElement ("th"); tr1.appendChild (th1); th1.innerHTML = "name"; var th1 = document. createElement ("th"); tr1.appendChild (Th1); th2.innerHTML = "gender"; var th3 = document. createElement ("th"); tr1.appendChild (th3); th3.innerHTML = "Age"; // create the second row of the table, which is a row of content var tbody = document. createElement ("tbody"); table. appendChild (tbody); var tr2 = document. createElement ("tr"); tbody. appendChild (tr2); // create a column var td1 = document. createElement ("td"); tr2.appendChild (td1); td1.innerHTML = "James"; var td2 = document. createElement ("td"); tr2.appendChild (td2); td2.innerHTML = "male"; var td3 = document. createElement ("td"); tr2.appendChild (td3); td3.innerHTML = "20"; // create the third row of the table, which is the content row var tr3 = document. createElement ("tr"); tbody. appendChild (tr3); // create a column var td4 = document. createElement ("td"); tr3.appendChild (td4); td4.innerHTML = "James"; var td5 = document. createElement ("td"); tr3.appendChild (td5); td5.innerHTML = "male"; var td6 = document. createElement ("td"); tr3.appendChild (td6); td6.innerHTML = "20 ";};

Do you find it cumbersome to create a table using DOM? You need to create many labels and add a lot of content, which may cause a lot of code and attention.

It is not recommended.

3. Create a table using HTML DOM

To solve the problem of using DOM to create tables, we can use html dom to create the same table.

Html dom provides attributes and methods for element tags

Attributes and methods added to an element

Attributes and methods added to an element

Then we will create the same table:

Window. onload = function () {// create a table var table = document by html dom. createElement ("table"); document. body. appendChild (table); table. border = 1; table. width = 300; // use createCaption () to create a table title table. createCaption (). innerHTML = "personnel table"; // use createTHead () to create the header row var thead = table. createTHead (); // This method returns a reference var tr1 = thead. insertRow (0); // create a column var th1 = document. createElement ("th"); tr1.appendChild (th1); th1.innerHTML = "name"; var th1 = document. createElement ("th"); tr1.appendChild (Th1); th2.innerHTML = "gender"; var th3 = document. createElement ("th"); tr1.appendChild (th3); th3.innerHTML = "Age"; // create the second line of content var tbody = document. createElement ("tbody"); table. appendChild (tbody); var tr2 = tbody. insertRow (0); // This method returns a reference var td1 = tr2.insertCell (0); td1.innerHTML = "zhangsan"; var td2 = tr2.insertCell (1); td2.innerHTML = "male "; var td3 = tr2.insertCell (2); td3.innerHTML = "20"; // create the second line of content var tr3 = tbody. insertRow (1); // This method returns a reference var td4 = tr3.insertCell (0); td4.innerHTML = ""; var td5 = tr3.insertCell (1); td5.innerHTML = ""; var td6 = tr3.insertCell (2); td6.innerHTML = "22 ";};

Note that when creating a table,

Tags, tags, and alert (table. tBodies. length); // return: 1 alert (table. tBodies [0]. rows [0]. cells [0]. innerHTML); // return value: John

In a table

Tags and tags are unique and can only be one. The tag is not unique and can contain multiple tags.

Resulting in the final return

Tags and tags are element references, while tags return a set of elements. Of course, we can also use

You can use html dom to operate table data, such as setting data values and deleting cell data.

DOM and html dom are cumbersome to create tables and obtain table data. However, in practical applications, we can use

The implementation of a single method should not increase the amount of code, resulting in the number of JS Code.

Another question needs to be explained:

Differences and connections between JavaScript and HTML DOM

========================================================== ======================================

Differences:

JavaScript

JavaScript is the most popular Browser Scripting language on the Internet. Easy to use! You will love it!

JavaScript is used by millions of web pages to improve design, validate forms, detect browsers, create cookies, and more applications.

HTML DOM

Html dom is W3C standard (abbreviated as Document Object Model for HTML ).

Html dom defines a series of standard objects for HTML and standard methods for accessing and processing HTML documents.

With DOM, you can access all HTML elements, along with the text and attributes they contain. You can modify and delete the content.

You can also create new elements.

Html dom is independent of platform and programming language. It can be used by any programming languages such as Java, JavaScript, and VBScript.
========================================================== ======================================

Contact:

JavaScript allows you to refactor the entire HTML document. You can add, remove, change, or rearrange projects on the page.

To change something on the page, JavaScript needs to obtain an entry to access all elements in the HTML document. This entry, together with

The methods and attributes for adding, moving, changing, or removing HTML elements are obtained through the Document Object Model (DOM ).

Javascript uses html dom to obtain, change, and Create HTML elements, so as to beautify pages and operate on page elements. Because

In this case, the most common in Javascript is a variety of html dom elements and their respective attributes. In addition to these DOM elements,

Javascript has its own objects, such as arrays.

To put it simply, Javascript is mainly used to manipulate html dom. The two are different.

Javascript is a language, and DOM is a model that can dynamically modify documents in various languages (not only js, but also php.

========================================================== ======================================

I found this on the internet and found it very detailed, but I still don't understand it. I will understand it as I go deeper.

Alert (table. caption. innerHTML); // return: Personnel table alert (table. tHead); // obtain the table header alert (table. tHead. rows [0]. cells [0]. innerHTML); // return: Name // obtain the table body by HTML DOM

The tag does not have a specific method and you need to use   Method. 4. Use DOM to obtain table data // Because the table retrieved in the HTML document is the first var table1 = document. getElementsByTagName ("table") [0]; alert (table1); // return: object HTMLTableElementalert (table1.children); // return: object HTMLCollectionalert (table1.children. length) // return: 4, indicating the caption tag, thead tag, tbody tag, and tfoot tag alert (table1.children [1]. children [0]. children [0]. innerHTML); // return value: Name We can still see that there are many layers when using DOM operations to obtain table data, and it is still cumbersome to use, so we can still use HTML DOM to obtain table data. 5. Use html dom to obtain table data // Use HTMLDOM to obtain the table element var table = document. getElementsByTagName ("table") [0]; // press htm ldom to obtain the table