Document Object Model (DOM) series one: Dom Basics

Objective:

With JavaScript, you can refactor an entire HTML document to add, remove, change, or rearrange items on a page. To change a section on a page, JavaScript requires an interface to access all the elements in the HTML document. Through this interface, you can provide methods and properties for adding, moving, changing, or removing HTML elements, all of which are implemented by the Document Object Model (DOM). Simply put, the HTML document represents the page, and the DOM represents how to manipulate the page.

1. Structure of DOM tree

There are three different types of nodes in the DOM node tree, such as element nodes, text nodes, and attribute nodes.

2. Document Object

The Document object represents an HTML file that is displayed in a browser window or frame. When a browser loads an HTML document, it creates a Document object for each HTML document, which is a property of the Window object. The Document object has a number of properties and methods.

The most common functions are as follows:

document.write (): Dynamically writes content to a page.

Document.createelement (TAG): Creates an HTML tag object.

document.getElementById (ID): The object that obtains the specified ID value.

Document.getelementbyname (name): Gets the object that specifies the Name value.

Example A:

var maincontent = document.getElementById ("main");    alert (maincontent);    MainContent.style.backgroundColor = "#FF0000";    var paragraphs = document.getelementsbytagname ("P");        for (var i = 0; i < paragraphs.length;i++)    {        paragraphs[i].style.fontsize = "2em";    }    var elements = document.getElementsByTagName ("Body") [0].childnodes;        for (var i = 0; i < elements.length;i++)    {                  alert (elements[i].nodetype);           }

HTML Document:

<%@ page language= "C #" autoeventwireup= "true" codebehind= "Default.aspx.cs" inherits= "Ui._default"%><! DOCTYPE html>
　　
　
Document Object Model (DOM) series one: Dom Basics