Section 113th, JavaScript document objects, Dom Basics

JavaScript document objects, Dom Basics

Learning Essentials:

1.DOM Introduction

2. Find elements

3.DOM node

4. Node operation

The DOM (document object Model) is an API (application Interface) for HTML and XML Documents. The DOM depicts a hierarchical node tree that runs a developer to add, remove, and modify portions of a page. Dom was born out of Netscape and Microsoft's founding DHTML (dynamic html), but now it has become a truly cross-platform, language-neutral way of showing and manipulating page Markers.

A. DOM Introduction

The three letters in the dom, D (document) can be understood as the entire Web page document loading, O (object) can be understood as a window object, such as things, can invoke properties and methods, here we are talking about the document object, M (model) can be understood as a Web document tree Structure.

Dom has three levels, namely DOM1, DOM2, DOM3, and DOM1 became the World's standard in October 1998. The browsers supported by DOM1 include ie6+, Firefox, Safari, chrome, and opera1.7+.

All DOM objects in Ps:ie are implemented in the form of COM objects, which means that the DOM in IE may differ somewhat from other Browsers.

1. node

When loading an HTML page, the Web browser generates a tree structure that represents the internal structure of the Page. The DOM understands this tree structure as composed of Nodes.

From the tree structure, we understand several concepts, HTML tags without fathers, no brothers, so the HTML tag is the root tag. The head tag is an HTML sub-tag, and the meta and title tags are sibling relationships. If each tag is treated as a node, then these nodes are combined into a tree of Nodes.

PS: We often use labels as elements in the back, which is a meaning.

2. Node type: element node, text node, attribute Node.

Element node, in fact, is the label

Attribute node, which is the property of this tag

Text node, which is the text that the label contains

<div title= "attribute node" > Test div</div>

Two Find element, element node

It provides a convenient and simple method and properties for locating nodes so that we can quickly operate on the Nodes. Respectively: getElementById (), getelementsbytagname (), getelementsbyname (), getattribute (), setAttribute (), and RemoveAttribute ( )。

Element Node method

Method	Description
getElementById ()	Gets the node for a specific ID element
getElementsByTagName ()	Get a list of nodes of the same element
Getelementsbyname ()	Get a list of nodes of the same name
GetAttribute ()	Gets the value of a specific element node property
SetAttribute ()	Set the value of a specific element node property
RemoveAttribute ()	Remove specific Element node properties

11

Section 113th, JavaScript document objects, Dom Basics