[Day51] Python path----JavaScript--dom operation

JavaScript can manipulate the entire browser, but this browser object is larger, so for ease of operation, it is divided into three objects.

1.BOM objects

BOM Object main operation address bar, browsing history, window height and so on.

2.DOM objects

DOM objects primarily manipulate the CSS styles of elements and related elements on a Web page.

3.Window objects

The Window object is the browser's host object and provides methods and properties that are not related to JavaScript.

Above three objects, we mainly learn DOM objects, through the DOM programming, we can easily achieve some of our common effects.

Window Object Window Object method

Alert ()            displays a warning box with a message and a confirmation button. SetInterval ()      invokes a function or evaluates an expression by the specified period (in milliseconds). Clearinterval ()    cancels the timeout set by SetInterval (). SetTimeout ()       invokes a function or evaluates an expression after the specified number of milliseconds. Cleartimeout ()     cancels the timeout set by the SetTimeout () method. ScrollTo ()         scrolls the content to the specified coordinates. Confirm ()          displays a dialog box with a message along with a confirmation button and a Cancel button. Prompt ()           displays a dialog box to prompt the user for input. Open ()             opens a new browser window or looks for a named window. Close ()            closes the browser window.

Window Common Properties

Window.location

A simple page operation can be done using the href attribute of the location of this attribute

window.location.href  Get URLwindow.location.href="URL"  REDIRECT Window.location.reload Reload

Dom Object

According to the HTML DOM standard, all the content in the HTML document is node:

• The entire document is a document node (documents object)
• Each HTML element is an element node (elements object)
• Text within an HTML element is a text node (the text object)
• Each HTML attribute is an attribute node (attribute object)
• Note is a comment node (Comment object)

Find tags

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

Indirect lookup

ParentNode  parent Node childnodes  all child nodes firstchild the  first child node lastchild the  last child node nextsibling Next sibling node previoussibling  Previous sibling node parentelement parent node Tag element children  All child tags firstelementchild  The first child tag element lastelementchild The  last child tag element nextelementsibling The  next sibling tag element previouselementsibling The  previous sibling tag element

Action Content

InnerText  text innerhtml  HTML content  value

Action Properties

Attributes                       gets all label properties setattribute (key, value)  set Label property getattribute (Key)           gets the specified label property removeattribute (Key)     Delete Property

Style actions

Operation class

ClassName  get all style class name Classlist.remove (CLS)  Delete the specified class Classlist.add (CLS)  Add Class

Specifying CSS Actions

obj.style.backgroundcolor="red"

JS Operation CSS Properties of the law:

1. For CSS properties that do not have a horizontal line, use the style directly. The property name. Such as:

Obj.style.marginobj.style.widthobj.style.leftobj.style.position

2. For CSS attributes with a horizontal line, change the first letter in the back of the middle line to uppercase. Such as:

Obj.style.marginTopobj.style.borderLeftWidthobj.style.zIndexobj.style.fontFamily

Event

One of the new features of HTML 4.0 is the ability to enable HTML events to trigger actions in the browser, such as starting a piece of JavaScript when the user clicks on an HTML element. The following is a list of attributes that can be inserted into an HTML tag to define an event action.

onclick an        event handle that is invoked when a user taps an object. OnDblClick an     event handle that is called when the user double-clicks an object. The onfocus        element gets the focus.                // Exercise: Input Box The onblur         element loses focus.               scenario: For form validation, when a user leaves an input box, the Representative has already entered it and we can verify it.       the contents of the onchange domain are changed.             scenario: Typically used for form elements, which are triggered when the element content is changed. (three-level linkage) onkeydown      a keyboard key is pressed.          Application Scenario: When the user presses the ENTER key in the last input box, the form submits. onkeypress     a keyboard key is pressed and released. onkeyup        a keyboard key is released. OnLoad         a page or an image to finish loading. onmousedown    the mouse button is pressed. OnMouseMove    Mouse is moved. onmouseout     the mouse to move away from an element. onmouseover    mouse moves over an element. OnMouseLeave   mouse away from element onselect      text is selected. OnSubmit      confirm button is clicked. 

[Day51] Python path----JavaScript--dom operation