Dom Basic Knowledge Point

1. DOM structure--what relationships may exist between two nodes and how to move between nodes arbitrarily.

Document.documentelement returns the root node of the document

Document.body

Document.activeelement returns the tag node (IE) that is being clicked in the current document

Event.fromelement returns the mouse-out source node (IE)

Event.toelement returns the source node (IE) where the mouse is moved

Event.srcelement returns the source node (IE) of the activation event

Event.target returns the source node of the activation event (Firefox)

The current object is node

Return parent node: Node.parentnode, Node.parendelement,

Returns all child nodes: Node.childnodes (contains text nodes and label nodes), Node.children

Returns the first child node: Node.firstchild

Returns the last child node: node.lastchild

Return the previous child node of the same genus: Node.nextsibling

Returns the next child node of the same genus: Node.previoussibling

Like the parentnode and parentelement functions, childnodes and children function the same. But ParentNode and ChildNodes are in line with the standard, can be said to be more general. And the other two is only IE support, not the standard, Firefox does not support, so as long as you remember there are parentelement and children on the line

2. Dom operations-How to add, remove, move, copy, create, and find nodes.

(1) Create a new node

Createdocumentfragment ()//Create a DOM fragment

CreateElement ()//create a specific element

createTextNode ()//Create a text node

(2) Add, remove, replace, insert

AppendChild ()

RemoveChild ()

ReplaceChild ()

InsertBefore ()

(3) Find

getElementsByTagName ()//by tag name

Getelementsbyname ()//value through the Name property of the element

getElementById ()//through element ID, uniqueness

3. Events-How to use events and what are the main differences between the IE and DOM event models.

(1) Bubbling event: The event is triggered in the order from the most specific event target to the least specific event target (Document object).

IE 5.5:div-< Body-< Document

IE 6.0:div-< body-< HTML-< document

Mozilla 1.0:div-< body-< HTML-< Document-< window

(2) Capture event (event capturing): Events are triggered from the most imprecise object (Document object) and then to the most accurate (and can also be captured at the window level, but must be specifically specified by the developer).

(3) DOM event Flow: Supports both event models: capture-type and bubbling-type events, but capture-type events occur first. The two event streams touch all objects in the DOM, starting with the document object and ending at the Document object.

The most unique nature of the DOM event model is that text nodes also trigger events (not in IE).

4. xmlhttprequest--What this is, how to perform a GET request completely, and how to detect the error.

The XMLHttpRequest object provides a way to communicate with the server after the Web page is loaded.

5, strict mode and promiscuous mode-how to trigger these two patterns, what is the point of distinguishing them.

In standard mode, the browser renders the page according to the specification;

In promiscuous mode, the page is displayed in a more relaxed backward-compatible manner.

The browser chooses the rendering method to use based on whether the DOCTYPE exists and which DTD to use. If an XHTML document contains a form-complete doctype, it is generally rendered in standard mode. For HTML 4.01 documents, doctype that contain strict DTDs often cause the page to be rendered in standard mode. DOCTYPE that contain transition DTDs and URIs also cause the page to render in standard mode, but having a transition DTD without a URI causes the page to be rendered in promiscuous mode. DOCTYPE is not present or incorrect in form causes HTML and XHTML documents to be rendered in promiscuous mode.

6, Box model-the relationship between margin, padding and border, the box model in the browser version of IE 8 is different.

The hierarchy of an element box model is from inside to outside: Padding, borders, and margins

IE8 the width of the elements defined in the box model of the following browsers does not include padding and borders

7, block-level elements and inline elements-how to control them with CSS, how they affect the surrounding elements, and how you think you should define them.

Block-level elements, with display:inline in CSS, and attributes into inline elements

Inline elements, with display:block in CSS, attributes to block-level elements

Impact: The surrounding elements are displayed on the same line or line breaks, and the style is adjusted as appropriate

8. Floating elements-how to use them, what their problems are, and how to solve these problems.

Elements that need to be floated can use the Float property in the CSS to define the floating position of the element, left: floating to the right.

Issues caused by floating elements:

(1) The height of the parent element cannot be stretched, affecting elements that are siblings of the parent element

(2) A non-floating element that is similar to a floating element follows

(3) The element before the element also needs to float, otherwise it will affect the structure of the page display, unless the first element floats

Workaround:

Using Clear:both in CSS, properties to clear the floating of elements can solve 2, 3 problems, for problem 1, add the following style to the parent element to add the Clearfix style:

. Clearfix:after{content: "."; Display:block;height:0;clear:both;visibility:hidden;}

. Clearfix{display:inline-block;}/* for IE/MAC */

9. What is the difference between HTML and xhtml--, and which one do you think should be used and why?

Main differences:

XHTML elements must be nested correctly

XHTML elements must be closed, and empty tags must also be closed, as

Must be written

XHTML tag names must be in lowercase letters

XHTML documents must have root elements

XHTML documentation requires assigning a value to all properties

XHTML requires that all attributes be enclosed in quotation marks "".

XHTML documents need to encode all < >, & and other special symbols

XHTML documents do not make "--" in the comment content

XHTML images must have descriptive text

The id attribute in place of the name attribute in an XHTML document

Learn more about:

The difference between HTML and XHTML

10. json--What it is, why it should be used, how to use it, and say the implementation details.

JSON (JavaScript Object Notation) is a lightweight data interchange format. Easy for people to read and write. It is also easy for machine parsing and generation.

JSON is constructed in two structures:

A collection of name/value pairs (A collection of name/value pairs). In different languages, it is understood as objects (object), record (record), structure (struct), Dictionary (dictionary), hash table (hash table), keyed list (keyed list), or associative array (associative Array).

The sequence of values (an ordered list of values). In most languages, it is understood as an array (array).

From the network

Dom Basic Knowledge Point