Coredom processing the DOM tree

The first step in working with an HTML document is to get a reference to the document element, where each element is a node in the DOM, and all the elements in the Dom form a DOM tree. Other nodes can be found by one node.

1. Everything is a node

Is that all the content in HTML is described as a node, just described by a different type.

Eg: <p font= "13px #CCC"> I am the article node </p>

P is the element node

Font is an attribute node, with attributes and values

I'm a text node: a text node

2.Node interface-defined methods

After parsing into the DOM in an HTML document, all the content becomes nodes, different nodes have different types, each type of node corresponds to an interface, element ATRR text document, and so on.

Element and document are both inherited and node interfaces.

The Node interface corresponds to the method:

AppendChild () appends an element after the last child element in the element.

CloneNode () Clones a node

HasAttributes () determines whether an element has attributes

InsertBefore () Inserts a sibling node before the element

RemoveChild () Removes a child node from the list of child nodes.

ReplaceChild () replaces a child node.

Property:

NodeName: node Name

NodeValue: Return node value

NodeType: Return node type

ParentNode: Returns the parent node

Childnode: Returns all child nodes Firstnode: first child node LastChild: Last child node, previoussibling: Previous node, nextSibling: Next node

Attributes: Returns all properties of the node

Ownerdocument: Returns the corresponding Document object for this node.

Eg: Gets a root element that traverses all nodes through this root element. You can traverse the attribute node text node, delete the node, add, clone, replace.

var root=document.documentelement;

Var nodelist=root.childnode;//method One

for (Var i=0;i<nodelist.length;i++) {

if (nodelist[i].nodetype==1)

document.write (nodelist[i].nodename+ "=" +)

if (nodelist[i].nodetype==3)

document.write (nodelist[i].nodename+ "=" +nodelist[i].nodevalue);

}

var childe=root.firtstchild;

while (Child!=null)

{

Output

childe=root.nextsibling;

}

2.2. Deleting node properties and content in HTML elements

Delete a node

RemoveChild (Childenode)//Delete a node subtree

Eg:root.removeChild (Root.firstchild);

Delete Node Properties

Element.removeattribute (SName);

Eg:root.removeAttribute ("id"); Remove Current Property

Root.getattribute ("id"); Get Current property

To delete a node's attribute node

Element.removeattributenode (arr_id)//arr_id is an attribute node

Delete text content in a node (text nodes can be obtained first as text nodes)

Element.removechild (Textnode);

2.3. Replacing nodes with the ReplaceChild method

Replacenode=parentnode.replacechild (Snewnode,schildnode) is a reference that replaces Schildnode with NewNode and returns a replacement node.

3. The following interfaces are inherited on the basis of node, document,attr, Element, text interface They have other methods and properties in addition to the node interface.

3.1 Document interface (representing the entire HTML document)

Create a Node

Ele.createelement ("div");//Create Element node

Ele.createtext (Textname); Create a text node

Ele.createattribute (SName); To create an attribute node

3.2 Attr Interface

You can get the name and value of the property through the Property object Attr.name Attr.value;

You can get the attribute node in this element by using the GetAttributeNode () method in node, and then use this attribute node through the Attr interface property name, value to obtain the corresponding property names and property values.

Attr=ele.getattributenode ();

var a=attr.name;

var B=attr.value;

3.3 Element interface

The element object can use the document.getElementById (), document.getElementsByTagName () method to get the nodes of the elements for further processing. Primarily used to manipulate the attributes of an element.

Eg:var Div=root.getelementbyid ("one");

var Cl=div.getattribute ("class")//Gets the attributes of an element through the Elements object

1. Inserting an element node into a document

1. Can be inserted with appendchild ()

var obj=document.createlement ("P");

Div.appendchild (obj);

Obj.parentChild.appendChild (obj);

2. Can be inserted with BeforeInsert () //This is insertbefore ()

var iobj=obj.clonenode (false);

Div.  InsertBefore (Obj,div.firstchild); is to insert the first parameter before the second argument

2. Element Add attribute

Use SetAttribute ("Class", "Font= ' 13px");//Add element properties

Use Var t=ele.createattribute ("id"); Creating ELEMENT nodes

Use Ele.setattributenode (t);

Html5document related properties and methods are inherited to the document core object

Document. Getelementbytagname () method

is to return a list of nodes that contain all descendants (not only child descendants) that match the specified node name.

Document.getelementbytagname ("*") ====root.childnodes; is the node name such as P SPAN tr td a ...

Document.getelementsbyname () is an element that is derived from the Name property, and the property of name includes the button input Select TextArea Form object map output fieldset meta p Aram and so on.

document.getElementById ("ID number");

Get the unique element by ID number

Document.getelementbyclassname ("main")//is the element object obtained by the class attribute of the element.

InnerHTML and outerHTML are the methods that all elements can have

Ele.innerhtml= "string" +A; Where the string to use "" A is a variable can be used + link

Ele.outhtml, which is the entire element content that returns ELE, contains the element label itself.

document.write ()

Document.writeln ()//inside the string, can be HTML, is the method of document

CSS Selection rhetorical element

Element Queryselector (Selectors)//return first element

NodeList Queryselectorall (selectors)//return all conforming element collections

Selectors:body P//p is the universal child node of the body

Body>p//P is the direct child node of the body

HTML5 form Processing

Coredom processing the DOM tree