Dom Knowledge points

1. * * * Recursive traversal of node tree

Recursive invocation: Inside the function and calling itself

When to use recursion: when traversing hierarchical institutions with uncertain levels of depth

Principle: Within a function, calling any function will create a new EC for the new function call. A function can be implemented to perform multiple tasks over and over again.

Depth-First traversal: prioritize traversal of subordinate nodes

**arguments.callee refers to the function object that is currently being called

When to use: the recursive internal must call the current function with the callee property,

The function name cannot be used directly.

Node tree: A tree structure consisting of all nodes

Element tree: A tree structure that consists only of element nodes

Node Tree element tree

Parent node: parentnode parentelementnode

Child node Collection: ChildNodes children

First child: FirstChild firstelementchild

Last Child: LastChild Lastelementchild

Former brother: PreviousSibling previouselementsibling

After a brother: NextSibling nextelementsibling

children:ie8+

Rest: ie9+

Traverse Api:2:

Nodeiterator: Traverse a node up or down according to the principle of depth first

Reference only one node object at a time

How to use: 2 steps:

1. Create an Iterator object:

var iterator=document.createnodeiterator (

The node object to begin with,

The type of traversal node,//nodefilter.show_all

Nodefilter.show_element

Null,false

);

2. Skip to the next node object: Var next=iterator.nextnode ();

Returns null if there is no next node

Step back and return to the previous node:

var prev=iterator.previousnode ();

Get the node that is standing: Iterator.referencenode

TreeWalker: Free traversal: Based on guaranteed basic depth priority function

Added extra methods to jump in any direction

How to use: exactly the same as the Nodeiterator basic function

Additional methods: ParentNode (), FirstChild (), LastChild ()

NextSibling (), previoussibling ()

2. * Find: 2 major categories:

1. Getxxx:4:

Find 1 element objects by ID:

var Elem=document.getelementbyid ("id value");

Find multiple child element objects by tag name:

var nodelist=parent.getelementsbytagname ("tag name");

When to use: Gets the specified child element under a parent object when used

Interference in the shielding of empty text

To find multiple child element objects by the Name property:

var nodelist=parent.getelementsbyname ("Name Attribute name");

Find multiple child element objects by class name: HTML5 new, ie9+

var nodelist=parent.getelementsbyclassname ("Style class name");

When to use: Find only once

2. Selector API: Select the core of element--jquery with CSS Selector

2 x:

1. Select only the first qualifying element:

var elem=parent.queryselector ("selector");

2. Select all elements that match the criteria:

var elems=parent.queryselectorall ("selector");

Emphasis: Elems non-dynamic collection: Contains full DOM objects and attributes

Despised questions:

GetXXX vs Selector API

Return value: GetXXX returns a dynamic collection

Selector API returns non-dynamic collection

Efficiency: High Efficiency GetXXX

Selector API Low Efficiency

When to use: multi-level lookups to get the elements you want

Dom Knowledge points