Section 113th, JavaScript document objects, Dom Basics

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.