Web front-End Basics-(d) DOM

The Document Object model (Doc object Model,dom) is a programming interface for HTML and XML documents. It provides a structured representation of the document, which can change the content and presentation of the document. What we are most concerned about is that Dom links Web pages with scripts and other programming languages. Dom belongs to the browser, not the core content of the specification in the JavaScript language specifications. Here we mainly talk about using JavaScript to manipulate the DOM.

1. Find Elements 1.1 Direct Lookup

document.getElementById             gets a label based on the ID document.getelementsbyname          Gets a collection of tags based on the Name property Document.getelementsbyclassname gets a collection of tags based on the     class attribute document.getElementsByTagName       gets a collection of tags based on the tag name

1.2 Indirect lookups

ParentNode          //parent node childnodes//          All child nodes FirstChild          //first child node LastChild           //Last child node nextsibling         // Next sibling node previoussibling     //Previous sibling node parentelement           //parent node tag element children//                All child tags firstelementchild       / /first child tag element lastelementchild        //Last child tag element nextelementtsibling     //Next sibling tag element previouselementsibling  // Previous sibling tag element

2. Operation 2.1 Content

File content operations: InnerText    only text innerHTML    full content value    input    values get the current tag in    select   Gets the value of the selected value (SelectedIndex)    textarea values in the current label

Example:

//into an HTML file with the following contents: <div id= "Div1" > <p id= "P1" > I was the first p</p > <p id= "P2" > I'm the first <b> two </b> p</p><input id= "I1" type= "text" value= "I'm I1"/><sel ECT id= "I2" name= "City" size= "2" multiple= "multiple" ><option value= "1" > Beijing </option><option value= "2 "> Shanghai </option><option value=" 3 "> Nanjing </option><option value=" 4 "selected=" selected "> Handan < /option></select><textarea name= "Linearea" id= "i3" > Default data </textarea></div>// Action content document.getElementById ("P1"). Innertext;document.getelementbyid ("P1"). Textcontent;document.getelementbyid ( "P1"). textcontent= "I'm P1, I've been changed!" "document.getElementById (" P2 "). Textcontent;document.getelementbyid (" P2 "). Innerhtml;document.getelementbyid (" I1 "). Value;document.getelementbyid (" I2 "). Value;document.getelementbyid (" i3 "). Value; 

The results are as follows:

2.2 Style Actions

ClassName                //Get all Class name Classlist.remove (CLS)    //delete specified class Classlist.add (CLS)       //Add Class

Example:

First write an HTML file, the content is as follows: <div id= "D1" > I am d1</div>//operation as follows: Document.getelementbyclassname ("D1"); document.getElementById ("D1"). Classlist.add ("C1");d Ocument.getelementbyid ("D1"). Classlist.add ("C2"); document.getElementById ("D1"). Classlist.remove ("C1");

2.3 Property Operations 2.4 Creating tags, adding to HTML 2.5 submitting a form 2.6 Other 3. Events 3.1 onclick 3.2 Onblur&onfocus 3.3

Web front-End Basics-(d) DOM