Learn the front-end JAVASCRIPT-6, JavaScript base dom from scratch

the concept and role of 1:dom (Document Object Model)the Document object is a DOM core object: Manipulate content, attributes, and styles in HTML.

Relationships between nodes in a node tree: Father and son, brother.

2:dom Common Properties

Title: Returns or sets the title of the current document.

All: Returns a collection of all elements.

Forms: Returns a reference to all form objects in the document.

To access the corresponding object through a collection:

1. By the form of subscript.

2. Through the name form.

3:dom Query Method

1.getElementById (ID): Returns a reference to the (first) object with the specified ID.

2.getElementsByTagName (TagName): Returns a collection of objects with the specified label name.

Note: There are no compatibility issues with the two methods above.

3.getElementsByName (name): Returns a collection of objects with the name specified by the specified names. There is a compatibility issue.

in IE9 and below, if the standard attribute of the object contains name, (for example, input, name is the default property of input in input, it is used normally, but the name in Div is not the default attribute of Div, so it cannot be displayed properly) , then it can be used correctly. Otherwise, it may not be used. in Firefox, this method can be used in any situation.

Conclusion: Getelementsbyname (name) is mainly applicable to forms.

4.write: Output content to page. (Note: When the Web page is loaded, the output is covered, the entire page is overwritten, and you need to be aware of it)

5.getElementsByClassName (): Returns the collection of objects with the specified name of the specified classname. There are compatibility issues that apply to Mozilla Firefox and are not available in Internet Explorer (IE8 and below).

Encapsulates a function that gets the compatibility of DOM nodes for classname values.

4: What to do

1.innerHTML: Used to set or get the contents of the object start and end tags (such as the div frame, which only gets the contents of the Div, not the Div) (identify the HTML tag).

2.innerText: Used to set or get the contents of the object start and end tags (just get the text content) (for IE, the latest version of Firefox has been supported).

Textcontent is used to set or get the contents of the object's start and end tags (just get the text content) (for Firefox, IE8 and below).

3.outerHTML is used to set or get the contents of the start and end tags including this object (for example, the div frame, not only the contents of the Div, but also the contents of the Div itself) (identifying the HTML tag).

4.outerText is used to set or get content within the start and end tags including this object (just get the text content) (Firefox does not support).

5: Action Properties

1. Direct operation

Object. Properties. Gets the property. Some properties have compatibility issues, such as name (if not a tag-specific attribute, not accessible in Chrome/firfox, IE8 and the following browsers can get to).

Object. property = value//Set, add Property (property value).

2. By method

GetAttribute ("Properties"). Gets the value of the given property.

SetAttribute ("Property", "value"). Set or add properties.

RemoveAttribute ("Properties"). Deletes an attribute.

6: Operation Style

1. Inline style

Object. Style. Properties//Get style properties

Object. Style. property = value//set, add style attribute.

Note: If the attribute is "-" linked, the "-" is removed and the first letter of the following word is capitalized.

2. Inline style and CSS cascading style common way

Object. Currentstyle. Properties IE is used to get the actual style attributes.

getComputedStyle (object, null). Firefox is used to get the actual style attributes.

Note: You can only get settings that cannot be set.

7:dom Additions and deletions change

One: Create nodes (Notes and document nodes generally do not need to be created)

1: Create element node

Document.createelement ("element tag name");

2: Create attribute node

var oattr = document.createattribute ("attribute name"); (not commonly used)

Oattr.value = "Attr-name";

Odiv.setattributenode (OATTR);

Object. property = property value; (Common)

3: Create a text node

object. InnerHTML = "";

var otext = document.createTextNode ("text"); HTML tags in text are manifested

Odiv.appendchild (Otext);

Second: Append to the page

The parent object. AppendChild (NewNode)//inserted at the end of the parent object.

The parent object. InsertBefore (NewNode, Existsnode)//before inserting to what object.

Three: Modify (replace) node

The parent object. ReplaceChild (Newnode,existsnode); The previous substitution is followed by the

Four: Deleting nodes

The parent object. RemoveChild (OldNode);

If you decide to delete a node, it is best to also empty the memory object =null;

V.: Table operation

table.tbodies[0].rows[0].cells[0].innerhtml;

var onewrow = Table.insertrow ("line position");

Onewrow.insertcell ("column position");

Learn the front-end JAVASCRIPT-6, JavaScript base dom from scratch