Javascript: Document Object Model

Using the DOM tree

First, access the element

1. Select a single element node

(1) Geteelementbyid ()

Using the element's ID attribute

(2) using the CSS selector to return the first matching element

Queryselector ()

Varhotitem=document.queryselectorall (' li. Hot ');

2. Select multiple elements

(1) Select all elements that use a specific value in the class attribute

Getelementbyclassname ()

(2) Select all elements that use the specified tag

Getelementbytagname ()

(3) using the CSS selector to select the matching element

Queryselectorall ()

3. Traversal of ELEMENT nodes

(1) Select the parent node of the current element node

ParentNode ()

(2) Select the previous or next sibling node in the DOM tree

Previoussibling/nextsibling

(3) Returns the first or last child node of the current element

Firstchild/lastchild

Second, manipulate these elements

1. accessing or updating text nodes

Get text from an element using a text node unique property nodevalue

2. Manipulating HTML content

(1) There is a property that can access child elements and text content

InnerHTML

(2) Another property accesses text content only

Textcontent

(3) There are also methods that can be used to create new nodes, add nodes to the tree, or remove nodes from the tree

CreateElement ()

createTextNode ()

AppendChild ()

RemoveChild ()

3. accessing or updating property values

(1) you can obtain or update the class and ID attributes through them

Classname/id

(2) The first is used to check whether a property exists, the second is used to get the property value, the third is used to update the property value, and the fourth is used to remove the property value

Hasattribute ()

GetAttribute ()

SetAttribute ()

RemoveAttribute ()

Three,Nodelist: DOM query that returns multiple elements

The following 4 different DOM queries return a nodelist

getElementsByTagName ()

getElementsByTagName ()

Getelementsbyclassname ()

Queryselectorall ()

Iv. cyclic traversal of Nodelist

for (vari=0;i

{

Hotitems[i].classname= ' cool ';

}

Traversing the DOM

ParentNode

If you start with the first <li> element, then its parent node is the <ul> element

PreviousSibling, nextSibling

These two properties find the previous or next sibling node of the current node (if one exists)

FirstChild, LastChild

These two properties find the first or last child node of the current element

Five, front and rear sibling nodes

Varstartitem =document.getelementbyid (' both ');

varprevitem=startitem.previoussibling;

Varnextitem =startitem.nextsibling;

Previtem.classname= ' complete ';

Nextitem.classname= ' cool ';

Six, first and last characters

Varstartitem =document.getelementsbytagname (' ul ') [0];

Varfirstitem=startitem.firstchild;

Varlastitem=startitem.lastchild;

Firstitem.setattribute (' class ', ' complete ');

Lastitem.setattribute (' class ', ' cool ');

Vii. How to get / update element content

Text node

NodeValue: Accessing node text//using the NodeValue property, you must operate on a text node instead of an action on an element node that contains text

InnerHTML: Getting, setting text and labels

Textcontent: Get, set Text only

InnerText: Get, set Text only

Viii. adding elements using DOM manipulation

Varnewe1=document.createelement (' Li ');

Varnewtext=document.createtextnode (' quinoa ');

Newe1.appendchild (Newstext);

Varposition =document.getelementsbytagname (' ul ') [0];

Position.appendchild (newE1);

Ix. using DOM operations to remove elements

Varremovee1=document.getelementsbytagname (' Li ') [3];

Varcontainere1=removee1.parentnode;

Containere1.removechild (removeE1);

Ten, attribute node

GetAttribute (): Get property value

Hasattribute (): Checks whether the element node contains a specific property

SetAttribute (): Setting property values

RemoveAttribute (): Removing attributes from ELEMENT nodes

ClassName: Gets or sets the value of the class property

ID: Gets or sets the value of the ID property

Xi. Check for a property and get his value

Varfirstitem=document.getelementbyid (' one ');

If (Firstitem.hasattribute (' class ')) {

Var Attr=firstitem.getattribute (' class ');

Vare1=document.getelementbyid (' scriptresults ');

E1.innerhtml= ' <p>thefirst item has a class name: "+attr+ ' </p> ';

12. Create a property and change its value

varfirstitem=. getElementById (' one ');

Firstitem.classname= ' complete ';

Varfourthitem=document.getelementsbytagname (' li '). Item (3);

E12.setattribute (' class ', ' cool ');

13. Removing Attributes

Varfirstitem =document.getelementbyid (' one ');

If (Firsttiteem.hasattribute (' class '))

{

Firstitem.removeattribute (' class ');

}

14 . Different event Types

Functioncheckusername ()

{...}

Functiontipusername ()

{...}

Vare1=document.getelementbyid (' username ');

Vare1msg=document.getelementbyid ("Feedback");

E1.addeventlistener (' Focus ', tipusername,false);

E1.addeventlistener (' Blur '-,checkusername,false);

Javascript: Document Object Model